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

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

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

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

Ruby on Rails

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

Q&A

解決済

2回答

5349閲覧

railsでページの上部にflashでメッセージを表示させる

lyzmfeqpxs54

総合スコア237

Ruby

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

Ruby on Rails

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

0グッド

1クリップ

投稿2017/09/19 17:08

いつもお世話になります。

現在railsでページを作っており、フォームとボタンを用意しております。ボタンを押した際に保存成功のメッセージをflashを用いて画面上部に表示し一定期間で消したいのですがうまくいきません。

現状下記の用に書いているのですが、保存処理後「保存成功」がただ表示されているだけという状況です。

初歩的な質問で申し訳ございませんがご教示のほどお願いいたします。

Ruby

1 2# yyy_controller.rb 3 4flash[:notice] = "保存成功" 5redirect_to action: "index" 6 7 8 9 10# xxx.html.erb 11 12<% if flash[:notice] %> 13 <p><%= flash[:notice] %></p> 14<% end %> 15

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

html

1<!DOCTYPE html> 2<html> 3<head> 4<style> 5#snackbar { 6 visibility: hidden; 7 min-width: 250px; 8 margin-left: -125px; 9 background-color: #333; 10 color: #fff; 11 text-align: center; 12 border-radius: 2px; 13 padding: 16px; 14 position: fixed; 15 z-index: 1; 16 left: 50%; 17 bottom: 30px; 18 font-size: 17px; 19} 20 21#snackbar.show { 22 visibility: visible; 23 -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s; 24 animation: fadein 0.5s, fadeout 0.5s 2.5s; 25} 26 27@-webkit-keyframes fadein { 28 from {bottom: 0; opacity: 0;} 29 to {bottom: 30px; opacity: 1;} 30} 31 32@keyframes fadein { 33 from {bottom: 0; opacity: 0;} 34 to {bottom: 30px; opacity: 1;} 35} 36 37@-webkit-keyframes fadeout { 38 from {bottom: 30px; opacity: 1;} 39 to {bottom: 0; opacity: 0;} 40} 41 42@keyframes fadeout { 43 from {bottom: 30px; opacity: 1;} 44 to {bottom: 0; opacity: 0;} 45} 46</style> 47</head> 48<body> 49 50<h2>Snackbar / Toast</h2> 51<p>Snackbars are often used as a tooltips/popups to show a message at the bottom of the screen.</p> 52<p>Click on the button to show the snackbar. It will disappear after 3 seconds.</p> 53 54<button onclick="myFunction()">Show Snackbar</button> 55 56<div id="snackbar">Some text some message..</div> 57 58<script> 59function myFunction() { 60 var x = document.getElementById("snackbar") 61 x.className = "show"; 62 setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000); 63} 64</script> 65 66</body> 67</html>

一つ一つ解説するのは時間の都合でできませんが、上記のコードを参考にしてみてください。

投稿2017/09/21 07:56

mtdsnsk

総合スコア789

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

動的なwebページを作成する場合には、JavaScript(jQuery)の知識が必要です。
jQueryを実行できる状態にした上で、下記を参考にしてみてください。

STEP1
gemファイルに下記を追加

Ruby

1gem 'query-rails'

STEP2
bundle installを実行


STEP3
下記をxxx.html.erbのbodyタグの下とかに埋め込んでください

JavaScript

1<script> 2 $( document ).ready(function() { 3 // メッセージを3秒後にフェードアウトする 4 $('#notice').fadeOut(3000); 5}); 6</script>

STEP4
pタグにid="notice"を追加してください
<p id="notice"><%= notice %></p>

投稿2017/09/21 04:07

mtdsnsk

総合スコア789

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

lyzmfeqpxs54

2017/09/21 07:29

ご回答ありがとうございます。ご教示いただいた方法で保存成功がフェードアウトするようになりました。本当にありがとうございます。 一つ質問なのですが、ご教示いただいた方法の場合「保存成功」が消えたあとその消えた部分を埋めるように下のフォームなどが上に上がってきてしまいます。レイアウトが変わらないよう、上にかぶせて「保存成功」を表示するにはどのようにすればよいのでしょうか。 不勉強で申し訳ありません。 よろしくお願いいたします。
mtdsnsk

2017/09/21 07:57

別途コメントしました。 当初の質問とは別の内容になるので、こちらは一旦解決済みにして、分からなければ別内容として質問を立て直してください。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問