<div dir="ltr">Hi,<div><br></div><div>I am back trying to make this example to work. What I cannot do is to add my &quot;selectedRow&quot; css class to the selected TR. I did this:</div><div><br></div><div><span class="" style="white-space:pre">        </span>html form: [</div>
<div><span class="" style="white-space:pre">                </span>html label:[<span class="" style="white-space:pre">        </span></div><div><span class="" style="white-space:pre">                        </span>html checkbox</div><div><span class="" style="white-space:pre">                                </span> onClick:  </div>
<div><span class="" style="white-space:pre">                        </span>                (html jQuery ajax</div><div><span class="" style="white-space:pre">                        </span>                          serializeThisWithHidden;</div><div><span class="" style="white-space:pre">                        </span>                          script: [ :s | s &lt;&lt; (&#39;$(&#39;&#39;#tr&#39;, anInteger asString, &#39;&#39;&#39;).addClass(&#39;&#39;selectedRow&#39;&#39;);&#39;)</div>
<div><span class="" style="white-space:pre">                                </span> ]);</div><div><span class="" style="white-space:pre">                                </span>value: (self isSelected: anObject);</div><div><span class="" style="white-space:pre">                                </span>callback: [ :value | self selectRow: anObject value: value ]]]</div>
<div><br></div><div><br></div><div>The callbacks does work, the server gets correct etc...in fact, if I then refresh the page, the row is correctly applied the &quot;selected&quot; row. The problem is that I cannot make the row selected with the #script:   When I debug, the #script:  is something like:   $(&#39;#tr4&#39;).addClass(&#39;selectedRow&#39;);</div>
<div><br></div><div>But nothing happens. If I go to a JavaScript console in the browser and I paste the very same line, it works! </div><div><br></div><div>Any ideas what I am doing wrong?</div><div><br></div><div>Thanks in advance, </div>
<div> </div></div><div class="gmail_extra"><br><br><div class="gmail_quote">On Tue, Dec 24, 2013 at 12:06 PM, Mariano Martinez Peck <span dir="ltr">&lt;<a href="mailto:marianopeck@gmail.com" target="_blank">marianopeck@gmail.com</a>&gt;</span> wrote:<br>
<blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div dir="ltr"><br><div class="gmail_extra"><br><br><div class="gmail_quote"><div class="">On Mon, Dec 23, 2013 at 12:27 PM, Johan Brichau <span dir="ltr">&lt;<a href="mailto:johan@inceptive.be" target="_blank">johan@inceptive.be</a>&gt;</span> wrote:<br>

<blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left-width:1px;border-left-color:rgb(204,204,204);border-left-style:solid;padding-left:1ex"><div><br>
On 23 Dec 2013, at 14:15, Mariano Martinez Peck &lt;<a href="mailto:marianopeck@gmail.com" target="_blank">marianopeck@gmail.com</a>&gt; wrote:<br>
<br>
&gt; Indeed, it seems I need this because even if I render only the table, the scroll goes up again to the top of the table....<br>
<br>
</div>Do you replace the table or only its inner html?</blockquote><div><br></div></div><div>I was replacing a div which is a container of the table. </div><div class=""><div> </div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left-width:1px;border-left-color:rgb(204,204,204);border-left-style:solid;padding-left:1ex">

 In general, to keep the scroll position of an element, you must replace its contents (and not the element itself).<br>
Perhaps in case of a table, you may only re-render the &lt;tbody&gt;, and then also only replacing its inner html.<br>
<div><br></div></blockquote><div><br></div></div><div>Ok, I will try that.  </div><div class=""><div><br></div><div> </div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left-width:1px;border-left-color:rgb(204,204,204);border-left-style:solid;padding-left:1ex">

<div>
&gt; So..which other solution you found besides explicit id per row? Of course in the server it is easy to know which row to render, the problem is how to know it in client side.<br>
&gt; I am would be glad you listen your approaches here.<br>
<br>
</div>You want to replace the row where the user clicked in, right?<br></blockquote><div><br></div></div><div>Yes. I just need to re-render it so that since it is selected now, it has a different css. </div><div class="">
<div> </div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left-width:1px;border-left-color:rgb(204,204,204);border-left-style:solid;padding-left:1ex">

The $(this) will refer to the checkbox element you clicked, but not anymore in the response script. So, you need to capture it in a lexical scope.<br>
<br></blockquote><div><br></div></div><div>ahaaaa, good point!</div><div class=""><div> </div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left-width:1px;border-left-color:rgb(204,204,204);border-left-style:solid;padding-left:1ex">


This is what I would try:<br>
<br>
 onClick:  (((JSStream on: &#39;var myself = this&#39;),<br>
                (html jQuery ajax<br>
                          serializeThisWithHidden;<br>
                          script: [ :s | s &lt;&lt; (((s jQuery expression:(JSStream on: &#39;myself&#39;)) closest: &#39;tr&#39;) html: self report) ])) asFunction apply: #());<br>
<br>
The idea is to generate this:<br>
<br>
onclick = &quot;(function(){ var myself = this; &lt;&lt;ajax call&gt;&gt; })()&quot;<br>
<br>
The above might or might not work because I did not try it. But something along those lines should work...<br>
<span><font color="#888888"><br></font></span></blockquote><div><br></div></div><div>mmmm this is what get&#39;s generated:</div><div><br></div><div>function(){var myself = this;jQuery.ajax({&quot;url&quot;:&quot;/MyApp&quot;,&quot;data&quot;:[&quot;_s=w9GmvDOQpAp_pp0c&quot;,&quot;_k=-3MfxH3kyGWxn6Vi&quot;,&quot;96&quot;,jQuery(this).next(&quot;input:hidden&quot;).andSelf().serialize()].join(&quot;&amp;&quot;),&quot;dataType&quot;:&quot;script&quot;})}()<br>

</div><div><br></div><div>I don&#39;t see &#39;myself&#39; used it later....</div><div><br></div><div>BTW, in your example you do: &quot;html: self report&quot;. but...since in this case I am re-rendering the row only (and not the whole table/report), I should only re-render the row right?   so I should do something like instead:</div>

<div><br></div><div>self renderRowOfObject: anObject with: html   ? </div><div><br></div><div>and there write the row</div><div><br></div><div>Thanks for you help Johan. </div><div class=""><div><br></div><div><br></div>
<blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left-width:1px;border-left-color:rgb(204,204,204);border-left-style:solid;padding-left:1ex">
<span><font color="#888888">
Johan_______________________________________________<br>
</font></span><div><div>seaside mailing list<br>
<a href="mailto:seaside@lists.squeakfoundation.org" target="_blank">seaside@lists.squeakfoundation.org</a><br>
<a href="http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside" target="_blank">http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside</a><br>
</div></div></blockquote></div></div><span class="HOEnZb"><font color="#888888"><br><br clear="all"><div><br></div>-- <br>Mariano<br><a href="http://marianopeck.wordpress.com" target="_blank">http://marianopeck.wordpress.com</a><br>

</font></span></div></div>
</blockquote></div><br><br clear="all"><div><br></div>-- <br>Mariano<br><a href="http://marianopeck.wordpress.com" target="_blank">http://marianopeck.wordpress.com</a><br>
</div>