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...

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

1 个答案: