質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Ruby

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

Ruby on Rails

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

Ajax

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

解決済

【Rails】Ajaxの部分テンプレートが1つめだけ更新されない

Romay
Romay

総合スコア0

Ruby

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

Ruby on Rails

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

Ajax

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

1回答

0評価

0クリップ

3267閲覧

投稿2019/04/09 06:23

編集2022/01/12 10:58

前提・実現したいこと

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/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Ruby

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

Ruby on Rails

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

Ajax

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