диалоговое окно MVC не отображает вкладки во второй раз - PullRequest
Новая
       20

диалоговое окно MVC не отображает вкладки во второй раз

1 голос
/ 11 июля 2011

Модальное диалоговое окно, содержащее три вкладки (jquery ui tabs), отображает эти три вкладки только в первый раз.

Это код представления, который содержит вкладки и загружается внутри диалогового окна: 

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

, когда я закрываю диалоговое окно и открываю его, вкладки отображаются в виде ссылок, и отображаются частичные представления, которые каждая из трех вкладок должна загружать при нажатии на все щелчкив том же диалоговом окне, НО, когда я обновляю свою главную страницу, щелкаю и открываю диалоговое окно (в первый раз), вкладки работают нормально, загружая их частичные символы соответственно.

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

Модальное диалоговое окно

Был ли у вас опыт такой проблемы?Я буду очень признателен за ваше понимание.

Спасибо

1 Ответ

2 голосов
/ 11 июля 2011

хорошо, пару вещей, которые я заметил здесь ... 

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.
}

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

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

 },

Это должно хорошо все исправить:)

...