Ajax 发布/获取（表单/链接）在 jQuery UI 选项卡中多次提交答案

【问题标题】：Ajax post/gets (forms/links) submits multiple times in jQuery UI tabsAjax 发布/获取（表单/链接）在 jQuery UI 选项卡中多次提交
【发布时间】：2011-03-23 10:02:01
【问题描述】：

我在 Rails 应用程序中实现了 jQuery UI 选项卡，但出现错误：当我提交 ajax 表单或链接时，它会被多次提交。如 Doom 控制台输出所示：

删除http://localhost:3000/innmeldings/101 404（未找到）
删除 http://localhost:3000/innmeldings/101 404（未找到）

我在选项卡之间切换的次数越多，ajax 的次数就越多链接提交。我用谷歌搜索了它，但没有找到任何东西，这使得我相信这不是 JQuery UI 选项卡中的常见错误。知道我做错了什么吗？

我使用 Rails 3.05。我尝试了不同版本的 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(); 
});

【问题讨论】：

标签： ruby-on-rails ajax jquery-ui

【解决方案1】：

您应该检查您是否多次绑定事件（例如点击）。当您通过 AJAX 加载选项卡内容时多次加载相同的 JavaScript 文件而不缓存内容（即使用默认选项 cache: false）时，会发生这种情况。

【讨论】：

谢谢！设置缓存：true 修复它！
仅部分解决：当我在选项卡中加载了带有 ajax 的页面时，点击功能在我进入两个选项卡后提交时间。最终，看起来每个选项卡都缓存了 javascript 文件，但是当我在另一个选项卡中点击 ajax 调用时再次加载。有没有办法阻止 javascript 文件再次加载？其他解决方案？
你为什么不检查标签内容是否实际上被重新加载，例如使用 Firebug 或 Safari 的开发者工具？
我有一个类似的问题，我解决了，而不是包括application.js（默认情况下包括app/assets/javascripts/树中的所有其他javascript文件），我单独指定了我需要的js文件。我发现包括application.js 多次包含jQuery 库（如检查页面加载请求并查看从服务器检索到哪些资源所示）。因为 jQuery 被多次加载，所以我所有的remote => true 表单都会多次绑定 jQuery 事件。我可能做错了什么，但这为我解决了问题。

【解决方案2】：

找到解决方案（感谢威廉让我走上正轨）。默认情况下，Rails 通过 ajax 调用加载 js 文件。解决方案：对其他需要的控制器隐藏 application.html.erb 中的 js 文件。

简单地在我的控制器中：

  def index
    @vis_js = 1
  end

和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 %>

【讨论】：