Rails 4 ajax表单提交两次文本和JS

Question

这可能很简单，但我已经非常努力地尝试并改变了一些事情，但表单总是提交两次，当我在它提交的索引目录中时，第二个进程js在控制台中给我一个回滚，一切都正常，但当我换到另一个页面(索引类别(时，JS的第二个过程会经过，在它以文本形式提交第一个页面后，我得到的表单字段不能为空(有效(

我的js

 $('#myform').submit(function(e) {
   e.preventDefault();
   $('#statusbutton').attr('disabled', 'disabled');
   if ($(this).find('textarea').val() == "") {
     $('#validate').show('blind').delay(5000).hide('blind');
     $(this).find('textarea').focus();
     $('#statusbutton').removeAttr('disabled');
     return;
   }
   var valuesToSubmit = $(this).serialize();
   $(this).find('textarea').addClass('uneditable-input').attr('disabled', 'disabled');
   $.ajax({
     url: $(this).attr('action'), //sumbits it to the given url of the form
     data: valuesToSubmit,
     type: "POST",
     dataType: "text",
     beforeSend: function() {
       $('#statusbutton').html('<i class="fa fa-spinner fa-spin"></i>');
       $('#jellylogo').html('<div style="color: #3399ff; margin-left: 5px; margin-top: -1px;"> <i class="fa fa-refresh fa-spin fa-lg"></i></div>');
     },
     success: function(response, data, xhr, event) {
       $('#indexstream').prepend(response).slideDown("slow");
     },
     complete: function(data) {
       $("#userlink").hide().slideDown("slow").effect('highlight', {
         color: 'rgb(255, 251, 204);'
       }, 3000);
       $('#jellylogo').html('<div id="square"></div>');
       $('#statusbutton').removeAttr('disabled');
       $('#statusbutton').html('<i class="fa fa-check"></i>');
       $("#disabletext").removeClass('uneditable-input').removeAttr('disabled', 'disabled').val('');
     }
   });
 });

• 控制器：

   def create
  @post = Post.new(post_params) 
  @post.email = current_user.username
  @post.user_id = current_user.id
  @post.firstname = current_user.firstname
  @post.lastname = current_user.lastname
  @post.avatar = current_user.avatar
  @post.school = current_user.school
   respond_to do |format|
  if @post.save  
    format.js {render @post, status: :created}
    format.html { redirect_to posts_path, :notice => '<i class="fa fa-check fa-5x"></i>'.html_safe }
    format.json {render json: @post, status: :created }
  puts @post
    #puts "----------#{@posts.count}-------------"
    # format.js {"$('#indexstream').replaceWith('<%= escape_javascript(render @post) %>');".html_safe}
    puts "-------------#{request.format}----------------"
  else
    format.html { render action: 'new' }
    format.json { render json: @post.errors, status: :unprocessable_entity }
    #format.js {alert("couldn't create post")}
  end
  end 
  end
  

• 视图中的表单：

  <div class="field">
   <h2>
    status post(blub!):
   </h2><%= f.text_area :title, :class => "fruute-input", :id => "disabletext", :size => 29, :autofocus => true, :style => "height: 60px; line-height: 1; width: 230px; " %>
  </div>
  <div id="validate" style="color: red; font-style: italic">
  field can't be blank
  </div><%= f.file_field :asset1, :accept => %w(image/png image/jpeg image/bmp image/gif image/x-xbitmap image/bmp) %>
  <div class="actions">
  <%= button_tag(type: 'submit', class: "new-button", id: "statusbutton" )   do %><i class="fa fa-check"></i> <% end %>
   </div><% end %>
  $(function()
         { $("abbr.timeago").timeago();
    }); } }); });
  

Answer 1

这解决了它：

$('#myform').submit(function(e) {
   e.preventDefault();
  evt.stopImmediatePropagation();  // <-- this solved it
  ...code...