質問編集履歴

1 追記

Romay

Romay score 32

2019/04/20 09:44  投稿

【Rails】Ajaxの部分テンプレートが1つめだけ更新されない
### 前提・実現したいこと
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
<div class="content content-item">
<ol>
   <!-- アイテムAjaxで送信 --> 
<%= form_tag('/items', method: :post, remote: true) do %>
   <input type="text" name="text" pattern=".*\S+.*" required placeholder="23文字以内で" size="23" maxlength="23" autocomplete="off" class="header-btn">
    <%= submit_tag "追加" ,:class => "header-btn margin-top10px" %>
   <% end %>
 </ol>
</div>
<div class="content content-item">
  <ol>
  <% if @items.present? %>
    <div id="item-content">
       <% @items.each do |item| %>
       <%= render partial: "item", locals: { item: item } %>
      <% end %>
  </div>
 <% end %>
 </ol>
</div>
```
item_controllerの該当部
```Ruby
   def create
     @item = Item.new(text: item_params[:text], user_id: current_user.id, check: 0)
     #Ajax仕様
     respond_to do |format|
       if @item.save
         format.html { redirect_to @item, notice: '作成完了'}
         format.json { render :show, status: :created, location: @item }
         format.js
       else
         format.html { render :new }
         format.json { render json: @item.errors, status: :unprocessable_entity }
       end
     end
   end
```
_item.html.erb 部分テンプレートです。
```ruby
<li class="idea">
 <div class="idea-text">
 <div class="checked-item_<%= "#{item.id}"%>" >
        <%= item.text %>
 </div>
 </div>
 <div class="item-menu-right">
   <%= link_to item_path(item), method: :delete , remote: true do %>
      <i class="fa fa-trash fa-fw" aria-hidden="true"></i>
   <% end %>
   <%= link_to edit_item_path(item), method: :get ,class: "fa-edit-margin", item_id: item.id do %>
     <i class="fa fa-edit fa-fw" aria-hidden="true" ></i>
   <% end %>
   <%= check_box_tag '', '', item.check, {'data-id' => item.id, 'data-user-id' => item.user_id ,class: "check_#{item.id} option-input"} %>
 </div>
</li>
```
### 試したこと
部分テンプレートの書き方、<%= render partial: "item", locals: { item: item } %>の部分によって、挙動が変わるのでしょうか。
### 補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
##追記
コントローラーの処理後,create.js.erbに処理が渡っているためこちらを追記しておきます。
create.js.erb
```erb
$("<%= escape_javascript(render partial: '/users/item', locals: { item: @item }) %>").appendTo("#item-content");
//submitの後に、フォームの中身を空にする
$('form').find("textarea, :text, select").val("").end().find(":checked").prop("checked", false);
```
  • Ruby

    17776 questions

    Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

  • Ruby on Rails

    19503 questions

    Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

  • Ajax

    2224 questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る