Rails spinoffs - Mar 2006 - How to use the sortable_element tagname option?

I''m having some difficulty adding drag-and-drop sorting to my
application.  I''m hoping that someone can help me figure out what
I''m
doing wrong:

#view
<table>
...
<tbody id="item-list-body">
   <tr id="view-item-<%= item.id %>"....</tr>
</tbody>
...
<%= sortable_element(''item-list-body'',
                     :tagname => ''tr'',
                     :url => { :controller => ''Item'',
:action => ''reorder'' }) %>

I see that the JavaScript debugger is complaining that "tr is not
defined" because the above code gets translated to:

<script type="text/javascript">
//<![CDATA[
Sortable.create(''item-list-body'', {onUpdate:function(){new
Ajax.Request(''/Item/reorder'', {asynchronous:true,
evalScripts:true,
parameters:Sortable.serialize(''item-list-body'')})},
tagname:tr})
//]]>
</script>

How can I get the tagname:tr to be tagname:''tr'' (I assume this
is the problem).

Thanks,
Sean

On 3/3/06, Sean Mountcastle
<smountcastle-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
> I''m having some difficulty adding drag-and-drop sorting to my
> application.  I''m hoping that someone can help me figure out what
I''m
> doing wrong:
>
> #view
> <table>
> ...
> <tbody id="item-list-body">
>    <tr id="view-item-<%= item.id %>"....</tr>
> </tbody>
> ...
> <%= sortable_element(''item-list-body'',
>                      :tagname => ''tr'',
>                      :url => { :controller =>
''Item'', :action => ''reorder'' }) %>
>
> I see that the JavaScript debugger is complaining that "tr is not
> defined" because the above code gets translated to:
>
> <script type="text/javascript">
> //<![CDATA[
> Sortable.create(''item-list-body'',
{onUpdate:function(){new
> Ajax.Request(''/Item/reorder'', {asynchronous:true,
evalScripts:true,
> parameters:Sortable.serialize(''item-list-body'')})},
tagname:tr})
> //]]>
> </script>
>
> How can I get the tagname:tr to be tagname:''tr'' (I assume
this is the problem).
>
Could you try to replace :tagname by :tag ?

> Could you try to replace :tagname by :tag ?
Thanks Nicolas, that seems to have fixed the tr vs ''tr'' issue.
The
version of dragdrop.js I have (from Rails 1.0) has the following
comment which threw me off:
      tag:         ''li'',       // assumes li children,
override with
tag: ''tagname''

It seems to work fine under Firefox now.  Not sure what''s up with
Safari, but I guess it''s my problem.

Thanks again,
Sean

On 3/3/06, Sean Mountcastle
<smountcastle-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
> I''m having some difficulty adding drag-and-drop sorting to my
> application.  I''m hoping that someone can help me figure out what
I''m
> doing wrong:
>
> #view
> <table>
> ...
> <tbody id="item-list-body">
>    <tr id="view-item-<%= item.id %>"....</tr>
> </tbody>
> ...
> <%= sortable_element(''item-list-body'',
>                      :tagname => ''tr'',
>                      :url => { :controller =>
''Item'', :action => ''reorder'' }) %>
>
> I see that the JavaScript debugger is complaining that "tr is not
> defined" because the above code gets translated to:
>
> <script type="text/javascript">
> //<![CDATA[
> Sortable.create(''item-list-body'',
{onUpdate:function(){new
> Ajax.Request(''/Item/reorder'', {asynchronous:true,
evalScripts:true,
> parameters:Sortable.serialize(''item-list-body'')})},
tagname:tr})
> //]]>
> </script>
>
> How can I get the tagname:tr to be tagname:''tr'' (I assume
this is the problem).
>
> Thanks,
> Sean
>

On 3/3/06, Sean Mountcastle
<smountcastle-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
> > Could you try to replace :tagname by :tag ?
>
> Thanks Nicolas, that seems to have fixed the tr vs ''tr''
issue.  The
> version of dragdrop.js I have (from Rails 1.0) has the following
> comment which threw me off:
>       tag:         ''li'',       // assumes li children,
override with
> tag: ''tagname''
>
> It seems to work fine under Firefox now.  Not sure what''s up with
> Safari, but I guess it''s my problem.
>
I don''t know much about ruby on rails, but I''ve found this :
http://dev.rubyonrails.org/browser/trunk/actionpack/lib/action_view/helpers/scriptaculous_helper.rb#L74
No use of :tagname but use of :tag :
---8<------
83 	        [:tag, :overlap, :constraint, :handle].each do |option|
84 	          options[option] =
"''#{options[option]}''" if options[option]
85 	        end
---8<------

Yours,
Nicolas

Ok, while I''m able to drag-and-drop the table rows in the browser, my
callback (onUpdate) function is not being called (nor is the
onComplete function), so the new order isn''t being saved in the DB. 
Any ideas why this would be happening?

