php+JavaScript 「送信」を押した処理後にリフダイレクトさせ自然消滅するメッセージを表示させたい

やりたいこと
formで送信を押しphpで処理をし本のページにリダイレクトさせメッセージを表示させたい。

現在
「送信ボタン（投稿）」をクリックするとデータベースの保存がかかり、リダイレクトするところまではできていますが
リダイレクト時にメッセージを表示させるにはどうすれば良いでしょうか？
php側で処理したら良いのか
javascript側で処理したほうがいいのかリダイレクト時だとphp側になるのでしょうか。。

環境
Fuelphp
Fuel: 1.7.0

追記
画面遷移の流れが記載していなかったので
追記させていただきます

投稿画面⇨送信ボタン⇨投稿画面に戻る(この時に投稿完了メッセージを表示したい)

現在のコード

html
1<section>
2<!---->
3    <?php echo Form::open(array('action'=>'/ninnin/hogehoge/', 'enctype' => 'multipart/form-data')) ?>
4
5    <div class="container clearfix">
6        <div class="row">
7            <div class="col-md-12">
8                <p>画像ファイルを選択してください（複数可)</p>
9            </div>
10        </div>
11        <div class="row">
12            <div class="col-xs-2">
13				<span class="fileUpload btn btn-default">
14					ファイルを選択
15					<input type="file" class="uploadFile" accept="image/*" multiple/>
16				</span>
17
18            </div>
19            <div class="col-xs-4" id="progress-container">
20            </div>
21        </div>
22        <br />
23        <div class="row">
24            <div class="col-md-12" id="image-files">
25                <ul class="list-inline list-unstyled"></ul>
26            </div>
27        </div>
28        <tr>
29            <th colspan="2" class="btn_th"><input type="submit" id="submit" name="submit" value="投稿" onclick="return check_hope_date()"/></th>
30        </tr>
31    </div>
32
33
34    <?php echo Form::hidden("mode", "do") ?>
35    <?php echo Form::close() ?>
36</section>

elseif ($post['mode'] == 'do')
        {
            //データ保存コード
            }
            // 表示
            Response::redirect('ninnin/hogehoge/index');
        }

m.ts10806

2017/08/04 06:21

タイトルにtypoがあります。「javascriot」

m.ts10806

2017/08/04 06:21 編集

また、処理を見た感じ何かしらのフレームワークをお使いでしょうか？お使いでしたらタグに追加と（バージョンも含めて）質問本文に追記願います。

行動規範の内容に同意します

回答2件

ベストアンサー

「自然消滅するメッセージ」という前提がある以上、メッセージの処理はjavascriptじゃないと無理ですね。
はっきりとは書かれていませんが、さらにこのような前提条件があるものだと仮定します。

リダイレクトされる最終ページのURLはいじりたくない
リダイレクト経由の最終ページはメッセージを表示をするけど、その最終ページをリロードしてもメッセージは表示されたくない
最終ページの中身はいじれない

php内で最終ページにいきなりリダイレクトするのではなく、「メッセージ表示後、最終ページに移動してくれるページにリダイレクトする」のをおすすめします。

php内では

php
1Response::redirect('message.html?url=http://ninnin/hogehoge/index');

このように、メッセージ表示するページであるmessage.htmlに、最終ページのURLを引数として渡します。

messsage.htmlの中身はこんな感じです。

html
1<!DOCTYPE HTML>
2<html>
3<head></head>
4<body>
5<div id='message' style='display:none;'>
6フォーム入力ありがとうございました。
7</div>
8<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
9<script>
10$("#message").fadeIn(300).delay(1000).fadeOut(300,function(){
11	loacation.href = loacation.href.split("?")[1].split("=")[1];
12});
13</script>
14</body>
15</html>

メッセージをフェードイン・フェードアウトなど適当な演出をし、終わったら自動的にURL移動しますので、最終ページが表示されます。

もし前提条件3が不要、つまり最終ページ内も編集可能なのであれば、上記のメッセージ処理javascriptを最終ページに仕込んで調整もできます。
その場合は、最終ページが背景に表示されてる手前のレイヤーにメッセージが表示されるといった演出が可能になります。
これを実現するには、php内では最終ページにリダイレクトフラグをハッシュとして付けた状態で呼び出します。

