jQuery對話框只顯示第一次

Question

有jQuery對話框問題。當用戶點擊calDayContentEntry div時，我想利用ajax在對話窗口中呈現日曆內容。以下代碼適用於第一次點擊，但在關閉對話框後，我無法再次獲取該對話框以再次顯示該條目。其他條目也是第一次工作，但次要點擊不會再次打開對話框。

這裏是相關的代碼，我有問題（所有在同一個asp.net mvc 3剃刀視圖）。有沒有人有一些可以解決這個問題的調整？

  ... 
      <div class="calDayContent"> 
      @foreach (var content in day.Contents) 
      { 
       <div class="calDayContentEntry"> 
        <input type="hidden" value="@content.Entry.Id" class="hiddenId" /> 
        <div class="@content.DisplayClass">@content.Entry.Hours.ToString() hrs</div> 
       </div> 
       <div class="leaveRequestPopup"></div> 
      } 
      </div> 
      ... 

<script type="text/javascript"> 
    $().ready(function() { 
     $('.calDayContentEntry').click(function() { 
      getAndShowDialogContents(this); 
     }); 

     // Register close event for dialog if overlay is clicked 
     $('.ui-widget-overlay').live("click", function() { 
      //Close the dialog 

      $currentDialog.dialog("close"); 
     }); 
    }); 

    function getAndShowDialogContents(entryDiv) { 

     var entryId = $(entryDiv).find('input[type="hidden"]').val(); 
     var contentdiv = $(entryDiv).next('.leaveRequestPopup'); 
     var x = $(entryDiv).position().left + jQuery(entryDiv).outerWidth(); 
     var y = $(entryDiv).position().top - jQuery(document).scrollTop(); 

     $.ajax(
     { 
      type: 'POST', 
      url: 'Request/GetCalendarDetails', 
      data: { id: entryId }, 
      success: function (result) { 

       $(contentdiv).html(result); 

       $(contentdiv).dialog({ 
        autoOpen: false, 
        modal: true, 
        title: 'Details', 
        width: 400, 
        height: 300, 
        draggable: false 
       }); 

       $(contentdiv).dialog("option", "position", [x, y]); 
       $currentDialog = $(contentdiv).dialog('open'); 
      } 
     }); 
    } 
</script> 

Answer 1

我認爲這個週末爲這個問題增添了一個全新的視角。下面的代碼工作。基本上，我沒有爲每個條目使用彈出式div，而是在頁面末尾使用了一個div。該div被重用於每個對話。我使用全局變量，所以當有人在對話框外單擊關閉它時，我可以引用它。希望這可以幫助別人。

  ... 
      <div class="calDayContent"> 
      @foreach (var content in day.Contents) 
      { 
       <div class="calDayContentEntry"> 
        <input type="hidden" value="@content.Entry.Id" class="hiddenId" /> 

         <div class="@content.DisplayClass">@content.Entry.Hours.ToString() hrs</div> 
       </div> 
      } 
      </div> 
      ... 
      <div class="leaveRequestPopup"></div> 
      ... 


<script type="text/javascript"> 
    $().ready(function() { 
     $('.calDayContentEntry').click(function() { 
      getAndShowDialogContents(this); 
     }); 

     // Register close event for dialog if overlay is clicked 
     $('.ui-widget-overlay').live("click", function() { 
      //Close the dialog 

      $currentDialog.dialog("close"); 
     }); 

     $currentDialog = $('.leaveRequestPopup').dialog({ 
      autoOpen: false, 
      modal: true, 
      title: 'Details', 
      width: 400, 
      height: 300, 
      draggable: false 
     }); 
    }); 

    function getAndShowDialogContents(entryDiv) { 

     var entryId = $(entryDiv).find('input[type="hidden"]').val(); 
     var x = $(entryDiv).position().left + jQuery(entryDiv).outerWidth(); 
     var y = $(entryDiv).position().top - jQuery(document).scrollTop(); 

     $.ajax(
     { 
      type: 'POST', 
      url: 'Request/GetCalendarDetails', 
      data: { id: entryId }, 
      success: function (result) { 

       $currentDialog.html(result); 

       $currentDialog.dialog("option", "position", [x, y]); 
       $currentDialog.dialog('open'); 
      } 
     }); 
    } 
</script> 

Answer 2

這是一個有效的陳述嗎？

$currentDialog.dialog("close"); 

我認爲在這一點上它超出了範圍。

也許如果你的$（）。準備

var $currentDialog; 
$().ready(function() { 
    ... 

Answer 3

之前外界定義它，你需要重新設置對話框。

contentdiv.dialog("destroy").dialog(.... 

注意：如果你

var contentdiv = $(entryDiv).next('.leaveRequestPopup'); 

然後contentdiv已經是一個jQuery對象，所以你這樣說：

contentdiv.click(function(){ 
    //code here 
}); 

你不需要包裝在$（ contentdiv）。

當你調用這個函數：

getAndShowDialogContents(this); 

它將通過爲參數的原始文檔對象，而不是jQuery的一個，使用：

getAndShowDialogContents($(this)); 

通過當前jQuery對象