前提・実現したいこと
Railsで編集画面をモーダルで実装し、更新後は非同期で変更内容を表示させたい。
下記のqiitaを参考にしています。
Rails4×Bootstrap3でNew/Edit画面をモーダルダイアログ化する
発生している問題・エラーメッセージ
モーダルフォームで編集し、saveボタンを押すとデータベースはきちんと更新され、
モーダルも閉じるが、ビューは更新されていない。
該当のソースコード
board.rb has_many :lists list.rb belongs_to :board
lists_controller.rb class ListsController < ApplicationController before_action :set_board before_action :set_list, only: [:edit, :update, :destroy] def new end def create @list = List.create(list_params) respond_to do |format| format.html { redirect_to board_path(@board.id) } format.json end end def edit end def update @list.update(list_params) @lists = List.all end def destroy @list.destroy redirect_to board_path(@board.id) end private def set_board @board = Board.find(params[:board_id]) end def list_params params.require(:list).permit(:name).merge(board_id: params[:board_id]) end def set_list @list = List.find(params[:id]) end end
boards/show.html.haml .board__body{ style: "background-image: url(#{@board.background.image})"} .lists - if @board.lists.present? .list__items = render @board.lists #list-form.modal.fade{"aria-hidden" => "true", :role => "dialog", :tabindex => "-1"}
lists/_list.html.haml .list .list__name = list.name .list__icon = link_to edit_board_list_path(@board.id, list.id), remote: true do = icon 'fas', 'edit', class: "icon"
lists/_list-form.html.haml .modal-dialog{:role => "document"} .modal-content .modal-header %h5#exampleModalLongTitle.modal-title %button.close{"aria-label" => "Close", "data-dismiss" => "modal", :type => "button"} %span{"aria-hidden" => "true"} × .modal-body = form_for [@board, @list], remote: true do |f| .form-group = f.label :name, class: 'form-controll-label' %br/ = f.text_field :name, class: 'form-controll' .modal-footer %button.btn.btn-secondary{"data-dismiss" => "modal", :type => "button"} Close = f.submit "Save", class: "btn btn-primary"
lists/edit.js.erb $("#list-form").html("<%= escape_javascript(render 'list-form') %>") $("#list-form").modal("show")
lists/update.js.erb $(".list-items").html("<%= escape_javascript(render @lists ) %>") $("#list-form").modal("hide")
試したこと
下記のようなコードにしてもデータベースが更新されるだけで、ビューは変わりませんでした。
lists/update.js.erb $(".list-items").html("<%= escape_javascript(render @board.lists ) %>") $("#list-form").modal("hide")
lists_controller.rb def update @list.update(list_params) @board.lists = @board.lists.all end
補足情報(FW/ツールのバージョンなど)
ruby 2.6.3
Rails 5.2.3
あなたの回答
tips
プレビュー