Частичный вид в Модальном всплывающем окне только с первого раза

Question

У меня такое ощущение, что мне не хватает чего-то очевидного здесь, но я не могу понять, что происходит!

У меня есть таблица на моем представлении, которая отображает список данных. Для каждого элемента в списке я хочу иметь ссылку с возможностью клика, которая отображает больше информации об элементе. Все необходимые данные были переданы в представление, поэтому это просто для отображения. То, что я пытался сделать, передаёт информацию в частичное представление, которое отображается как модальное всплывающее окно каждый раз. Этот работает, но только для первого элемента. Как только всплывающее окно закрыто, а другое/тот же элемент щелкнут, я получаю оверлей, но не всплывает.

Вот мой взгляд код:

<td> 
    <a href="#" class="viewDetails" id="@hatchSlot.AppointmentID">View</a> 
    <div class="ui-dialog" id=@(hatchSlot.AppointmentID + "View")> 
     @Html.Partial("_ViewAppointmentDetails", hatchSlot) 
    </div> 
</td> 

И JQuery:

$('.viewDetails').click(function (event) { 
    event.preventDefault(); 
    var appointmentID = this.id + "View"; 
    popup = $('#' + appointmentID); 
    SetupModalDialog(); 
    popup.dialog('open'); 
    }); 

    function SetupModalDialog() { 
    $('.ui-dialog').dialog 
     ({ 
      autoOpen: false, 
      width: 400, 
      resizable: false, 
      title: 'Appointment Details', 
      modal: true, 
      buttons: { 
       "Close": function() { 
        $(this).dialog("close"); 
       } 
      } 
      }); 
} 

Я не уверен, что происходит сзади. Я предполагаю, что первый клик переписывает то, что было уже там, но поскольку я довольно новичок в MVC, я не могу это выпустить.

Любая помощь/совет приветствуются. Я хотел бы иметь возможность отображать эту информацию, не делая другого вызова моего контроллера.

Заранее благодарим за помощь/совет.

Answer 1

Как я и ожидал, мне не хватало чего-то довольно очевидного - мне нужно было передать «всплывающее окно» в функцию SetupModalDialog ... что-то маленькое, но не столь маленькое с точки зрения функциональности!

Может быть, это может помочь кому-то еще ...

$('.viewDetails').click(function (event) { 
    event.preventDefault(); 
    popup = $('#' + this.id + "View"); 
    SetupModalDialog(popup); 
    $(popup).dialog('open'); 
}); 

$('.ui-widget-overlay').live('click', function() { 
    $('.ui-dialog').dialog("close"); 
}); 


function SetupModalDialog(popup) { 
    popup.dialog 
     ({ 
      autoOpen: false, 
      width: 400, 
      resizable: false, 
      title: 'Appointment Details', 
      modal: true, 
      buttons: { 
       "Close": function() { 
        $(this).dialog("close"); 
       } 
      } 
     }); 
}