如何在頁面頂部顯示成功的ajax上的Flash消息而不刷新？

我的書籤索引頁面本質上是一個單頁面應用程序。當我在頁面底部提交新書籤的表單時，我希望頁面不必刷新，並以頁面頂部的Flash消息的形式顯示"Bookmark successfully created!"。如何在頁面頂部顯示成功的ajax上的Flash消息而不刷新？

在我application.html.erb文件，我渲染的提示信息：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Text Me Later</title> 
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> 
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> 
    <%= csrf_meta_tags %> 
</head> 
<body> 

<%= render partial: 'layouts/nav' %> 

<% flash.each do |key, value| %> 
    <% if key == "notice" %> 
    <%= content_tag :div, value, class: "text-center alert alert-warning" %> 
    <% elsif key == "alert" %> 
    <%= content_tag :div, value, class: "text-center alert alert-danger" %> 
    <% else %> 
    <%= content_tag :div, value, class: "text-center alert alert-success" %> 
    <% end %> 
<% end %> 

<div class="container"> 

<%= yield %> 

<%= debug(params) if Rails.env.development? %> 

</body> 
</html>

的create方法在我bookmarks_controller：

def create 
    @bookmark = Bookmark.new bookmark_params 
    @bookmark.user_id = current_user.id 

    respond_to do |format| 
     if @bookmark.save 
     flash[:notice] = 'Bookmark was successfully created.' 
     format.html { 
      redirect_to user_bookmarks_path 
     } 
     format.json { 
      render json: @bookmark, 
      status: :created, 
      location: @bookmark 
     } 
     format.js {} 
     else 
     flash[:error] = "Bookmark could not be created." 
     format.html { 
      render :index 
     } 
     format.json { 
      render json: @bookmark.errors.full_messages 
     } 
     format.js {} 
     end 
    end 
    end

我bookmarksindex.html.erb文件：

<h2>All of <%= current_user.first_name %>'s Bookmarks</h2> 
<ul id="all-bookmarks"> 
    <% @bookmarks.each do |bookmark| %> 
    <li class="bookmark-div"> 
      <div><%= bookmark.title %></div> 
      <div><%= bookmark.image %></div> 
      <div><%= bookmark.description %></div> 
      <div><%= bookmark.location %></div> 
      <div><%= bookmark.time %></div> 
      <div><%= bookmark.date %></div> 
      <div><%= bookmark.created_at %></div> 
      <div><%= bookmark.updated_at %></div> 
      <div><%= bookmark.url %></div> 
      <div><%= link_to "Edit", [:edit, bookmark]%></div> 
      <div><%= link_to "Delete Bookmark", bookmark, :method => :delete, confirm: 'are you sure?'%></div> 
      <div><%= link_to "Add as a reminder" %></div> 
    </li> 
    <% end %> 
</ul> 

<h2>Add a bookmark below:</h2> 

    <div id="post-new-bookmark"> 
     <%= simple_form_for [@user, @bookmark], :method => :post, remote: true do |f| %> 
      <% if @bookmark.errors.any? %> 
      <div id="errorExplanation"> 
       <h2><%= pluralize(@bookmark.errors.count, "error") %> prohibited this post from being saved:</h2> 
       <% end %> 
      <%= f.input :title %> 
      <%= f.input :image %> 
      <%= f.input :description %> 
      <%= f.input :location %> 
      <%= f.input :date %> 
      <%= f.button :submit %> 
     <% end %> 
    </div>

create.js.erb：

$("<%= escape_javascript(flash[:notice]) %>").appendTo("#flash-notice") 

$("<%= escape_javascript render(:partial => 'bookmarks/cbookmark', :locals => { :bookmark => @bookmark }) %>").appendTo("#all-bookmarks")

我的問題是：爲什麼在成功的書籤作成閃光燈消息不是頁面右側的頂部成功創建後顯示？我的application.html.erb中的閃光消息處理不應該照顧它嗎？這可能是由於我的bookmark controller中的語法錯誤嗎？我也有一個關於flash.now vs flash的問題。在這種情況下，書籤提交是AJAX操作嗎？

來源

2016-01-23 Kenny Zhang

形式快閃消息

鈰NE PAS可能AVEC的樂flash de Rails

的session餅乾Rails所動作之間填充的快閃形成部分。這已經非常難以用Ajax來解析，並且實際上仍然是一個難以實現的模式（當瀏覽器未被刷新時，Rails如何重新填充session）。

解決方法是使用flash.now將值通過ajax方法傳遞。 Good ref here（我寫這件事）：

#app/controllers/bookmarks_controller.rb 
class BookmarksController < ApplicationController 
    def create 
    @bookmark = Bookmark.new bookmark_params 
    @bookmark.user_id = current_user.id 

    respond_to do |format| 
     if @bookmark.save 
     flash.now[:notice] = 'Bookmark was successfully created.' 
     format.html { redirect_to user_bookmarks_path } 
     format.json { render json: @bookmark, status: :created, location: @bookmark } 
     format.js 
     else 
     flash.now[:error] = "Bookmark could not be created." 
     format.html { render :index } 
     format.json { render json: @bookmark.errors.full_messages } 
     format.js 
     end 
    end 
    end 
end

使用flash.now應允許您通過Ajax相應填充flash：

#app/views/bookmarks/create.js.erb 
$("<%=j flash.now[:notice] %>").appendTo("#flash-notice")

來源

2016-01-24 12:57:29

如何在頁面頂部顯示成功的ajax上的Flash消息而不刷新？

回答

相關問題