Perl Webアプリ開発入門

新規作成、更新が成功した場合のメッセージボックス

新規作成、更新が成功した場合のメッセージボックスのサンプルです。

• jQueryが必要
• 閉じるボタンを実装
• 色調は緑色
• flashメソッドの使い方のサンプル
• 好きなメッセージの表示に対応
• モーダルではなくページ上部に表示

フォームによる新規作成や更新が成功した場合は、一般的には、リダイレクトで、戻りたいページに移動します。この時flashメソッドを利用すると、リダイレクト後の接続一度だけ保存できるメッセージを設定できます。

  $self->flash(success_message => '新規作成しました');
  $self->redirect_to("/foo/bar");
  return;

メッセージボックスを表示している部分です。flashメソッドにメッセージが含まれている場合だけ、表示を行います。

<style>
  .success_message {
    padding:3px 8px 25px 8px;
    background:#eeffee;
    border:1px solid #ccddcc;
    border-radius:5px;
    color:#336633;
    width:calc(100% - 15px);
    margin:10px auto;
  }
  .success_message_close {
    text-align:right;
  }
  .success_message_close_button {
    text-align:right;
    cursor:pointer;
    font-size:18px;
  }
</style>

    % if (my $success_message = flash('success_message')) {
      <div class="success_message">
        <div class="success_message_close">
          <span class="success_message_close_button" onclick="$(this).closest('.success_message').hide()">×</span>
        </div>
        <div class="success_message_text">
          <%= $success_message %>
        </div>
      </div>
    % }