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

时间:2015-07-09 08:35:52

标签: javascript jquery ruby-on-rails ajax forms

我想通过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更新它,但每次都失败了。有没有帮助?提前谢谢。

4 个答案:

答案 0 :(得分:14)

您的代码很好,但对于 ajax

  1. 您需要在表单中添加private AbsListView mListView; ((ListView) mListView).setAdapter(mAdapter);

    remote=true

  2. 此外,在您的服务器端,您需要创建一个js.erb 文件 <%= form_for(@image,:html=>{:id=>"your_form_id",:multipart => true,:remote=>true}) do |f |%>以js的身份回复浏览器 call和NOT html调用因此需要向用户显示表单提交后发生的事情(成功/错误)(如果是views/users/show_updated_view.js.erb),

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

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

      //在这里,我将用带有消息的div替换整个表单

      show_updated_view.js.erb;

    2. 视图的名称可以是任何内容,但您需要注意成功和失败。

答案 1 :(得分:1)

这是short article on doing AJAX with Rails。有几点需要注意:

  1. remote: true
  2. 中添加form_for
  3. 在控制器中包含 format.js ,以便呈现 create.js.erb
  4. create.js.erb 中,执行以下操作(未经测试):

    $("p.instructions").innerHTML("<%= @notes_list %>")

答案 2 :(得分:0)

使用AJAX记住的事情是,您不会重定向请求(通常),您只需生成一些文本以发送回浏览器。 AJAX基本上只是javascript从浏览器中获取一些文本并使用它做一些事情。通常,你会想要替换页面的一部分,即用你得到的文本替换html标签及其内容,在这种情况下你希望文本是一些html。在rails中渲染一大块html的方法是渲染部分,所以你这样做,你经常也做一些javascript告诉浏览器如何处理文本,通常用一个具有特定id的元素替换文本。

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
    end
  end
  respond_to do |format|
    format.html { redirect_to root_url }
    format.js #default behaviour is to run app/views/notes/create.js.erb file
  end
end

这里的respond_to块允许你以不同的方式处理html和js(例如ajax)请求。

app / views / notes / create.js.erb可能有类似

的内容
page.replace "foo", :partial => "app/views/notes/bar"

答案 3 :(得分:0)

尝试在控制器操作“create”和相应的create.js.erb中添加respond_to block,并在创建操作后输入要执行的js,并发布您遇到的任何错误在您的浏览器控制台或rails服务器控制台上,我们可以帮助您找到出错的地方