Here''s the Rails code:

<%= sortable_element ''item-list-body'',
                     :tag => ''tr'',
                     :complete => visual_effect(:highlight,
''item-list-body''),
                     :url => { :action => ''reorder'' }
%>

and this is the generated JavaScript:

<script type="text/javascript">
//<![CDATA[
Sortable.create(''item-list-body'', {onUpdate:function(){new
Ajax.Request(''/item/reorder'', {asynchronous:true,
evalScripts:true,
onComplete:function(request){new
Effect.Highlight(''item-list-body'',{});},
parameters:Sortable.serialize(''item-list-body'')})},
tag:''tr''})
//]]>
</script>

In the controller, I have a reorder method which just does a puts for
now (so I can watch WEBrick''s stdout for the call).

Thanks again for the assistance,
Sean

On 3/3/06, Sean Mountcastle
<smountcastle-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
> > Could you try to replace :tagname by :tag ?
>
> Thanks Nicolas, that seems to have fixed the tr vs ''tr''
issue.  The
> version of dragdrop.js I have (from Rails 1.0) has the following
> comment which threw me off:
>       tag:         ''li'',       // assumes li children,
override with
> tag: ''tagname''
>
> It seems to work fine under Firefox now.  Not sure what''s up with
> Safari, but I guess it''s my problem.
>
> Thanks again,
> Sean
>
> On 3/3/06, Sean Mountcastle
<smountcastle-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
> > I''m having some difficulty adding drag-and-drop sorting to my
> > application.  I''m hoping that someone can help me figure out
what I''m
> > doing wrong:
> >
> > #view
> > <table>
> > ...
> > <tbody id="item-list-body">
> >    <tr id="view-item-<%= item.id %>"....</tr>
> > </tbody>
> > ...
> > <%= sortable_element(''item-list-body'',
> >                      :tagname => ''tr'',
> >                      :url => { :controller =>
''Item'', :action => ''reorder'' }) %>
> >
> > I see that the JavaScript debugger is complaining that "tr is not
> > defined" because the above code gets translated to:
> >
> > <script type="text/javascript">
> > //<![CDATA[
> > Sortable.create(''item-list-body'',
{onUpdate:function(){new
> > Ajax.Request(''/Item/reorder'', {asynchronous:true,
evalScripts:true,
> > parameters:Sortable.serialize(''item-list-body'')})},
tagname:tr})
> > //]]>
> > </script>
> >
> > How can I get the tagname:tr to be tagname:''tr'' (I
assume this is the problem).
> >
> > Thanks,
> > Sean
> >
>

See

http://wiki.script.aculo.us/scriptaculous/show/FAQ

Question 4.3.

Am 03.03.2006 um 21:41 schrieb Sean Mountcastle:
> Ok, while I''m able to drag-and-drop the table rows in the browser,
my
> callback (onUpdate) function is not being called (nor is the
> onComplete function), so the new order isn''t being saved in the
DB.
> Any ideas why this would be happening?

Thomas,
> See
>
> http://wiki.script.aculo.us/scriptaculous/show/FAQ
>
> Question 4.3.
Thank you very much, that resolved the issue and now the controller
method is being called back.  This works great under Firefox, but not
under Safari -- is this a known issue?  The demos on script.aculo.us
seem to work fine with Safari, so I''m confused as to what''s
going
wrong.

Thanks again,
Sean
> Am 03.03.2006 um 21:41 schrieb Sean Mountcastle:
>
> > Ok, while I''m able to drag-and-drop the table rows in the
browser, my
> > callback (onUpdate) function is not being called (nor is the
> > onComplete function), so the new order isn''t being saved in
the DB.
> > Any ideas why this would be happening?

Please note that sorting table rows isn''t officially supported  
(because of browser issues).

-Thomas

Am 06.03.2006 um 14:53 schrieb Sean Mountcastle:
> Thomas,
>
>> See
>>
>> http://wiki.script.aculo.us/scriptaculous/show/FAQ
>>
>> Question 4.3.
>
> Thank you very much, that resolved the issue and now the controller
> method is being called back.  This works great under Firefox, but not
> under Safari -- is this a known issue?  The demos on script.aculo.us
> seem to work fine with Safari, so I''m confused as to
what''s going
> wrong.
>
> Thanks again,
> Sean
>
>> Am 03.03.2006 um 21:41 schrieb Sean Mountcastle:
>>
>>> Ok, while I''m able to drag-and-drop the table rows in the
>>> browser, my
>>> callback (onUpdate) function is not being called (nor is the
>>> onComplete function), so the new order isn''t being saved
in the DB.
>>> Any ideas why this would be happening?
> _______________________________________________
> Rails-spinoffs mailing list
> Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs

> Please note that sorting table rows isn''t officially supported
> (because of browser issues).
Thanks Thomas. I''ll see if we can switch to lists instead of tables.

Regards,
Sean