前提・実現したいこと
RailsでAjax実装している部分テンプレートが、最初の1つめだけAjaxとして機能していません。
2つめ以降は、入力フォームから入力し送信を押すごとに、Ajaxとして機能し遷移なしに表示されます。
1つめは、ページをリロードすると表示されるものの、Ajaxとして表示されていません。
edit.html.erbの画面に入力フォームとその下にAjax表示部分のスペースがあり、入力して「追加」を押すごとに、そのスペースに部分テンプレートが追加されていくイメージです。
Ruby 2.4.5
Rails 4.2.8
mySQL(開発環境)
postgreSQL(本番環境)
Heroku
該当のソースコード
ユーザーがフォームから入力するフォームと、Ajaxの表示部分
users/edit.html.erb
ruby
1<div class="content content-item"> 2 <ol> 3 <!-- アイテムAjaxで送信 --> 4 <%= form_tag('/items', method: :post, remote: true) do %> 5 <input type="text" name="text" pattern=".*\S+.*" required placeholder="23文字以内で" size="23" maxlength="23" autocomplete="off" class="header-btn"> 6 <%= submit_tag "追加" ,:class => "header-btn margin-top10px" %> 7 <% end %> 8 </ol> 9</div> 10 11<div class="content content-item"> 12 <ol> 13 <% if @items.present? %> 14 <div id="item-content"> 15 <% @items.each do |item| %> 16 <%= render partial: "item", locals: { item: item } %> 17 <% end %> 18 </div> 19 <% end %> 20 </ol> 21</div>
item_controllerの該当部
Ruby
1 def create 2 @item = Item.new(text: item_params[:text], user_id: current_user.id, check: 0) 3 4 #Ajax仕様 5 respond_to do |format| 6 if @item.save 7 format.html { redirect_to @item, notice: '作成完了'} 8 format.json { render :show, status: :created, location: @item } 9 10 format.js 11 else 12 format.html { render :new } 13 format.json { render json: @item.errors, status: :unprocessable_entity } 14 end 15 end 16 end
_item.html.erb 部分テンプレートです。
ruby
1<li class="idea"> 2 <div class="idea-text"> 3 <div class="checked-item_<%= "#{item.id}"%>" > 4 <%= item.text %> 5 </div> 6 </div> 7 <div class="item-menu-right"> 8 <%= link_to item_path(item), method: :delete , remote: true do %> 9 <i class="fa fa-trash fa-fw" aria-hidden="true"></i> 10 <% end %> 11 <%= link_to edit_item_path(item), method: :get ,class: "fa-edit-margin", item_id: item.id do %> 12 <i class="fa fa-edit fa-fw" aria-hidden="true" ></i> 13 <% end %> 14 15 <%= check_box_tag '', '', item.check, {'data-id' => item.id, 'data-user-id' => item.user_id ,class: "check_#{item.id} option-input"} %> 16 17 </div> 18</li> 19
試したこと
部分テンプレートの書き方、<%= render partial: "item", locals: { item: item } %>の部分によって、挙動が変わるのでしょうか。
補足情報(FW/ツールのバージョンなど)
##追記
コントローラーの処理後,create.js.erbに処理が渡っているためこちらを追記しておきます。
create.js.erb
erb
1$("<%= escape_javascript(render partial: '/users/item', locals: { item: @item }) %>").appendTo("#item-content"); 2 3//submitの後に、フォームの中身を空にする 4$('form').find("textarea, :text, select").val("").end().find(":checked").prop("checked", false);
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/04/20 00:42
2019/04/20 01:02 編集
2019/04/21 05:21
2019/04/26 11:00