jQuery Grid Plugin - jqGrid

Hello Tony,

Currently jqGrid use in the pager the same names 'first','prev','next','last','sp_1' and 'jqgh_'+colname for the ids. It can follow to id duplicates. Fo fix the problem I suggest to change lines 1525, 1545-1546, 1548-1549, 1552-1553, 1555-1556, 1733,1735, 1792-1795, 2037 and 3000 to the following:

… // 1525:

$('#sp_1_'+$.jgrid.jqID(ts.p.id),pgboxes).html($.fmatter ? $.fmatter.util.NumberFormat(ts.p.lastpage,fmt):ts.p.lastpage);

… // 1545-1546

$("#first_"+$.jgrid.jqID(ts.p.id)+", #prev_"+$.jgrid.jqID(ts.p.id),ts.p.pager).addClass('ui-state-disabled').removeClass('ui-state-hover');
if(ts.p.toppager) { $("#first_t_"+$.jgrid.jqID(ts.p.id)+", #prev_t_"+$.jgrid.jqID(ts.p.id),ts.p.toppager).addClass('ui-state-disabled').removeClass('ui-state-hover'); }

… // 1548-1549

$("#first_"+$.jgrid.jqID(ts.p.id)+", #prev_"+$.jgrid.jqID(ts.p.id),ts.p.pager).removeClass('ui-state-disabled');
if(ts.p.toppager) { $("#first_t_"+$.jgrid.jqID(ts.p.id)+", #prev_t_"+$.jgrid.jqID(ts.p.id),ts.p.toppager).removeClass('ui-state-disabled'); }

… // 1552-1553:

$("#next_"+$.jgrid.jqID(ts.p.id)+", #last_"+$.jgrid.jqID(ts.p.id),ts.p.pager).addClass('ui-state-disabled').removeClass('ui-state-hover');
if(ts.p.toppager) { $("#next_t_"+$.jgrid.jqID(ts.p.id)+", #last_t_"+$.jgrid.jqID(ts.p.id),ts.p.toppager).addClass('ui-state-disabled').removeClass('ui-state-hover'); }

… // 1555-1556:

$("#next_"+$.jgrid.jqID(ts.p.id)+", #last_"+$.jgrid.jqID(ts.p.id),ts.p.pager).removeClass('ui-state-disabled');
if(ts.p.toppager) { $("#next_t_"+$.jgrid.jqID(ts.p.id)+", #last_t_"+$.jgrid.jqID(ts.p.id),ts.p.toppager).removeClass('ui-state-disabled'); }

… // 1733:

if(ts.p.pginput===true) { pginp= "<td dir='"+dir+"'>"+$.jgrid.format(ts.p.pgtext || "","<input class='ui-pg-input' type='text' size='2' maxlength='7' value='0' role='textbox'/>","<span id='sp_1_"+$.jgrid.jqID(ts.p.id)+"'></span>")+"</td>";}

… // 1735:

var po=["first"+tp+"_"+$.jgrid.jqID(ts.p.id),"prev"+tp+"_"+$.jgrid.jqID(ts.p.id), "next"+tp+"_"+$.jgrid.jqID(ts.p.id),"last"+tp+"_"+$.jgrid.jqID(ts.p.id)]; if(dir=="rtl") { po.reverse(); }

… // 1782:

$("#first"+tp+"_"+$.jgrid.jqID(ts.p.id)+", #prev"+tp+"_"+$.jgrid.jqID(ts.p.id)+", #next"+tp+"_"+$.jgrid.jqID(ts.p.id)+", #last"+tp+"_"+$.jgrid.jqID(ts.p.id),"#"+pgid).click( function(e) {

… // 1792-1795:

if( this.id === 'first'+tp+"_"+$.jgrid.jqID(ts.p.id) && fp ) { ts.p.page=1; selclick=true;}
if( this.id === 'prev'+tp+"_"+$.jgrid.jqID(ts.p.id) && pp) { ts.p.page=(cp-1); selclick=true;}
if( this.id === 'next'+tp+"_"+$.jgrid.jqID(ts.p.id) && np) { ts.p.page=(cp+1); selclick=true;}
if( this.id === 'last'+tp+"_"+$.jgrid.jqID(ts.p.id) && lp) { ts.p.page=last; selclick=true;}

… // 2037:

thead += "<div id='jqgh_"+$.jgrid.jqID(ts.p.id)+"_"+ts.p.colModel[i].name+"' "+tdc+">"+ts.p.colNames[i];

… // 3000:

$("[id^=jqgh_"+$.jgrid.jqID(ts.p.id)+"]",thecol).empty().html(nData).append(ico);

Additionally I suggest to remove from the lines 2031 and 2032 the sort="desc" and sort="asc" from the definition of the <span> elements because the attributes not be used and they are not correct HTML/XHTML attributes. Only classes "ui-icon-asc", "ui-icon-desc" and "ui-grid-ico-sort" are used.

And the last suggestion. I try verify the code dinamally generated by jqGrid in the w3 validator and found out the small problem. So I suggest to modify the line 2161 to the following

var hTable = $("<table class='ui-jqgrid-htable' style='width:"+ts.p.tblwidth+"px' role='grid' aria-labelledby='gbox_"+this.id+"' cellspacing='0' cellpadding='0' border='0'><tbody><tr><td></td></tr><tbody></table>").append(thead),

The problem is that <table> element should has non-empty <tbody>. The <tbody><tr><td></td></tr><tbody> construct makes the table w3 complined (see here for details).

Best regards
Oleg