php
1Response::redirect('ninnin/hogehoge/index#red');

最終ページ内のjavascriptは、

javascript
1if (location.hash == "#red"){
2	$("#message").fadeIn(300).delay(1000).fadeOut(300,function(){
3		location.href = location.href.split("#")[0];
4	});
5}

ハッシュ付きならメッセージ演出をし、演出が終わった時点でハッシュなしのURLに移動します。
ハッシュなしURLでは演出をしないのですから、リロードされても再度演出が出てくることはない、ということです。

投稿2017/08/04 06:55

zohnam

総合スコア1441

amaguri

2017/08/04 07:26 編集

回答ありがとうございます。情報追加させていただいたのですが投稿画面から投稿画面にリダイレクトする場合でも利用できますでしょうか？後者の回答を試してみたのですが動作しなかったです。。404エラーになってしまいます

amaguri

2017/08/04 07:42

解決しました！ありがとうございます！

zohnam

2017/08/04 07:48

解決おめでとうございます。解決したようなのでただの蛇足ですが、最終ページが投稿ページということなのであれば、リダイレクトとか以前にAjaxで処理しちゃえばよかったですね。 FormDataを使えばファイルアップロード処理も含めたフォーム投稿をAjaxで取り扱えますので、Ajax送信して戻ってきたら演出表示するだけなのでした。

amaguri

2017/08/04 07:50

ああやはりajaxの方がいいのでしょうか？ツイッターのようなのを想定していてて ajaxでする方がURL的にも実装的にもいいものになるのであれば書き換えようかと思いうます。。

zohnam

2017/08/04 08:00

そうですね。リダイレクトをごちゃごちゃやるよりも、FormDataでAjaxがベストだと思います。私はフォーム関係の質問をみかけるごとにFormDataを推してますので、teratail内でFormDataを検索するだけでもそこそこ情報集まると思いますｗ

amaguri

2017/08/04 08:08

改めてみてみて質問してみたいと思います！

行動規範の内容に同意します

リダイレクト時にメッセージを表示させるにはどうすれば良いでしょうか？

php側で処理したら良いのか
javascript側で処理したほうがいいのかリダイレクト時だとphp側になるのでしょうか。。

phpはサーバー側の言語であり、画面出力自体はechoなどでしますが、
出力されるのはhtmlなどのクライアント側の言語です。
つまり「phpでメッセージを」というのはあくまで「phpでメッセージをhtml・css・javascriptなどで出力する」と言い換えられます。
固定メッセージであればhtmlで良いでしょうし、何かしらdbの値も出力したい場合はphpから取得した値を画面出力してあげれば良いです。

そんな感じでメッセージを表示させるとして、
あとは「自然消滅」とのことですが、
javascriptのsetInterval()などで適当な秒数経過後に非表示、または削除すると良いでしょう。
html,javascript,cssいずれも必要ですね。
この手のものは作りこむのが面倒なのでcssフレームワークをよく使います。
動作的にはmaterializeのトーストとかですかね。よく使います。

あとはphpでないと取得できない情報を含むかどうかです。

投稿2017/08/04 06:29

m.ts10806

総合スコア80850

amaguri

2017/08/04 06:35 編集

回答ありがとうございます。回答を読ませていたいたのですが問題の「リダイレクト時にメッセージを表示させる」というコードとしての解決方法がわからないのでリダイレクト時にメッセージを表示させるサンプルコードや参考サイトなどはお分かりでしょうか？。。メッセージの消滅はsetInterval()やmaterializeのトーストなのを使わせていただこうと思います。

m.ts10806

2017/08/04 07:09

リダイレクト時に表示ということは「画面表示時即座に」とイコールですよね。 javascript 画面表示時実行あたりで調べてみてください。document readyあたりが引っかかるはず。

amaguri

2017/08/04 07:12

送信完了のリダイレクト時の場合でしたので最初の画面読み込み時にも動いてしまうのでzohnamの回答を参考にさせていただきます。

m.ts10806

2017/08/04 08:16

送信完了という判定をできているのであればそこの分岐に入れれば良かったんですが・・・。

amaguri

2017/08/04 08:20

すみません、、理解力がなく具体的にソースコードで言われないと文章のみでは全く理解できずで申し訳ないです。。