Rails spinoffs - Apr 2008 - Changing the order of form elements before submitting with standard POST

Hi everyone, using scriptaculous I''m trying to allow the order of a
set of checkboxes to be modified before the contents of the form is
submitted. The sortable works great, you can drag and drop checkboxes
to your hearts content, but when you submit the form (not using ajax),
the order of the elements is as it was when the page was originally
loaded. Is there a way to get the browser to submit the elements in
the new order?

Here''s some sample code:

<form action="/admin/construction/construction_zone/nuggets/2"
class="databaseinput" method="post">
  <fieldset>
  <p>
    <label>Mookie Nuggets</label>
  <span class="chunk" id="Mookie">
  <div class="nowrap draggable" id="Mookie_7">
    <input checked="checked" class="view"
id="Mookie_7"
name="Mookie[7]" type="checkbox" value="Mookie"
/>
    <span class="handle">Want some
more?</span></div>
  <div class="nowrap draggable" id="Mookie_5">
    <input checked="checked" class="view"
id="Mookie_5"
name="Mookie[5]" type="checkbox" value="Mookie"
/>
    <span class="handle">My
Testimonials</span></div>
  <div class="nowrap draggable" id="Mookie_6">
    <input class="view" id="Mookie_6"
name="Mookie[6]" type="checkbox"
value="Mookie" />
    <span class="handle">Fakie Wakie</span></div>
  </span>
  </p>
  <p>
    <label>Wookie Nuggets</label>
  <span class="chunk" id="Wookie">
  <div class="nowrap draggable" id="Wookie_6">
    <input checked="checked" class="view"
id="Wookie_6"
name="Wookie[6]" type="checkbox" value="Wookie"
/>
    <span class="handle">Fakie Wakie</span></div>
  <div class="nowrap draggable" id="Wookie_5">
    <input checked="checked" class="view"
id="Wookie_5"
name="Wookie[5]" type="checkbox" value="Wookie"
/>
    <span class="handle">My
Testimonials</span></div>
  <div class="nowrap draggable" id="Wookie_7">
    <input class="view" id="Wookie_7"
name="Wookie[7]" type="checkbox"
value="Wookie" />
    <span class="handle">Want some
more?</span></div>
  </span>
  </p>
  <p class="buttons">
    <input name="commit" type="submit"
value="Save" />
    <a
href="/admin/construction/construction_zone/list">Cancel</a>
</
p>
  </fieldset>
</form>
<script type="text/javascript">
//<![CDATA[
Sortable.create("Mookie", {handle:''handle'',
onUpdate:function(){new
Ajax.Request(''#'', {asynchronous:true, evalScripts:true,
parameters:Sortable.serialize("Mookie")})},
only:''draggable'',
tag:''div''})
//]]>

</script>
<script type="text/javascript">
//<![CDATA[
Sortable.create("Wookie", {handle:''handle'',
onUpdate:function(){new
Ajax.Request(''#'', {asynchronous:true, evalScripts:true,
parameters:Sortable.serialize("Wookie")})},
only:''draggable'',
tag:''div''})
//]]>
</script>

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Hey Brendon,

I''m not sure about how you can prevent this, but two bits of advice:

(a) your sample code features duplicate id= attributes.  That''s just
not
good: it''s likely to come back and bite your ankle should you need to 
access one of these elements by id=, for instance.

(b) It''s not generally a good idea to rely on serialization order. 
Although the HTML 4.01 spec mandates that fields are indeed serialized 
in document order, I see no provision for accomodating later, 
scripting-based ordering change (which does seem like the logical thing 
to do, I''ll grant).

Finally, in your example, I think the data are submitted in document 
order: you''re just relying on the indices in your names, which of
course
you don''t update.  No matter how ordered the fields are:

   mookie[1]=blah&mookie[0]=foo
   mookie[0]=foo&mookie[1]=blah

will both de-serialize server-side to mookie == [''foo'',
''blah'']

If you don''t want that, you''d need to remove explicit indices
(leaving
only "mookie[]" as a shared field name) and assume you always go from 
zero upwards…

''HTH

-- 
Christophe Porteneuve aka TDD
tdd-x+CfDp/qHev2eFz/2MeuCQ@public.gmane.org

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Thanks Christophe :)

My bad on the duplicate ID''s. I only just added them at the end trying
to figure out why the ajax submit didn''t work :) Though I
don''t
actually need it in this case :)

As far as the B suggestion goes, I''m having trouble understanding you.

On the rails side, this is how I''m updating the order of things (since
the absense of a checkbox also translates to the absense of a row on
the join table):

      @component_instance.component_instance_nuggets.clear
        if params[nugget_group]
          params[nugget_group].each_with_index do |ci, position|
 
@component_instance.component_instance_nuggets.create({:nugget_code =>
nugget_group, :nugget_id => ci[0], :position => position})
          end
        end

The numbers in the mookie[4] type names are the id of the other end of
the join in the has_many :through table. Thus using the submit order
of the input elements was working quite well to set the order (or
removal) of the elements in the database.

I guess one other option is to encode the order of each element in the
value attribute. So that when a sortable is reordered, some javascript
runs and adds an elements position in the list to its value field.
Then when the form is submitted I could read the value of each.

Does this sound like a good solution?

Cheers,

Brendon
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Just a followup: I solved it.

Basically you''re right, changing mookie[4] to mookie[] and so forth
meant that we ended up with mookie[7,6,4] etc. which we could then use
to determine the order :)

Thanks heaps for your help!

Just fyi, i made the value of each checkbox the id of the
relationship. Worked like a dream! Now that i think of it, it all
makes a lot of sense really :)

Cheers,

Brendon
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---