<?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: wrong options are used in editGridRow in case of default recreateForm:false</title>
	<link>http://www.trirand.com/blog/?page_id=393/bugs/wrong-options-are-used-in-editgridrow-in-case-of-default-recreateformfalse</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/wrong-options-are-used-in-editgridrow-in-case-of-default-recreateformfalse/rss" rel="self" type="application/rss+xml" />
        <item>
        	<title>tony on wrong options are used in editGridRow in case of default recreateForm:false</title>
        	<link>http://www.trirand.com/blog/?page_id=393/bugs/wrong-options-are-used-in-editgridrow-in-case-of-default-recreateformfalse#p29923</link>
        	<category>Bugs</category>
        	<guid isPermaLink="true">http://www.trirand.com/blog/?page_id=393/bugs/wrong-options-are-used-in-editgridrow-in-case-of-default-recreateformfalse#p29923</guid>
        	        	<description><![CDATA[<p>Hello Oleg,</p>
</p>
<p>See this <a href="https://github.com/tonytomov/jqGrid/commit/78a8819739d5775eec9fff2ff9b7c589532362fb" target="_blank">commit</a></p>
</p>
<p>Thanks. I hope this is the better solution. Should make the same change in viewGridRow</p>
</p>
<p>Best Regards,</p>
<p>Tony</p>
]]></description>
        	        	<pubDate>Wed, 04 Dec 2013 16:56:53 +0200</pubDate>
        </item>
        <item>
        	<title>tony on wrong options are used in editGridRow in case of default recreateForm:false</title>
        	<link>http://www.trirand.com/blog/?page_id=393/bugs/wrong-options-are-used-in-editgridrow-in-case-of-default-recreateformfalse#p29907</link>
        	<category>Bugs</category>
        	<guid isPermaLink="true">http://www.trirand.com/blog/?page_id=393/bugs/wrong-options-are-used-in-editgridrow-in-case-of-default-recreateformfalse#p29907</guid>
        	        	<description><![CDATA[<p>Hello Oleg,</p>
</p>
<p>Many Thanks for this. This week I will work hard on jqGrid and will make a decision.</p>
<p>Thank&#39;s again for your work on jqGrid.</p>
</p>
<p>Best Regards</p>
<p>Tony</p>
]]></description>
        	        	<pubDate>Mon, 02 Dec 2013 14:51:52 +0200</pubDate>
        </item>
        <item>
        	<title>OlegK on wrong options are used in editGridRow in case of default recreateForm:false</title>
        	<link>http://www.trirand.com/blog/?page_id=393/bugs/wrong-options-are-used-in-editgridrow-in-case-of-default-recreateformfalse#p29906</link>
        	<category>Bugs</category>
        	<guid isPermaLink="true">http://www.trirand.com/blog/?page_id=393/bugs/wrong-options-are-used-in-editgridrow-in-case-of-default-recreateformfalse#p29906</guid>
        	        	<description><![CDATA[<p>Hi Tony,</p>
<p>I found some bugs in form editing and analased the problem exactly. The problem is common and there are many ways to fix it. I&#39;m not sure which way you prefer so I desided first to write the bug report before posting one of the fix.</p>
<p>At the beginning I found that <strong>onclickSubmit</strong> will be called sometimes with wrong value of <strong>frmoper</strong> parameter. Then I found that the problem that place if the default <strong>recreateForm:false</strong> are used, the user first opens Add dialog and then opens Edit dialog. In the case <strong>frmoper</strong>&#160;parameter will be always "add". If the user first opens Edit dialog then <strong>onclickSubmit</strong>&#160;will have <strong>frmoper</strong>&#160;parameter always as "edit". Later analyse shows that <strong>beforeCheckValues</strong>, <strong>beforeSubmit&#160;</strong>and many other callbacks <em>will be <span style="text-decoration: underline;">allways</span> called with <span style="text-decoration: underline;">all options</span> of the first opened dialog</em> (either Add or Edit).</p>
<p>Now I found the reason of the problem very quickly. <strong>editGridRow</strong> method create the form only once. After that it uses bind("click") and keydown&#160;(see&#160;<a href="https://github.com/tonytomov/jqGrid/blob/v4.5.4/js/grid.formedit.js#L1044" target="_blank">the line</a>,&#160;<a href="https://github.com/tonytomov/jqGrid/blob/v4.5.4/js/grid.formedit.js#L1096" target="_blank">the line</a>,&#160;<a href="https://github.com/tonytomov/jqGrid/blob/v4.5.4/js/grid.formedit.js#L1136" target="_blank">the line</a>, <a href="https://github.com/tonytomov/jqGrid/blob/v4.5.4/js/grid.formedit.js#L1158" target="_blank">the line</a>,&#160;<a href="https://github.com/tonytomov/jqGrid/blob/v4.5.4/js/grid.formedit.js#L1163" target="_blank">the line</a> and so on) to register event handlers. At the moment the new <a href="http://es5.github.io/#x10.4" target="_blank">execution context</a> with the corresponding outer variables will be created. So everytime when click-event handler will be executed <em>it sees the options (one from outer variables) of the first opened dialog</em> (Add or Edit).</p>
<p>The click event handles calls <strong>postIt</strong>, <strong>checkUpdates</strong>, <strong>fillData</strong>, <strong>getFormData</strong>. <strong>postIt</strong> function for example uses <strong>$t</strong>, <strong>IDs</strong>, <strong>frmgr</strong>, <strong>frmoper</strong>, <strong>frmtb</strong>, <strong>gID</strong>, <strong>p</strong>, <strong>postdata</strong> outer variables. <a href="http://www.jslint.com/" target="_blank">LSLint</a> displays the list of all outer varaibles used in all functions (all outer variables of all closures). It can be used to find all references to outer variables. So the values of the variables could be wrong.</p>
<p>One can demonstares the problem on the following simple code</p>
<p><input type='button' class='sfcodeselect' name='sfselectit7011' value='Select Code' data-codeid='sfcode7011' /></p>
<div class='sfcode' id='sfcode7011'>function outerFunction0 (someText) {<br />&#160; &#160; var outerVar = { option: someText };</p>
<p>&#160; &#160; if ($(&#34;#testId&#34;).length &#60;= 0) {<br />&#160; &#160; &#160; &#160; // we bind only at the first call of outerFunction0<br />&#160; &#160; &#160; &#160; $(&#34;&#60;span id=&#39;testId&#39;&#62;&#60;/span&#62;&#34;).bind(&#34;someEvent&#34;, function () {<br />&#160; &#160; &#160; &#160; &#160; &#160; alert(outerVar.option);<br />&#160; &#160; &#160; &#160; }).appendTo(&#34;body&#34;);<br />&#160; &#160; }<br />&#160; &#160; $(&#34;#testId&#34;).text(someText);<br />}<br />outerFunction0(&#34;add&#34;);<br />$(&#34;#testId&#34;).trigger(&#34;someEvent&#34;); // displays alert(&#34;add&#34;)<br />outerFunction0(&#34;edit&#34;);<br />$(&#34;#testId&#34;).trigger(&#34;someEvent&#34;); // <strong>displays alert(&#34;add&#34;)</strong> <strong>too !!!&#160;</strong></p>
</div>
<p>There are many ways to fix the problem: </p>
<ul>
<li><span style="font-size: 14px;">uses allways only <strong>recreateForm:true</strong>. In other words remove some part of <strong>editGridRow</strong> code and remove previous form directly on the start of <strong>editGridRow</strong> or just destroy the form instead of making it hidden. Some advantage of the approach &#8211; one solve the problem with multiple grids on the same page which have the same names of columns.</span></li>
<li><span style="font-size: 14px;"><strong>unbind</strong> and re<strong>bind</strong> all event handler always. the form can still stay hidden on close.</span></li>
<li><span style="font-size: 14px;">save all options with respect of <strong>jQuery.data</strong> in DOM element of the form. The event handlers should don&#39;t use any outer variables dierctly. Instead of that one should use <strong>jQuery.data</strong> to get the options and then do the rest.</span></li>
</ul>
<p>The first code demonstrates the solution with unbinding/rebinding:</p>
<p><input type='button' class='sfcodeselect' name='sfselectit5660' value='Select Code' data-codeid='sfcode5660' /></p>
<div class='sfcode' id='sfcode5660'>function outerFunction1 (someText) {<br />&#160; &#160; var outerVar = { option: someText };</p>
<p>&#160; &#160; if ($(&#34;#testId1&#34;).length &#62; 0) {<br />&#160; &#160; &#160; &#160; <strong>$(&#34;#testId1&#34;).unbind(&#34;someEvent1&#34;);</strong><br />&#160; &#160; } else {<br />&#160; &#160; &#160; &#160; $(&#34;&#60;span id=&#39;testId1&#39;&#62;&#60;/span&#62;&#34;).appendTo(&#34;body&#34;);<br />&#160; &#160; }<br />&#160; &#160; $(&#34;#testId1&#34;).text(someText);<br />&#160; &#160; // bind every time. So the <strong>new execution context</strong> will be set<br />&#160; &#160; <strong>$(&#34;#testId1&#34;).bind(&#34;someEvent1&#34;, function () {</strong><br />&#160; &#160; &#160; &#160; <strong>alert(outerVar.option);</strong><br />&#160; &#160; <strong>});</strong><br />}<br />outerFunction1(&#34;add&#34;);<br />$(&#34;#testId1&#34;).trigger(&#34;someEvent1&#34;); // displays alert(&#34;add&#34;)<br />outerFunction1(&#34;edit&#34;);<br />$(&#34;#testId1&#34;).trigger(&#34;someEvent1&#34;); // displays alert(&#34;edit&#34;)&#160;</p>
</div>
<p>The next code fragment demonstrates the usage of <strong>jQuery.data</strong>:</p>
<p><input type='button' class='sfcodeselect' name='sfselectit4413' value='Select Code' data-codeid='sfcode4413' /></p>
<div class='sfcode' id='sfcode4413'>function outerFunction2 (someText) {<br />&#160; &#160; var outerVar = { option: someText };</p>
<p>&#160; &#160; if ($(&#34;#testId2&#34;).length &#60;= 0) {<br />&#160; &#160; &#160; &#160; $(&#34;&#60;span id=&#39;testId2&#39;&#62;&#60;/span&#62;&#34;).bind(&#34;someEvent2&#34;, function () {<br />&#160; &#160; &#160; &#160; &#160; &#160; <strong>var myVar = $(&#34;#testId2&#34;).data(&#34;myoptions&#34;);<br />&#160; &#160; &#160; &#160; &#160; &#160; alert(myVar.option);&#160;</strong><br />&#160; &#160; &#160; &#160; }).appendTo(&#34;body&#34;);<br />&#160; &#160; }<br />&#160; &#160; $(&#34;#testId2&#34;).text(someText);<br />&#160; &#160; <strong>// set the options as data of DOM element<br />&#160; &#160; $(&#34;#testId2&#34;).data(&#34;myoptions&#34;, outerVar);</strong><br />}<br />outerFunction2(&#34;add&#34;);<br />$(&#34;#testId2&#34;).trigger(&#34;someEvent2&#34;); // displays alert(&#34;add&#34;)<br />outerFunction2(&#34;edit&#34;);<br />$(&#34;#testId2&#34;).trigger(&#34;someEvent2&#34;); // displays alert(&#34;edit&#34;)&#160;</p>
</div>
<p><span style="font-size: 14px;"><a href="http://jsfiddle.net/OlegKi/2Uvn7/" target="_blank">The jsfidle demo</a>&#160;demonstrates the both &#160;code which I included.</span></p>
<p>You should decide Tony which way you choose and fix the code coresponds to the choice.</p>
<p>Best regards<br />Oleg</p>
]]></description>
        	        	<pubDate>Fri, 29 Nov 2013 23:23:34 +0200</pubDate>
        </item>
</channel>
</rss>