Duplicate forms after click

rubyonrails-talk
1

I'm having a problem with a submit event What I'm trying to do is to update a record using radio inputs... and everything is ok, but when I do a fast double-click on the radio button, the form duplicates and I'm not sure if its a javascript problem or a rails problem cause its rendering the partial again (which shouldn't be happening)

Somebody had this problem before or know how to fix it?

Thanks

Javier

2

Look in the rails log to see what is happening (development.log assuming in development mode). Once you understand what is happening you will be better placed to fix it.

Colin

3

Yes, I’ve done that and every time I click on that radio… it makes an update and it saves the chosen option, if I make 2 fast clicks (or N clicks) it renders 2 (or N ) partials.

In my log after doing the update in database, it renders the partial and after that it calls the update.js that I use, is there a way to avoid this behavior? or it something related to the javascript?

Thanks

Javier

4

Hi, this sounds like a javascript problem. Javascript is executed asynchroniously on your browser so clicking fast means that you are sending more than one submit from the same form, causing Rails to return more than once from the controller. There are probably many ways to avoid this but one is to put in a delay of say half a second in your javascript submit code.

5

pretty sure that its not ruby on rails problem. its maybe because of your javascript or maybe try to read your codes again

6

Yes, that’s what I found. I send a lot of ajax request because the function that do the submit is this

function save_response_with_ajax(t){

$('#edit_response_set_' + t).submit();

}

I think that its way to simple and without any kind of validation and the radio button is this

<%= rs_a_form.input :answer_id, :collection => response_set.question.answers.map { |a| [build_choice(a) , a.id] }, :as => :radio, :input_html => {:onclick => ‘save_response_with_ajax(’ + response_set.id.to_s + ‘);’} %>

Should I change that submit() into a $.ajax() ?

Thanks

Javier

7

Hi, I’m not really that familiar with rails/javascript integration. You are using a radiobutton to submit a form, and using the onClick event, have you considered simply using an input button instead? My suggestion about using a delay probably wouldn’t work, what would you delay and where?

When you click rapidly on the radiobutton, the onClick events fires each time causing a fresh submit. Rails simply accepts these submits and sends the appropriate pages back. You could have a global variable in your javascript, e.g. “submitted=false” and then set this to true on first submit and check it before each submit. The variable would be set to true again each time the page refreshes, if you need to reset it when a partial is loaded then just include a bit of javascript in that partial that resets the variable.

8

Is there a way to control multiple ajax requests?, I’ve tried google but as far as I get there’s a stop() but it’s not what I need in my case.

I hope to find the solution and post it here then

Javier

9

I’m using the very old trick:

// Prevent double click

$('form').submit(function(){

  $('input[type=submit]', this).attr('disabled', 'disabled');

});
10

That would work if I had a submit button =)

The scenario is a … Exam Question, wich has 4 alternatives. After click on an alternative it automatically saves/updates(only happens if its already checked)

And now when I want to do this

function submit_with_ajax(t){

$(“#myForm”).submit(function(){

alert(“hi”);

});

}

nothing happens. I’m trying to change that alert with an $.ajax() method in order to do something after complete

Thanks

Javier

11

If you just want to save the state of that radio button, why are you returning anything to the browser at all?

And even if you wanted to refresh the page content from that partial, if it's rendering twice you have a targeting problem in your JS, like you're adding the form to the DOM instead of replacing the original, or something.

Regardless, the right thing should happen even with multiple clicks in a short time period (so trying to prevent that is pointless, IMO).

Can you come up with a *simple* test case that demonstrates this problem?

12

The scenario is a … Exam Question, wich has 4 alternatives. After click on

an alternative it automatically saves/updates(only happens if its already

checked)

If you just want to save the state of that radio button, why are you

returning anything to the browser at all?

I’m not just only saving the state in order to make the submit after I finish the entire exam.

When I click on letter B (for example) in my Answer table that question got “B”

I have to return this because they may change their answers ( and that might be my problem and I’m really considering hide that div)

And even if you wanted to refresh the page content from that partial,

if it’s rendering twice you have a targeting problem in your JS, like

you’re adding the form to the DOM instead of replacing the original,

or something.

Regardless, the right thing should happen even with multiple clicks

in a short time period (so trying to prevent that is pointless, IMO).

Can you come up with a simple test case that demonstrates this

problem?

–

I’m not sure what you mean by simple test :slight_smile: but lets say someone just click that radio 2 times quickly (not that he/she meant to do that)

and suddendly it appears another set of alternatives.

As you mention, try to prevent multiple requests may be not the problem (or maybe not here) and I just tried to do this

$(‘#edit_response_set_’+t).submit();

$(“#edit_response_set_”+t).slideUp(300).fadeIn(400);

It’s just hiding and showing the form… and I think is the easy solution I can get

Anyway, thanks for your responses… hope you understood what I tried to do :slight_smile:

Javier