Very close to solution, can't figure out this bug with jQuery .submit()

rubyonrails-talk
#1

First, a picture of what I'm doing: http://i.imgur.com/MO2o8.png

A user should be able to select as many of these checkboxes and click on
the "Vote Yes" or "Vote No" links (styled as buttons) to change their
vote to yes or no (vote.approval = true or vote.approval = false).

I got it working so that I can select one box at a time and it will
submit correctly and update the vote's approval field. However, when I
select more than one, it fails to work.

Here's the code:

The View (https://gist.github.com/950886):

<% form_for(vote, :remote => true) do |f| %>
  <%= check_box :selection, vote.id, {}, vote.id %>
<%= hidden_field_tag("approval_"+vote.id.to_s, "temp") %>

...

<%= link_to 'Vote Yes', ballots_path, :id => "vote_yes_top" %>
<%= link_to 'Vote No', ballots_path, :id => "vote_no_top" %>

The jQuery code (https://gist.github.com/950887):

$("#vote_yes_top, #vote_yes_bottom").click(function() {
  $.each($('input[type=checkbox]:checked'), function(key, value) {
    var approval_string = "approval_"+value.value
    $(value.form.children(approval_string)).val(true)
    $('#'+$(value.form).submit())
  });
});

$("#vote_no_top, #vote_no_bottom").click(function() {
  $.each($('input[type=checkbox]:checked'), function(key, value) {
    var approval_string = "approval_"+value.value
    $(value.form.children(approval_string)).val(false)
    $('#'+$(value.form).submit())
  });
});

The controller (https://gist.github.com/950889):

def update
  @vote = Vote.find(params[:id])
  @vote.approval = params["approval_#{@vote.id}".to_sym]
  ...
  (standard update code)

So, like I said, I get into the update method quite nicely when I just
select one box at a time but when I select more than one it just updates
the first box's object then drops out of the .each() loop.

Anyone know why this would happen?

#2

First, a picture of what I'm doing:http://i.imgur.com/MO2o8.png

A user should be able to select as many of these checkboxes and click on
the "Vote Yes" or "Vote No" links (styled as buttons) to change their
vote to yes or no (vote.approval = true or vote.approval = false).

I got it working so that I can select one box at a time and it will
submit correctly and update the vote's approval field. However, when I
select more than one, it fails to work.

Here's the code:

The View (https://gist.github.com/950886):

<% form_for(vote, :remote => true) do |f| %>
<%= check_box :selection, vote.id, {}, vote.id %>
<%= hidden_field_tag("approval_"+vote.id.to_s, "temp") %>

...

<%= link_to 'Vote Yes', ballots_path, :id => "vote_yes_top" %>
<%= link_to 'Vote No', ballots_path, :id => "vote_no_top" %>

The jQuery code (https://gist.github.com/950887):

$("#vote_yes_top, #vote_yes_bottom").click(function() {
$.each($('input[type=checkbox]:checked'), function(key, value) {
var approval_string = "approval_"+value.value
$(value.form.children(approval_string)).val(true)
$('#'+$(value.form).submit())
});

Have you checked the browser's JavaScript console for any errors? That
last line looks suspicious to me. I would have thought $
(value.form).submit() would suffice.
Also I think this general approach might be built on slightly shaky
approach - Since the whole form is being submitted each time, the last
request (for example) is probably going to be sending all the
information from the previous iterations (and of course there's no
guarantee they'll get processed in exactly the same order they were
sent in - a true vote on the 5th item could get overwritten when the
form is submitted for the 4th time). Personally I'd build up a single
hash of all the data I wanted to submit and use $.post to send it.

Fred

#3

Frederick Cheung wrote in post #996132:

Have you checked the browser's JavaScript console for any errors? That
last line looks suspicious to me. I would have thought $
(value.form).submit() would suffice.
Also I think this general approach might be built on slightly shaky
approach - Since the whole form is being submitted each time, the last
request (for example) is probably going to be sending all the
information from the previous iterations (and of course there's no
guarantee they'll get processed in exactly the same order they were
sent in - a true vote on the 5th item could get overwritten when the
form is submitted for the 4th time). Personally I'd build up a single
hash of all the data I wanted to submit and use $.post to send it.

Fred

Thanks, changing the last line to $(value.form).submit() worked! I
notice a slight problem, however, which is that sometimes the newly
updated approval field is not immediately shown after the controller
serves up the ballots_path. Sometimes I need to refresh in order for me
to see the newly-updated fields. Is this a problem with RoR (a delay?)
or my sloppy implementation?

Also, I understand that submitting the entire form is a poor solution to
the problem but this is literally the first time I've ever submitted a
remote form with JavaScript before so it was first thing I came up with.
Would my code easily translate to this $.post() solution? I imagine that
if I used .post() I wouldn't have to rely on hidden form data which
would be nice.

Thanks again!

#4

Frederick Cheung wrote in post #996132:

Also, I understand that submitting the entire form is a poor solution to
the problem but this is literally the first time I've ever submitted a
remote form with JavaScript before so it was first thing I came up with.
Would my code easily translate to this $.post() solution? I imagine that
if I used .post() I wouldn't have to rely on hidden form data which
would be nice.

it should do - instead of fiddling a hidden form element you'd set the
appropriate value in the javascript hash of parameters you'd be
building up

Fred