小编典典

Rails通过ajax提交表单并更新视图

ajax

我想通过ajax更新表单提交而无需重新加载页面并根据它更新视图。我尝试了不同的方法,但作为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 %>

创建动作

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

最后我认为我想改变

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

花了很多时间用AJAX进行更新,但每次都失败。有什么需要帮助的吗?提前致谢。


阅读 228

收藏
2020-07-26

共1个答案

小编典典

您的代码不错,但是对于 ajax来说

  1. 您需要添加remote=true到表单中。

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

  1. 此外,在服务器端, 您需要在其中创建一个js.erb 文件, views/users/show_updated_view.js.erb以将其作为js调用 而非 NOT html调用来回复浏览器,因此需要向用户显示表单提交后发生了某些事情(成功/错误)(如果其users_controller),

因此,在您的操作中,您需要执行以下操作:

        respond_to do |format|  
            format.js { render 'users/show_updated_view'}
        end
  1. 在中show_updated_view.js.erb,您应该通过隐藏整个表单/重置表单或将表单替换为新的div(表示数据已更新)来更新视图,以使用户知道该视图已更新或表单已成功提交。任何直观的方法虽然有很多方法:)。

//这里我用div替换了整个表格

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

视图的名称可以是任何名称,但是您需要兼顾成功和失败。

2020-07-26