Question

当我通过ajax表单提交帖子时，我有以下问题，第一次提交将正确进行，但当我尝试提交另一篇文章（没有刷新页面）时，它将再次提交上一篇文章，然后提交我的新帖子。由于这个原因，我收到了一个具有相同信息的重复帖子。我注意到的是我收到了正确的服务器请求。但是当我在console.log中从表单中获得一次点击提交的数量时，我得到两个提交。

index.html.haml：

.row
  .col-md-7.col-md-pull-5
    .panel.panel-default
      .panel-heading.text-center
        Recent Posts
      .panel-body
        = render 'post_form'
      %ul.list-group.all_posts
        = render 'posts'

_post_form.html.haml：

= simple_form_for(Post.new, action: 'create', remote: true,
                  html: { class: 'form-horizontal'},
                  wrapper: :horizontal_form,
                  wrapper_mappings: { check_boxes: :horizontal_radio_and_checkboxes, radio_buttons: :horizontal_radio_and_checkboxes, file: :horizontal_file_input, boolean: :horizontal_boolean }) do |f|
  .form-inputs
    .post-form-body-pic.inner-inline
      = image_tag(avatar_url(current_employee), class: "avatar50")
    .post-form-content.inner-inline
      = f.input :content, input_html: {rows: "3"}, label: false, :placeholder => "Share something with everyone..."
  = f.button :submit, value: "Post", class: "btn btn-danger pull-right new"

application.js：

#
#= require jquery
#= require jquery_ujs
#= require moment
#= require fullcalendar
#= require bootstrap-sprockets
#= require turbolinks
#= require paloma
#= require staticpages
#= require dashboards
#= require calendar
#= require trade_center
#= require profile_account


ready = ->
    $("#trade-center").click ->
        $("#trade").slideToggle("500", ->)




$(document).ready(ready)
$(document).on('page:load', ready)

post_controller.rb：

class PostsController < ApplicationController
  respond_to  :js

  def create
    @post = profile.posts.create!(posts_params)
  end

  private

  def posts_params
    params.require(:post).permit(:profile_id, :content)
  end

  def post
    @post = profile.posts.find(params[:id])
  end

end

create.js：

$("form#new_post").bind("ajax:complete", function(){
    $("textarea#post_content").val("");
    html = "<%= j render '/dashboards/post', :locals => {:post => @post} %>"    
    $("ul.all_posts").prepend(html).slideDown("slow");
    delete html
});

/dashboards/_post.html.haml：

%li.list-group-item
  .post-profile
    = image_tag "http://static.nfl.com/static/content/public/static/img/fantasy/transparent/200x200/WOO661523.png?01AD=3n6mqKw_qL00dpnfbGHt_psO6gNStPFmrhrEnOUuVho8CHdcw_9g8Ow&01RI=0D206B0E41C6CD5&01NA=", class: "avatar50 inner-inline"
    .post-name.inner-inline
      = "#{@post.profile.fname} #{@post.profile.lname}"
      %p
        %span 
          = "Posted on #{@post.created_at.to_date.to_s(:long)}"
    %span.dropdown.pull-right
      %span.dropdown-toggle{"data-toggle" => "dropdown", :type => "button"}
        %span.glyphicon.glyphicon-chevron-down{:class => "[ ]"}
      %ul.dropdown-menu{:role => "menu"}
        %li{:role => "presentation"}
          %a{:href => "#", :role => "menuitem", :tabindex => "-1"} Edit
        %li{:role => "presentation"}
          %a{:href => "#", :role => "menuitem", :tabindex => "-1"} Another action
        %li{:role => "presentation"}
          %a{:href => "#", :role => "menuitem", :tabindex => "-1"} Something else here
        %li.divider{:role => "presentation"}
        %li.btn-xs.btn-danger{:role => "presentation"}
          = link_to "Delete this post", @post, :method => :delete, :data => {:confirm => "Are you sure?"},:remote => true, :class => 'delete_post'
  %p.post-context<>
    = "#{@post.content}."

Answer 1

如果//= require jquery_ujs中有application.js，并且 表单代码中包含<%= javascript_include_tag "/assets/jquery_ujs.js" %>（您称之为部分的表单） 然后删除它。这可能是表单 提交两次 的原因。

Answer 2

也许您可以尝试清空@post变量，如下所示：

def create
 @post = nil
 @post = profile.posts.create!(posts_params)
end

Answer 3

显然，问题不在于两次表达的形式，而是我的绑定ajax：成功调用被调用两次。我不确定它是否是一种正确的方法，但由于rails将处理验证，我只是决定删除我在表单上的绑定并只执行我想要的JavaScript。它完美地工作......现在。

哦，我还想提一下，我已经尝试在ajax上查看这些线程：成功被调用两次，没有任何效果：Why is Rails UJS ajax:success bind being called twice?，"ajax:success" being called twice

以下是create.js的修改：

$("textarea#post_content").val("");
    html = "<%= j render '/dashboards/post', :locals => {:post => @post} %>"    
    $("ul.all_posts").prepend(html).slideDown("slow");
    delete html

Rails Ajax表单在首次提交后提交两次

3 个答案: