ajax化した投稿のrender先のindexページが元に戻りません。

Question

ブログ投稿前

ブログ投稿後

現状説明

createボタンから画像・タイトル・ブログを投稿し終えたところなのですが、画面が薄暗いままでリロード以外何も押すことができません。リロードをすると元に戻ります。投稿したブログはリロードをしなくてもしっかりとターミナルとページで投稿されたことが確認できる状況です。ターミナルでエラーが出たり検証ツールを使っても何一つエラーが出ていないので説明することが難しいですが、解決策があればご教授ください。

気になる点

1.searchボタンが投稿後バグっているので、ここのコントローラー、indexやcreate.jsがうまく噛み合っていない可能性

2.@blogsと@blogs2の分け方に問題がある可能性

blogs.controller.rb

class Public::BlogsController < ApplicationController
    before_action :authenticate_user!, except: [:index]

	def index
		@blogs = Blog.search(params[:search])
		@blogs2 = Blog.order(created_at: :desc).limit(8)
		@blog = Blog.new
	end

	def create
		@blog = Blog.create(blog_params)
	    @blogs2 = Blog.order(created_at: :desc).limit(8)
	    @blog.user_id = current_user.id
	    @blog.save!
	end

	中略・・・・

	private

	def blog_params
	    params.require(:blog).permit(:title, :body, :blog_image_id, genre_ids: [])
	end
end

index.html.erb

<div class="container mt-5">
  <%= form_tag("/public/blogs",method:"get",class: "form-inline my-2 my-lg-0") do %>
    <input class="form-control mr-sm-2" type="text" name="search" placeholder="search for title">
    <input type="submit" value="search" class="btn btn-outline-light">
  <% end %>
</div>


<div class="container mt-3">
  <div class="row">
    <div class="col-3">
      <button type="button" class="btn btn-outline-light" data-toggle="modal" data-target="#exampleModal" data-turbolinks = "false">
        Create
      </button>
    </div>
    <div class="container">
      <div class="blog-content">
          <%= render 'blogs', blogs: @blogs2 %>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">新規投稿</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>

      <%= form_for [:public, @blog], remote: true do |f| %>
        <div class="modal-body">

          <div class="form-group">
            <%= f.file_field :blog_image_id %>
          </div>

          <div class="form-group">
            <%= f.label :title, "ブログタイトル" %>
            <%= f.text_field :title, class: "form-control" %>
          </div>

          <div class="form-group">
            <%= f.label :body, "ブログ" %>
            <%= f.text_area :body, class: "form-control" %>
          </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
          <%= f.submit "投稿する", class: "btn btn-primary" %>
        </div>
      <% end %>
    </div>
  </div>
</div>

create.js.erb

$("textarea").val("");
$("input").val("");
$('#exampleModal').modal('hide')
$('.blog-content').html("<%= escape_javascript(render 'blogs', blogs2: @blogs2) %>")

補足

ruby 2.5.7
bootstrap 4.4.1
rails 5.2.4

Answer 1

createアクションで

if @blog.save
redirect_to index_path（ここはお好みで）
end

でもう一度Viewを読み込ませてみてはいかがでしょうか？

それか、Jbuilderを作成してjQueryで成功した際にViewのカスタムデータを取得して最後の投稿の上に動的に追加するというのはいかがでしょうか
？

ここで、AJAXの説明をしてしまうと足りなくなってしまうので下記を参考にしてください。
https://qiita.com/kumasuke/items/36365bcdf30eaea65250

Comments

[KURUMAEBI]

回答ありがとうございます。記事に非同期処理を前提に開発していると書いていませんでした。大変申し訳ありません。いただいた記事を元にturbolinksが関係している可能性が大いにあることがわかりました。しかし、自分のcreat.jsファイルにturbolinksの記述をどう当てはめたら良いかわからないのですが、教えてもらうことは可能でしょうか？