Perl Web App Development Tutorial

Message box when new creation or update is successful

This is a sample message box when a new creation or update is successful.

• jQuery required
• Implemented close button
• The color is green
• Sample of how to use flash method
• Supports display of favorite messages
• Display at the top of the page instead of modal

If the new or updated form is successful, the redirect typically takes you to the page you want to return to. At this time, if you use the flash method, you can set a message that can be saved only once for the connection after redirect.

  $self->flash(success_message =>'newly created');
  $self->redirect_to("/ foo / bar");
  return;

This is the part where the message box is displayed. Display only if the flash method contains a message.

<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>
    %}