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

現在のjQueryオブジェクトを渡すために

getAndShowDialogContents($(this)); 

を

私は週末にこの問題について新たな視点を加えたと思います。動作するコードは以下の通りです。基本的には、すべてのエントリにポップアップdivを使用する代わりに、ページの最後にdivを1つだけ使用しました。その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 
}); 

をあなたは$を（それをラップする必要はありません。もう一度。この関数を呼び出す

：

getAndShowDialogContents(this); 

それは引数として生のドキュメントオブジェクトではなく、jQueryの1、使用渡します：