asp.net mvc jquery + tabs + jqgrid + jqgrid загружается только для первой вкладки

Question

Привет, У меня проблема с использованием вкладки jqgrid и jquery (я пишу в asp.net mvc) У меня есть две вкладки. Каждая вкладка должна содержать jqgrid с разными данными. Я указываю вкладки следующим образом:

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

    function getContentTab(index) {
        var url='<%= Url.Content("~/Admin/GetWorkspaces") %>/' + index;
        var targetDiv = "#tabs-" + index;
        var ajaxLoading = "<img id='ajax-loader' src='<%= Url.Content("~/Content") %>/ajax-loader.gif' align='left' height='28' width='28'>";

        $(targetDiv).html("<p>" + ajaxLoading + " Loading...</p>"); 

        $.get(url,null, function(result) {
            $(targetDiv).html(result);
        });
    }

</script>
    <div id="tabs">
    <ul>
        <li><a href="#tabs-1" onclick="getContentTab(1);">tab1</a></li>
        <li><a href="#tabs-2" onclick="getContentTab(2);">tab2</a></li>
    </ul>
    <div id="tabs-1">

    </div>
    <div id="tabs-2">

    </div>
</div>   

Как показано выше, действие GetWorkspaces получает мои вкладки:

public ActionResult GetWorkspaces(int id)
    {
        string viewName = string.Empty;

        switch (id)
        {
            case 1:
                viewName = "MarketplaceOfferView";
                break;
            case 2:
                viewName = "MyMessagesView";
                break;
        }
        return PartialView(viewName);
    }

каждый вид является частичным. В этих частичных представлениях я указал jqgrids следующим образом:

<script type="text/javascript">
jQuery("#list").ready(function() {
    jQuery("#list").jqGrid({
        url: '/Admin/GetGridData/',
        datatype: 'json',
        mtype: 'GET',
        colNames: ['Klient', 'Zapytanie', 'Atrakcyjność', 'Cena', 'Data początkowa', 'Data końcowa', 'Branża', 'Lokalizacja' ],
        colModel: [
              { name: 'CompanyName', index: 'CompanyName', width: 150, align: 'left' },
              { name: 'Content', index: 'ContactName', width: 300, align: 'left' },
              { name: 'Rating', index: 'Address', width: 150, align: 'left' },
              { name: 'Price', index: 'City', width: 150, align: 'left' },
              { name: 'Price', index: 'City', width: 150, align: 'left' },
              { name: 'Price', index: 'City', width: 150, align: 'left' },
              { name: 'Price', index: 'City', width: 150, align: 'left' },
              { name: 'Price', index: 'PostalCode', width: 100, align: 'left' }
            ],
        pager: jQuery('#pager'),
        rowNum: 100,
        rowList: [5, 10, 20, 50],
        sortname: 'Operator.FullName',
        sortorder: "asc",
        viewrecords: true,
        imgpath: '/scripts/themes/steel/images',
        caption: 'Historia moich wiadomości',
        height:400
    });
    //        .navGrid(pager, { edit: true, add: false, del: false, refresh: true, search: false });
});

</script>
Historia moich wiadomosci
 <table id="list" class="scroll" cellpadding="0" cellspacing="0" width="100%">
</table>
<div id="pager" class="scroll" style="text-align: center;">
</div>

Для второго просмотра у меня есть действие: / Admin / GetGridDataForTab2 / Проблема в том, что я вижу jqgrid только при нажатии на первую вкладку. Когда я нажимаю на вторую вкладку, сетка не отображается и / Admin / GetGridData / не выполняется. У кого-нибудь есть идеи, что не так?

Answer 1

Это, вероятно, из-за вашего взгляда. Обратите внимание, что после загрузки второй вкладки у вас будет 2 элемента с одинаковым идентификатором (list) на странице. Поэтому, когда ваш селектор jQuery("#list") запустится, он найдет элемент списка на первой вкладке и обновит его вместо элемента на второй вкладке. Вы должны дать им разные имена.

Просто из любопытства, почему вы переключаете свое собственное поведение Ajax на вкладки вместо того, чтобы использовать встроенное ?