个人中心
gpt4 book ai didi

javascript - 如何在成功的ajax上显示Flash消息，在我的页面顶部，而不刷新？

转载 作者：行者123 更新时间：2023-11-27 23:25:51 28 4
gpt4 key购买 nike

我的书签索引页本质上是一个单页应用程序。当我在页面底部提交新书签的表单时，我希望页面不必刷新并在顶部以 Flash 消息的形式显示 “书签已成功创建!”页面的。

在我的 application.html.erb 文件中，我正在渲染 Flash 消息:

<!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>

我的 bookmarks_controller 中的 create 方法:

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

我的书签 index.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 中的 Flash 消息处理不应该处理它吗？是否是由于我的书签 Controller 中的语法错误造成的？我还有一个关于 flash.now 与 flash 的问题。由于书签提交是 AJAX 操作，因此这与本例相关吗？

最佳答案

form of a flash message

不可能有flash de Rails

--

Flash 是 Rails 在操作之间填充的 session cookie 的一部分。众所周知，这很难用 Ajax 进行解析，并且实际上仍然是一个难以实现的模式(当浏览器尚未刷新时，Rails 如何重新填充 session )。

解决方法是通过 ajax 方法传递值，使用 flash.now 。 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")

关于javascript - 如何在成功的ajax上显示Flash消息，在我的页面顶部，而不刷新？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34970140/

28 4 0
文章推荐： c++ - Select() 有时不等待
文章推荐： c++ - OpenGL 平截头体、透视
文章推荐： javascript - 具有粘性标题和水平滚动的多个表
文章推荐： html - 背景图像未全屏显示
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com