javascript - Rails 通过 ajax 提交表单并更新 View

Question

我想在不重新加载页面的情况下更新通过 ajax 提交的表单并根据它更新 View 。我尝试了不同的方法，但都失败了，因为我是 Rails 的新手。

情况是这样的。

模态

def new
    @new_entry = current_user.notes.build
    @words = current_user.notes
    @notes_false_list = current_user.notes.where(known: false).order("title").group_by { |note| note.title[0] }
    @notes_true_list = current_user.notes.where(known: true).order("title").group_by { |note| note.title[0] }
  end

在查看表单代码。

<%= form_for @new_entry, :html => {:class => 'home-form without-entry clearfix'}  do |f| %>
      <%= f.text_field :title, placeholder: 'Squirrel', autofocus: true, class: 'title-field pull-left' %>
      <%= f.submit '', class: 'btn home-add without-entry' %>
  <% end %>

创建 Action

def create
    @new_note = current_user.notes.build(new_note_params)
    if @new_note.save
      @notes_list = current_user.notes.count
      unless @new_note.user.any_entry
        @new_note.user.toggle!(:any_entry) if @notes_list >= 50
        redirect_to root_url
      end
    else
      redirect_to root_url
    end
  end

最后在我想改变的 View 中

<p class="instructions count-instruction text-center">
      <%= @words.count %>
    </p>

花了很多时间用 AJAX 更新这个但每次都失败了。有什么可以帮忙的吗？提前致谢。

Answer 1

你的代码很好，但是对于ajax，

1. 你需要添加remote=true到你的表格。

   <%= form_for(@image,:html=>{:id=>"your_form_id",:multipart => true,:remote=>true}) do |f |%>

2. 此外，在您的服务器端，您需要创建一个 js.erb 文件 views/users/show_updated_view.js.erb以 js 形式回复浏览器调用而不是 html 调用，因此需要向用户显示表单提交后发生的事情(成功/错误)(如果它是 users_controller )，

所以在你的行动中，你需要这样的东西:-

        respond_to do |format|  
            format.js { render 'users/show_updated_view'}
        end  

1. 并在 show_updated_view.js.erb ，您应该为用户更新您的 View 知道 View 已经更新或者表单已经成功通过隐藏整个表单/重置表单或用新的 div 替换表单，表示数据已更新..或任何直观的内容。虽然有很多方法:)。

   //这里我用有消息的div替换你的整个表单

   $("#your_form_id").html("<div><p>You have submitted the form successfully.</p></div>") ;

View 的名称可以是任何名称，但您需要同时注意成功和失败。