mvcダイアログで2回目にタブが表示されない

Question

3つのタブ（jquery UIタブ）を含むモーダルダイアログでは、初めて3つのタブが表示されます。

これでタブが含まれていると、ダイアログボックス内にロードされたビューコード：

<%@Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %> 

 <script type="text/javascript"> 
     $(document).ready(function() { 
     $("#tabstest").tabs(); 

     }); 

    </script> 

</asp:Content> 


<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server"> 

    <h2>jQuery Tabs Example</h2> 

    <div> 
    <div id="tabstest"> 
    <ul> 
     <li><a href="#tabs-1">Home</a></li> 
     <li><a href="#tabs-2">Products</a></li> 
     <li><a href="#tabs-3">Contact Us</a></li> 
    </ul> 
    <div id="tabs-1"> 


    <p> this is the home page </p> 
     <%--<% Html.RenderPartial("GetHomeTab"); %> --%>   
    </div> 
    <div id="tabs-2"> 
    <p> this is the Products page </p> 
     <%-- <% Html.RenderPartial("GetProductTab"); %> --%>   
    </div> 
    <div id="tabs-3"> 

    <p> this is the contact us page </p> 
     <%-- <% Html.RenderPartial("GetContactUsTab"); %> --%>   
    </div> 
</div>  
</div> 

</asp:Content> 

私は、ダイアログボックスを閉じて、それにリンクなどのタブ表示を再開、 3つのタブのそれぞれがクリック時にロードすると思われる部分的なビューは、すべて同じダイアログボックスに表示されますが、メインページをリフレッシュし、ダイアログボックスをクリックして開くと、それぞれ、ダイアログボックスの

jQueryがある：

jQuery(document).ready(function() { 
    $('.trigger').live('click', function (event) { 
      var dialogBox = $('<div></div>'); 
      $(dialogBox).dialog({ 
       autoOpen: false, 
       resizable: true, 
       title: 'Test Modal Dialog', 
       modal: true, 
       width: 'auto', 
       open: function (event, ui) { 
        $(this).load('<%=Url.Action("TabExample2","Controller")%>'); 

       }, 
       close: function(event,ui){ 

              } 

          }); 

      $(dialogBox).dialog('open'); 


     return false; 
    }); 

モーダルダイアログ

前に、このような問題を持つ任意の経験？私はあなたの洞察力を大いに評価します。

おかげ

Answer 1

[OK]を私はここに気づいたカップルの事...

var dialogBox = $('<div></div>'); 
$(dialogBox).dialog({ 

ダイアログボックスの周り$()を持ってする必要はありません。それはすでにjqueryオブジェクトです！これはおそらく問題ではありませんが、確かに役に立たないでしょう。 :)

次：
は、このことに、あなたの近くに機能を変更してみてください：

close: function(event,ui){ 
    dialogBox.empty().dialog('destroy'); //basically what this does is empty it, and remove any dialog functionality from the div. 
} 

あなたもロードの成功ハンドラにあなたのタブの初期化を移動する場合があります。私はロードを使用するときに文書が予想通りに起動しないことがあることがあります。

うまくそれを修正する必要があり

open: function (event, ui) { 
      $(this).load('<%=Url.Action("TabExample2","Controller")%>', function(){ 
       $("#tabstest").tabs(); 
      }); 

}, 

:)