Question

Greetings,
I have a problem using jqgrid and jquery tab (I am coding in asp.net mvc)
I have two tabs. Each tabs should contains jqgrid with different data.
I specify tabs as follows:

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

As seen above GetWorkspaces action gets my tabs:

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

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

each of view is a partial view. In these partial views I have jqgrids specified as follows:

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

For second view I have an action: /Admin/GetGridDataForTab2/
THe problem is that I see a jqgrid only when I click on first tab. When I click on second tab the grid is not displayed and /Admin/GetGridData/ is not executed.
Does anybody have an idea what is wrong?

Answer 1

It’s probably because of your view. Notice that once the second tab loads, you will have 2 elements with the same ID (list) on the page. So when your selector jQuery("#list") runs, it will find the list element in your first tab and update it, instead of the one in the second tab. You should give them distinct names.

Just out of curiosity, how come you’re rolling your own ajax behavior for tabs instead of using the one that’s built in?