<?xml version="1.0" encoding="UTF-8"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
<channel>
	<title>jQuery Grid Plugin - jqGrid - Topic: non-unique ids ('first','prev','next','last','sp_1' and 'jqgh_'+colname) used in the pager</title>
	<link>http://www.trirand.com/blog/?page_id=393/bugs/non-unique-ids-firstprevnextlastsp_1-and-jqgh_colname-used-in-the-pager</link>
	<description><![CDATA[Grid plugin]]></description>
	<generator>Simple:Press Version 5.7.5.3</generator>
	<atom:link href="http://www.trirand.com/blog/?page_id=393/bugs/non-unique-ids-firstprevnextlastsp_1-and-jqgh_colname-used-in-the-pager/rss" rel="self" type="application/rss+xml" />
        <item>
        	<title>OlegK on non-unique ids ('first','prev','next','last','sp_1' and 'jqgh_'+colname) used in the pager</title>
        	<link>http://www.trirand.com/blog/?page_id=393/bugs/non-unique-ids-firstprevnextlastsp_1-and-jqgh_colname-used-in-the-pager#p22958</link>
        	<category>Bugs</category>
        	<guid isPermaLink="true">http://www.trirand.com/blog/?page_id=393/bugs/non-unique-ids-firstprevnextlastsp_1-and-jqgh_colname-used-in-the-pager#p22958</guid>
        	        	<description><![CDATA[<p>Hello Tony!</p>
<p>You made currently some changes to fix the problem, but some small parts of code inside of <a href="https://github.com/tonytomov/jqGrid/blob/master/js/grid.base.js#L1504" target="_blank">updatepager</a>&#160;still contain errors.</p>
<p>To clear the situation. If one use <strong>toppager:true</strong> parameter the controls of the pager will have the following ids:</p>
<p>sp_1_list_toppagerlast_t_list_toppagernext_t_list_toppagerprev_t_list_toppagerfirst_t_list_toppager</p>
<p>To use it I suggest to make the following modification in the updatepager code:</p>
<p>1) Insert additional line which define new <strong>tspg_t</strong> variable:</p>
<p><input type='button' class='sfcodeselect' name='sfselectit4871' value='Select Code' data-codeid='sfcode4871' /></p>
<div class='sfcode' id='sfcode4871'>updatepager = function(rn, dnd) {<br />&#160;&#160; &#160;var cp, last, base, from,to,tot,fmt, pgboxes = &#34;&#34;, sppg,<br />&#160;&#160; &#160;tspg = ts.p.pager ? &#34;_&#34;+$.jgrid.jqID(ts.p.pager.substr(1)) : &#34;&#34;<strong>,<br />&#160;&#160; &#160;tspg_t = ts.p.toppager ? &#34;_&#34;+ts.p.toppager.substr(1) : &#34;&#34;</strong>;&#160;</div>
<p>Here I use the fact, that at the time of calling of <strong>updatepager</strong>&#160;function the line <a href="https://github.com/tonytomov/jqGrid/blob/master/js/grid.base.js#L2346" target="_blank">2346</a></p>
<p><input type='button' class='sfcodeselect' name='sfselectit6285' value='Select Code' data-codeid='sfcode6285' /></p>
<div class='sfcode' id='sfcode6285'>ts.p.toppager = $.jgrid.jqID(ts.p.id)+&#34;_toppager&#34;;</div>
<p>are already executed and the ts.p.toppager contain normalized string like <strong>list_toppager</strong>.</p>
<p>2) The line <a href="https://github.com/tonytomov/jqGrid/blob/master/js/grid.base.js#L1532" target="_blank">1532</a></p>
<p><input type='button' class='sfcodeselect' name='sfselectit1114' value='Select Code' data-codeid='sfcode1114' /></p>
<div class='sfcode' id='sfcode1114'>sppg = ts.p.toppager ? &#39;#sp_1&#39;+tspg+&#34;,#sp_1&#34;+tspg+&#34;_toppager&#34; : &#39;#sp_1&#39;+tspg;</div>
<p>should be fixed as</p>
<p><input type='button' class='sfcodeselect' name='sfselectit1017' value='Select Code' data-codeid='sfcode1017' /></p>
<div class='sfcode' id='sfcode1017'>sppg = ts.p.toppager ? &#39;#sp_1&#39;+tspg+&#34;,#sp_1&#34;+<strong>tspg_t</strong> : &#39;#sp_1&#39;+tspg;</div>
<p>3) The lines <a href="https://github.com/tonytomov/jqGrid/blob/master/js/grid.base.js#L1554" target="_blank">1554</a>, <a href="https://github.com/tonytomov/jqGrid/blob/master/js/grid.base.js#L1557" target="_blank">1557</a>, <a href="https://github.com/tonytomov/jqGrid/blob/master/js/grid.base.js#L1561" target="_blank">1561</a> and <a href="https://github.com/tonytomov/jqGrid/blob/master/js/grid.base.js#L1564" target="_blank">1564</a>&#160;must be fixed to use <strong>tspg_t</strong> instead of <strong>tspg</strong>:</p>
<p><input type='button' class='sfcodeselect' name='sfselectit4091' value='Select Code' data-codeid='sfcode4091' /></p>
<div class='sfcode' id='sfcode4091'>if(cp==1 &#124;&#124; cp === 0) {<br />&#160;&#160; &#160;$(&#34;#first&#34;+tspg+&#34;, #prev&#34;+tspg).addClass(&#39;ui-state-disabled&#39;).removeClass(&#39;ui-state-hover&#39;);<br />&#160;&#160; &#160;if(ts.p.toppager) { $(&#34;#first_t&#34;+<strong>tspg_t</strong>+&#34;, #prev_t&#34;+<strong>tspg_t</strong>).addClass(&#39;ui-state-disabled&#39;).removeClass(&#39;ui-state-hover&#39;); }<br />} else {<br />&#160;&#160; &#160;$(&#34;#first&#34;+tspg+&#34;, #prev&#34;+tspg).removeClass(&#39;ui-state-disabled&#39;);<br />&#160;&#160; &#160;if(ts.p.toppager) { $(&#34;#first_t&#34;+<strong>tspg_t</strong>+&#34;, #prev_t&#34;+<strong>tspg_t</strong>).removeClass(&#39;ui-state-disabled&#39;); }<br />}<br />if(cp==last &#124;&#124; cp === 0) {<br />&#160;&#160; &#160;$(&#34;#next&#34;+tspg+&#34;, #last&#34;+tspg).addClass(&#39;ui-state-disabled&#39;).removeClass(&#39;ui-state-hover&#39;);<br />&#160;&#160; &#160;if(ts.p.toppager) { $(&#34;#next_t&#34;+<strong>tspg_t</strong>+&#34;, #last_t&#34;+<strong>tspg_t</strong>).addClass(&#39;ui-state-disabled&#39;).removeClass(&#39;ui-state-hover&#39;); }<br />} else {<br />&#160;&#160; &#160;$(&#34;#next&#34;+tspg+&#34;, #last&#34;+tspg).removeClass(&#39;ui-state-disabled&#39;);<br />&#160;&#160; &#160;if(ts.p.toppager) { $(&#34;#next_t&#34;+<strong>tspg_t</strong>+&#34;, #last_t&#34;+<strong>tspg_t</strong>).removeClass(&#39;ui-state-disabled&#39;); }<br />}&#160;</div>
<p>Best regards<br />Oleg</p>
]]></description>
        	        	<pubDate>Wed, 27 Apr 2011 20:06:36 +0300</pubDate>
        </item>
        <item>
        	<title>OlegK on non-unique ids ('first','prev','next','last','sp_1' and 'jqgh_'+colname) used in the pager</title>
        	<link>http://www.trirand.com/blog/?page_id=393/bugs/non-unique-ids-firstprevnextlastsp_1-and-jqgh_colname-used-in-the-pager#p22493</link>
        	<category>Bugs</category>
        	<guid isPermaLink="true">http://www.trirand.com/blog/?page_id=393/bugs/non-unique-ids-firstprevnextlastsp_1-and-jqgh_colname-used-in-the-pager#p22493</guid>
        	        	<description><![CDATA[<p>Hello Tony,</p>
<p>Currently jqGrid use in the pager the same names &#39;first&#39;,&#39;prev&#39;,&#39;next&#39;,&#39;last&#39;,&#39;sp_1&#39; and &#39;jqgh_&#39;+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:</p>
<p>&#8230; // 1525:</p>
<p>$(&#39;#sp_1<strong>_&#39;+$.jgrid.jqID(ts.p.id)</strong>,pgboxes).html($.fmatter ? $.fmatter.util.NumberFormat(ts.p.lastpage,fmt):ts.p.lastpage);</p>
<p>&#8230; // 1545-1546</p>
<p>$("#first<strong>_"+$.jgrid.jqID(ts.p.id)+"</strong>, #prev<strong>_"+$.jgrid.jqID(ts.p.id),ts.p.pager</strong>).addClass(&#39;ui-state-disabled&#39;).removeClass(&#39;ui-state-hover&#39;);<br />if(ts.p.toppager) { $("#first_t<strong>_"+$.jgrid.jqID(ts.p.id)+"</strong>, #prev_t<strong>_"+$.jgrid.jqID(ts.p.id),ts.p.toppager</strong>).addClass(&#39;ui-state-disabled&#39;).removeClass(&#39;ui-state-hover&#39;); }</p>
<p>&#8230; // 1548-1549</p>
<p>$("#first<strong>_"+$.jgrid.jqID(ts.p.id)+"</strong>, #prev<strong>_"+$.jgrid.jqID(ts.p.id),ts.p.page</strong>r).removeClass(&#39;ui-state-disabled&#39;);<br />if(ts.p.toppager) { $("#first_t<strong>_"+$.jgrid.jqID(ts.p.id)+"</strong>, #prev_t<strong>_"+$.jgrid.jqID(ts.p.id)</strong>,ts.p.toppager).removeClass(&#39;ui-state-disabled&#39;); }</p>
<p>&#8230; // 1552-1553:</p>
<p>$("#next<strong>_"+$.jgrid.jqID(ts.p.id)+"</strong>, #last<strong>_"+$.jgrid.jqID(ts.p.id)</strong>,ts.p.pager).addClass(&#39;ui-state-disabled&#39;).removeClass(&#39;ui-state-hover&#39;);<br />if(ts.p.toppager) { $("#next_t<strong>_"+$.jgrid.jqID(ts.p.id)+"</strong>, #last_t<strong>_"+$.jgrid.jqID(ts.p.id)</strong>,ts.p.toppager).addClass(&#39;ui-state-disabled&#39;).removeClass(&#39;ui-state-hover&#39;); }</p>
<p>&#8230; // 1555-1556:</p>
<p>$("#next<strong>_"+$.jgrid.jqID(ts.p.id)+"</strong>, #last<strong>_"+$.jgrid.jqID(ts.p.id)</strong>,ts.p.pager).removeClass(&#39;ui-state-disabled&#39;);<br />if(ts.p.toppager) { $("#next_t<strong>_"+$.jgrid.jqID(ts.p.id)+"</strong>, #last_t<strong>_"+$.jgrid.jqID(ts.p.id)</strong>,ts.p.toppager).removeClass(&#39;ui-state-disabled&#39;); }</p>
<p>&#8230; // 1733:</p>
<p>if(ts.p.pginput===true) { pginp= "&#60;td dir=&#39;"+dir+"&#39;&#62;"+$.jgrid.format(ts.p.pgtext &#124;&#124; "","&#60;input class=&#39;ui-pg-input&#39; type=&#39;text&#39; size=&#39;2&#39; maxlength=&#39;7&#39; value=&#39;0&#39; role=&#39;textbox&#39;/&#62;","&#60;span id=&#39;sp_1<strong>_"+$.jgrid.jqID(ts.p.id)+</strong>"&#39;&#62;&#60;/span&#62;")+"&#60;/td&#62;";}</p>
<p>&#8230; // 1735:</p>
<p>var po=["first"+tp<strong>+"_"+$.jgrid.jqID(ts.p.id)</strong>,"prev"<strong>+tp+"_"+$.jgrid.jqID(ts.p.id)</strong>, "next"+tp<strong>+"_"+$.jgrid.jqID(ts.p.id)</strong>,"last"+tp<strong>+"_"+$.jgrid.jqID(ts.p.id)</strong>]; if(dir=="rtl") { po.reverse(); }</p>
<p>&#8230; // 1782:</p>
<p>$("#first"+tp<strong>+"_"+$.jgrid.jqID(ts.p.id)+"</strong>, #prev"+tp<strong>+"_"+$.jgrid.jqID(ts.p.id)</strong>+", #next"+tp<strong>+"_"+$.jgrid.jqID(ts.p.id)</strong>+", #last"+tp<strong>+"_"+$.jgrid.jqID(ts.p.id)</strong>,"#"+pgid).click( function(e) {</p>
<p>&#8230; // 1792-1795:</p>
<p>if( this.id === &#39;first&#39;+tp+"_"<strong>+$.jgrid.jqID(ts.p.id)</strong> &#38;&#38; fp ) { ts.p.page=1; selclick=true;}<br />if( this.id === &#39;prev&#39;+tp+"_"<strong>+$.jgrid.jqID(ts.p.id)</strong> &#38;&#38; pp) { ts.p.page=(cp-1); selclick=true;}<br />if( this.id === &#39;next&#39;+tp+"_"<strong>+$.jgrid.jqID(ts.p.id)</strong> &#38;&#38; np) { ts.p.page=(cp+1); selclick=true;}<br />if( this.id === &#39;last&#39;+tp+"_"<strong>+$.jgrid.jqID(ts.p.id)</strong> &#38;&#38; lp) { ts.p.page=last; selclick=true;}</p>
<p>&#8230; // 2037:</p>
<p>thead += "&#60;div id=&#39;jqgh_"<strong>+$.jgrid.jqID(ts.p.id)+"_"</strong>+ts.p.colModel[i].name+"&#39; "+tdc+"&#62;"+ts.p.colNames[i];</p>
<p>&#8230; // 3000:</p>
<p>$("[id^=jqgh_<strong>"+$.jgrid.jqID(ts.p.id)+"</strong>]",thecol).empty().html(nData).append(ico);</p>
</p>
<p>Additionally I suggest to remove from the lines 2031 and 2032 the <strong>sort="desc"</strong> and <strong>sort="asc"</strong>&#160;from the definition of the &#60;span&#62; 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.</p>
<p>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</p>
<p>var hTable = $("&#60;table class=&#39;ui-jqgrid-htable&#39; style=&#39;width:"+ts.p.tblwidth+"px&#39; role=&#39;grid&#39; aria-labelledby=&#39;gbox_"+this.id+"&#39; cellspacing=&#39;0&#39; cellpadding=&#39;0&#39; border=&#39;0&#39;&#62;<strong>&#60;tbody&#62;&#60;tr&#62;&#60;td&#62;&#60;/td&#62;&#60;/tr&#62;&#60;tbody&#62;</strong>&#60;/table&#62;").append(thead),</p>
<p>The problem is that &#60;table&#62; element should has non-empty &#60;tbody&#62;. The <strong>&#60;tbody&#62;&#60;tr&#62;&#60;td&#62;&#60;/td&#62;&#60;/tr&#62;&#60;tbody&#62;</strong>&#160;construct makes the table w3 complined (see <a href="http://stackoverflow.com/questions/4317615/why-does-this-html-table-definition-not-validate" target="_blank">here</a> for details).</p>
<p>Best regards<br />Oleg</p>
]]></description>
        	        	<pubDate>Mon, 21 Mar 2011 13:20:27 +0200</pubDate>
        </item>
</channel>
</rss>