Rails通過ajax提交表單並更新視圖

Question

我想通過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更新它，但每次都失敗了。 有沒有幫助？ 提前致謝。

Answer 1

你的代碼很好，但對於ajax ，

1. 你需要在表單中添加remote=true 。

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

2. 此外，在您的服務器端， 您需要在views/users/show_updated_view.js.erb 創建一個js.erb文件，以回復瀏覽器作為其js調用和非HTML調用，因此需要向用戶顯示發生的事情（表單提交后的成功/錯誤（如果是users_controller ），

所以在你的行動中，你需要這樣的東西： -

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

3. 在show_updated_view.js.erb ，您應該通過隱藏整個表單/重置表單或用新div替換表單來更新您的視圖以便用戶知道視圖已更新或表單已成功提交更新..或任何直觀的東西。雖然有很多方法:)。

   //這里我用div發消息替換你的整個表格

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

視圖的名稱可以是任何東西，但您需要處理成功和失敗。

Answer 2

這是一篇關於使用Rails進行AJAX的簡短文章 。 有幾點需要注意：

1. 在form_for添加remote: true 。
2. 在控制器中包含format.js ，以便它將呈現create.js.erb 。

3. 在create.js.erb中 ，執行以下操作（未測試）：

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

Answer 3

使用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"

Answer 4

嘗試在控制器操作“create”和相應的create.js.erb中添加respond_to塊 ，並在創建操作后放入要執行的js，並發布您在瀏覽器控制台或rails上發現的任何錯誤服務器控制台，我們可以幫助您找到出錯的地方