Jquery Rails 3... form submits twice... deletes twice... help

Question

It seems like eveyone has this problem but no one has a laymans terms answer or even a proper solutions.

I have a form that uses ajax to submit the form and automatically adds it to the list below the text field. The form submits twice so i have two identical (apart form the ID) records. Worse still is when you try to delete it wont renew the page because its tried to delete the same record twice.

I hope someone has a great answer out there... btw im new to rails. code:

index.html.erb

<h1>SSCC</h1>
<div id="orderline_form">
    <%= render 'form' %>
</div>

<ul id="orderlines">
    <%= render :partial => @orderlines.reverse %>
</ul>

_form.html.erb

<%= form_for(@orderline, :remote => true) do |f| %>
<div class="field">
    <%= f.label :Order_ID %>
    <%= f.text_field :order_id %><br/>
    <%= f.label :SSCC %>
    <%= f.text_field :sscc %>
</div>
<div class="actions">
    <%= f.submit %>
</div>
<% end %>

_order_line.html.erb

<%= content_tag_for(:li, order_line) do %>

<%= order_line.id %> |
<%= order_line.order_id %> |
<%= order_line.sscc %>
(<%= link_to 'Delete', order_line, :confirm => 'Are you sure?',
:method => :delete, :remote => true %>)

<% end %>

create.js.erb

$('#orderlines').prepend('<%= escape_javascript(render(@orderline))%>');
$('#orderlines > li:first ').effect('highlight', {}, 3000);
$('#orderline_form > form')[0].reset();

destroy.js.erb

$('#<%= dom_id(@orderline) %>').css('background', 'red');
$('#<%= dom_id(@orderline) %>').hide("fade", {}, 1500);

my appliaction .js is :jQuery.ajaxSetup({ 'beforeSend': function(xhr) {xhr.setRequestHeader("Accept", "text/javascript")} }) jQuery.fn.submitWithAjax = function() { this.submit(function() { $.post(this.action, $(this).serialize(), null, "script"); return false; }); return this; }; $(document).ready(function() { $("#update_order").submitWithAjax(); }) $("form").submit(function(){ $('input[type=submit]').attr('disabled', 'disabled'); }); — SD1990, Jul 19 '11 at 13:22
the other files i have our the standard jquery, jquery.min, jquery_ujs,jquery-ui, and rails.js — SD1990, Jul 19 '11 at 13:23

score 15 · Accepted Answer · answered Mar 09 '12 at 01:24

15

It happened to me that "application.js" was stored twice (.../public/assets/application.js and .../app/assets/javascripts/application.js). The Rails 3.2.1 Asset pipeline compiled it and created another one. Check for that and delete the unneeded.

Keep in mind that you might already have other repeated assets, you just started noticing this one because jQuery made it evident.

This link helped me:

http://www.ruby.code-experiments.com/blog/2011/10/another-gotcha-with-the-rails-31-asset-pipeline-or-why-are-my-jquery-ujs-ajax-requests-triggered-twi.html

answered Mar 09 '12 at 01:24

Hugo Campos

166
1
3

2

Just a heads up, I had this issue and deleting the files did not work, it only worked after I ran `assets:precompile` again and then followed that up with a `assets:clean`. I recommend `assets:clean` over deleting the files manually. +1 for pointing out the root of the problem though. – Brandon Buck Aug 18 '12 at 19:00
3

I've tried precompiling and cleaning the assets and I've checked if application.js appears twice. It doesn't. Then I restart the server, run the code, and it still submits twice. Why could that be? BTW, it doesn't submit twice on production. Only on development. – mjnissim Aug 25 '12 at 18:41

score 1 · Answer 2 · answered Oct 08 '18 at 06:25

1

On Rails 5, rails-ujs replaces jquery_ujs. Events will trigger twice if both are required

```

// app/assets/javascripts/application.js

//= require jquery_ujs <-- delete this

//= require rails-ujs

```

answered Oct 08 '18 at 06:25

fodcool

11
1

score 0 · Answer 3 · answered Nov 08 '13 at 15:02

0

I had the same problem on Rails 4. I had these settings in my development.rb:

config.assets.digest = true
config.assets.enabled = true

I deleted these and ran rake assets:clean

Now its submits like it should.

answered Nov 08 '13 at 15:02

daniel

3,105
4
39
48

score 0 · Answer 4 · answered Jul 19 '11 at 12:53

0

make sure that you have submit buttons disabled after the click on them. it helps to localize the problem.

  $("form").submit(function(){
    $('input[type=submit]').attr('disabled', 'disabled');
  });

answered Jul 19 '11 at 12:53

Anatoly

15,298
5
53
77

silly question but where shall i put this code... ive currently got it in my application.js file... and it doesnt work – SD1990 Jul 19 '11 at 13:37
put in inside $('document').ready(function(){ ... here ... }) – Dumitru Ceban Jul 19 '11 at 13:42
so the problem into the server side logic. can you copy-past your controller code please? – Anatoly Jul 19 '11 at 14:25
{ class OrderLinesController < ApplicationController def index @orderlines = OrderLine.all orderline = OrderLine.new respond_to do |format| format.html format.js end end} – SD1990 Jul 19 '11 at 14:39
def create @orderline = OrderLine.create!(params[:order_line]) respond_to do |format| if orderline.save format.html { redirect_to(orderlines_path, :notice => 'Order Line was Successfully created')} format.js end end endef destroy orderline = OrderLine.find(params[:id]) orderline.destroy respond_to do |format| format.html { redirect_to orderlines_path } format.js end end end all of the order line have an at-sign btw... just stack overflow wont let me put more than one in the comment box – SD1990 Jul 19 '11 at 14:41
**orderline.create** and **orderline.save** is the bug. use **build** in the first case – Anatoly Jul 19 '11 at 14:45
**@orderline = OrderLine.build(params[:order_line])** you don't need to fire save 2 times by using **create** and **save** one by one – Anatoly Jul 19 '11 at 15:08

Jquery Rails 3... form submits twice... deletes twice... help

4 Answers4

Linked