<div dir="ltr"><br><div class="gmail_extra"><br><div class="gmail_quote">On Mon, Nov 24, 2014 at 11:01 AM, Mariano Martinez Peck <span dir="ltr"><<a href="mailto:marianopeck@gmail.com" target="_blank">marianopeck@gmail.com</a>></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 dir="ltr">Hi guys,<div><br></div><div>I am trying to use JQueryUI sortable for making the rows of a table sortable. I could make it to work at the client side but I don't now how to be able to get the values at the server side in order to update my internal OrderedCollection.<br clear="all"><div><br></div><div>I found #callbackSortable: but it seems I am doing something wrong... This is what I am doing:</div><div><br></div><div><div><span style="white-space:pre-wrap"> </span>html script: ((html jQuery: 'tbody') sortable</div><div><span style="white-space:pre-wrap"> </span>onUpdate: (html jQuery ajax<span style="white-space:pre-wrap"> </span></div><div><span style="white-space:pre-wrap"> </span> <span style="white-space:pre-wrap"> </span>callbackSortable: [ :event |</div><div><span style="white-space:pre-wrap"> </span></div><div><span style="white-space:pre-wrap"> </span> event inspect. </div><div><span style="white-space:pre-wrap"> </span>]))</div></div><div><br></div><div><br></div><div>But the event inspected has nothing.. Everything from "passanger" is nil. I guess I may be missing passing passengers..but I don't know what nor where.</div><div><br></div></div></div></blockquote><div><br></div><div>I have also found I could do something like this:</div><div><br></div><div><pre class="" style="margin-top:0px;margin-bottom:10px;padding:5px;border:0px;font-size:14px;vertical-align:baseline;font-family:Consolas,Menlo,Monaco,'Lucida Console','Liberation Mono','DejaVu Sans Mono','Bitstream Vera Sans Mono','Courier New',monospace,serif;overflow:auto;width:auto;max-height:600px;word-wrap:normal;color:rgb(0,0,0);line-height:17.8048000335693px;background:rgb(238,238,238)"><code style="margin:0px;padding:0px;border:0px;vertical-align:baseline;font-family:Consolas,Menlo,Monaco,'Lucida Console','Liberation Mono','DejaVu Sans Mono','Bitstream Vera Sans Mono','Courier New',monospace,serif;white-space:inherit;background-image:initial;background-repeat:initial"><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent">(</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;color:rgb(128,0,0);background:transparent">'#sortable'</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent">).</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent">sortable</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent">({</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent">
start</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent">:</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent"> </span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;color:rgb(0,0,139);background:transparent">function</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent">(</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent">e</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent">,</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent"> ui</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent">)</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent"> </span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent">{</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent">
</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;color:rgb(128,128,128);background:transparent">// creates a temporary attribute on the element with the old index</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent">
$</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent">(</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;color:rgb(0,0,139);background:transparent">this</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent">).</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent">attr</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent">(</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;color:rgb(128,0,0);background:transparent">'data-previndex'</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent">,</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent"> ui</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent">.</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent">item</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent">.</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent">index</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent">());</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent">
</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent">},</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent">
update</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent">:</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent"> </span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;color:rgb(0,0,139);background:transparent">function</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent">(</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent">e</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent">,</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent"> ui</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent">)</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent"> </span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent">{</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent">
</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;color:rgb(128,128,128);background:transparent">// gets the new and old index then removes the temporary attribute</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent">
</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;color:rgb(0,0,139);background:transparent">var</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent"> newIndex </span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent">=</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent"> ui</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent">.</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent">item</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent">.</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent">index</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent">();</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent">
</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;color:rgb(0,0,139);background:transparent">var</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent"> oldIndex </span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent">=</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent"> $</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent">(</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;color:rgb(0,0,139);background:transparent">this</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent">).</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent">attr</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent">(</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;color:rgb(128,0,0);background:transparent">'data-previndex'</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent">);</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent">
$</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent">(</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;color:rgb(0,0,139);background:transparent">this</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent">).</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent">removeAttr</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent">(</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;color:rgb(128,0,0);background:transparent">'data-previndex'</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent">);</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent">
</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent">}</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent">
</span><span class="" style="margin:0px;padding:0px;border:0px;vertical-align:baseline;background:transparent">});</span></code></pre></div><div><br></div><div>but still..I don't how to build a callback or something so that to receive that new and old index at the server side. </div><div><br></div><div>Any help is appreciated. </div><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 dir="ltr"><div><div></div><div>Any idea?</div><div><br></div><div>Thanks, </div><span class=""><font color="#888888"><div><br></div><div><br></div>-- <br><div>Mariano<br><a href="http://marianopeck.wordpress.com" target="_blank">http://marianopeck.wordpress.com</a><br></div>
</font></span></div></div>
</blockquote></div><br><br clear="all"><div><br></div>-- <br><div class="gmail_signature">Mariano<br><a href="http://marianopeck.wordpress.com" target="_blank">http://marianopeck.wordpress.com</a><br></div>
</div></div>