web-dev-qa-db-ja.com

Rails 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=でこれを更新するのに多くの時間を費やしましたが、毎回失敗しました。何か助けがありましたか？事前に感謝します。

javascriptjqueryruby-on-railsajaxforms
9
Praveen KJ

あなたのコードは良いですが、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  
_

  1. そして、_show_updated_view.js.erb_では、ビューを更新して、ビューが更新されたか、フォームが正常に送信されたことをユーザーに知らせる必要があります。更新されます..または直感的なものですが、多くの方法があります:)。

    //ここで、フォーム全体をメッセージを持つdivに置き換えます

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

ビューの名前は何でもかまいませんが、成功と失敗の両方に注意する必要があります。

15
Milind

これが AJAX Railsを使用した場合）の簡単な記事 です。注意すべき点がいくつかあります。

  1. _remote: true_に_form_for_を追加します。
  2. format.jsをコントローラーに含めて、レンダリングされるようにしますcreate.js.erb。

  3. create.js.erbで、次のようにします（テストされていません）。

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

2
Yen-Ju

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（eg ajax）リクエストを異なる方法で処理できます。

App/views/notes/create.js.erbは次のようになります

page.replace "foo", :partial => "app/views/notes/bar"
0
Max Williams

コントローラアクション「create」に respond_to block を追加し、それぞれのcreate.js.erbを追加して、作成アクションの後に実行するjsを挿入して、エラーがある場合は投稿してくださいブラウザコンソールまたはRailsサーバーコンソールにアクセスしてください。問題が発生している場所を見つけるのに役立つことがあります。

0
sghosh968