CODEWITHSUNDEEP
ruby-on-railsajaxjquery-ui
Henrik Ormåsen
Henrik Ormåsen

Reputation: 880

Ajax post/gets (forms/links) submits multiple times in jQuery UI tabs

I've implemented jQuery UI tabs in an Rails app, and I get an error: When i submit a ajax form or link, it gets submitted multiple times. As seen in this Doom console output:

DELETE http://localhost:3000/innmeldings/101 404 (Not Found)
DELETE http://localhost:3000/innmeldings/101 404 (Not Found)

The more times i switch betweens the tabs, the more times the ajax link submits. I have googled it, but not found anything, which makes me believe this is not a common error in the JQuery UI tabs. Any idea what I do wrong?

I uses rails 3.05. I've tried different versions of jQuery og jQuery Ui: 

class InnmeldingsController < ApplicationController 
  respond_to :js, :html 

  def destroy 
    @innmelding = Innmelding.find(params[:id]) 
    @innmelding.destroy 
    @innmeldings = Innmelding.all 
    respond_with( @innmeldings, :layout => !request.xhr? ) 
  end 

  def list 
    @innmeldings = Innmelding.all 
    respond_to do |format| 
      format.html # index.html.erb 
      format.xml  { render :xml => @innmeldings } 
      format.js 
    end 
  end

list.html.erb: 

<td><%= link_to 'Destroy', innmelding, :remote => true, :id => "reload", :method => :delete %></td>

application.js:

$(document).ready(function(){ 
  $( "#nav" ).tabs(); 
});

Upvotes: 1

Views: 1725

Answers (2)

Henrik Orm&#229;sen
Henrik Orm&#229;sen

Reputation: 880

Found solution (thanks to William who got me on the track). By default Rails loads the js files by ajax calls. Solution: Hiding the js files in application.html.erb from other then needed controllers.

In my controller simply:

  def index
    @vis_js = 1
  end

and application.html.erb:

  <% if defined?(@vis_js)%>
    <%= javascript_include_tag 'event_calendar', :cache => true %>
    <%= javascript_include_tag "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js", "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js", "jquery.validate.js", "jquery.ui.datepicker-no", :cache => true %>
    <%= javascript_include_tag 'rails', :cache => true %>
    <%= javascript_include_tag 'application', :cache => true %>
  <% end %>

Upvotes: 2

William Niu
William Niu

Reputation: 15853

You should check you're not binding events (e.g. clicks) multiple times. This would occur when you load the same JavaScript files multiple times as you load the tab content via AJAX without caching the content (i.e. with the option cache: false, which is default).

Upvotes: 2

Related Questions