提交表單后使用Ajax在Rails中呈現內容

Question

我知道這個問題已經被問過幾次了，但是我一直在追尋麻煩。

我正在創建一個簡單的子手游戲，並且已經創建了鍵盤，因此共有26種形式，如下所示：

            <%= form_for @puzzle, :remote => true, :html => {:class => 'keyq'} do |f|%>
            <%= f.hidden_field :letters_guessed, value: "Q" %>
            <% end %>

我將字母存儲在數組類型的db字段中:letters_guessed

然后，我用它來循環查看用戶是否猜到了字母。

<div class="mystery">
            <% @puzzle.word.length.times do |digit| %>
                <% letter = @puzzle.word[digit] %>
                <% if @puzzle.word[digit] == " " %>
                <br>
                <% elsif @puzzle.letters_guessed.include?(letter.upcase)%>
                    <%= letter %>
                <% else %>
                    <%= "_" %>
                <% end %>
            <% end %>
</div>

因此，從本質上講，我需要使用新數組更新神秘div。 到目前為止，當我提交表單時，什么都沒有發生（我想是可以預期的）。

這是我的控制器動作

    def update
      @puzzle.letters_guessed = @puzzle.letters_guessed + [params[:puzzle][:letters_guessed]]
      @puzzle.save
      respond_to do |format|
        format.html
        format.js
    end

這里的想法是我創建一個新數組，並保存它。 現在來了我不確定該如何處理渲染的部分。

我已經在與其他視圖相同的目錄中創建了一個_puzzle.js文件...如何在不實際刷新頁面的情況下將新數組返回到我的視圖？

Answer 1

嘗試在app / views / YOUR_MODEL /中創建update.js.erb，然后簡單地放置alert（“ Goes here”）；

這將是一個很好的開始。

Answer 2

好的，正如您在問題中已經提到的那樣，您需要使用AJAX提交表單，然后在成功回調中，獲取_puzzle.js.erb文件的內容。 之后，您需要做的就是修改DOM。 這是使用jQuery最簡單的方法。 jQuery還具有不錯的AJAX功能，您可以使用它執行AJAX請求。 另請閱讀此內容，因為它顯示了提交表單的示例。

祝好運！