asp.net mvc jquery + tabs +jqgrid +jqgrid loaded only for first tab
- by niao
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', 'Atrakcyjnosc', 'Cena', 'Data poczatkowa', 'Data koncowa', 'Branza', '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 wiadomosci',
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?
