Question

A modal dialog which contains three tabs (jquery ui tabs), displays those three tabs the first time only.

This is the view code that contains the tabs and is loaded inside the dialog box:

<%@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>

when I close the dialog box and reopen it the tabs display as links, and the partial views that each of the three tabs are suppose to load upon click all get displayed in the same dilog box, BUT when I refresh my main page and click and open the dialog box (first time) the tabs work fine loading their partialivews respectively.

the Jquery for the dialog box is:

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;
    });

Modal Dialog

any experience with such a problem before? I will appreciate your insight greatly.

Thanks

Answer 1

ok a couple things i’ve noticed here…

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

no need to have $() around dialogbox. it’s already a jquery object! This likely isn’t the problem, but it’s certainly not helping. 🙂

next:
try changing your close function to being this:

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

you might also want to move your tab initialization to the loading success handler. I find sometimes the document doesn’t fire as expected when using load.

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

 },

That should fix it up nicely 🙂