Multiple jQgrids in jQueryui bookmarks

Question

I have a problem that I need help with. I have 3 jQueryUI tabs. The first contains a grid of elements. The second is the Work Orders grid. The third simply fires a warning to see if the show function works. The problem is that I do not have a grid in the second tab. At first it charges a fine. If I comment on the code for the first tab, the second grid will show up well. The third tab fires every time. I have a lightbox that I use to edit items in my favorites, which works great. Here is the relevant code:

jQuery(document).ready(function () { $('#tabs').tabs({ show: function(event, ui) { if(ui.index == 0) { jQuery("#list1").jqGrid({ ... pager: '#pager1', ... jQuery("#list1").jqGrid('navGrid','#pager1',{edit:false,add:false,del:false}); } else if(ui.index == 1) { $("#list").jqGrid({ ... pager: '#pager', .... onSelectRow: function(id){ if(id){ alert(id); onclick=openbox('Edit Work Order', 1); ... else if(ui.index == 2) { alert('tab2'); } } 

I appreciate any help you can give.

Answer 1

Your problem probably exists because you used HTML code

 <div id="tabs-1"> <table id="list1"><tr><td/></tr></table> <div id="pager1"/> </div> <div id="tabs-2"> <table id="list"><tr><td/></tr></table> <div id="pager"/> </div> <div id="tabs-3"> <p>Bla bla</p> </div> 

instead

 <div id="tabs-1"> <table id="list1"><tr><td/></tr></table> <div id="pager1"></div> </div> <div id="tabs-2"> <table id="list"><tr><td/></tr></table> <div id="pager"></div> </div> <div id="tabs-3"> <p>Bla bla</p> </div> 

I changed the code a bit to the next

 jQuery(document).ready(function () { var initGrids= [false,false]; $('#tabs').tabs({ show: function (event, ui) { if (ui.index === 0 && initGrids[ui.index] === false) { jQuery("#list1").jqGrid({ url: 'fillgrid.php', datatype: 'json', mtype: 'GET', colNames: ['serial', 'type', 'origin', 'subtype', 'refreshdate'], colModel: [ { name: 'id', index: 'id', width: 55 }, { name: 'type', index: 'type', width: 90 }, { name: 'origin', index: 'origin', width: 80, align: 'right' }, { name: 'subtype', index: 'subtype', width: 80, align: 'right' }, { name: 'refreshdate', index: 'refreshdate', width: 80, align: 'right' } ], pager: '#pager1', rowNum: 10, rowlist: [10, 20, 30], sortname: 'id', // NOT 'serial', sortorder: 'desc', viewrecords: true, caption: 'CPE Items', width: 950 }); jQuery("#list1").jqGrid('navGrid', '#pager1', { edit: false, add: false, del: false }); initGrids[ui.index] = true; } else if (ui.index === 1 && initGrids[ui.index] === false) { $("#list").jqGrid({ url: 'fillgridwo.php', datatype: 'json', mtype: 'GET', colNames: ['Job Number', 'Date', 'System', 'Status', 'Technician', 'Timeframe'], colModel: [ { name: 'id', index: 'id', width: 55 }, { name: 'Date', index: 'date', width: 90 }, { name: 'System', index: 'wsystem', width: 80, align: 'right' }, { name: 'Status', index: 'status', width: 80, align: 'right' }, { name: 'Technician', index: 'wname', width: 80, align: 'right' }, { name: 'Timeframe', index: 'time', width: 80, align: 'right' } ], pager: '#pager', rowNum: 10, rowList: [10, 20, 30], sortname: 'id', // NOT 'jobno' or 'Job Number' sortorder: 'desc', viewrecords: true, caption: 'Work Orders', width: 950, onSelectRow: function (id) { //var d; if (id) { alert(id); //??? onclick = openbox('Edit Work Order', 1); //??? d = "jobno=" + id; $.ajax({ url: 'fillwo.php', type: 'POST', dataType: 'json', data: {jobno:id}, success: function (data) { var id; for (id in data) { if (data.hasOwnProperty(id)) { $(id).val(data[id]); } } } }); $("button, input:submit").button(); } jQuery('#list').editRow(id, true); } }); jQuery("#list").jqGrid('navGrid', '#pager', { edit: false, add: false, del: false }); initGrids[ui.index] = true; } else if (ui.index === 2) { alert('tab2'); } } }); }); 

I turned on the initGrids array, which will be used to initialize each grid only once, commented on fuzzy code like onclick = openbox('Edit Work Order', 1); and fixed sortname .

You can see the demo . The contents of the grid will not be filled because I do not have server components on the server

Answer 2

I know his old question. But I also ran into the same issue when I had multiple jqGrids under tabs and the download didn't work. Adding the code below in javascript before defining a grid for me:

 $('#Grid').jqGrid('GridDestroy'); 

For me, there are lattices on different tabs where the same data inside the grid changes.