Ajax / JQuery - отображение сообщения fla sh об успехе

Question

У меня полностью рабочая система fla sh в PHP, и я использую ее для отправки пользователю сообщения об успехе, как только я создаю запись в БД.

В одной из моих форм у меня есть поле выбора, в которое я хочу, чтобы пользователь мог также легко добавлять записи, не отвлекая их от полузаполненной формы. Код, который я использую, работает хорошо. Пользователь нажимает «добавить категорию» (в метке выбора), открывает модальное окно, создает новую категорию, обновляет базу данных и поле выбора и закрывает модальное значение, используя AJAX. Все работает.

Мне нужно использовать или адаптировать мою систему fla sh, чтобы дать пользователю сообщение о том, что все ваши записи были добавлены. Я очень новичок в AJAX и на крутой кривой обучения!

Это мой AJAX / JQUERY код: (Я следовал учебному пособию, чтобы попасть сюда. Идея состоит в том, чтобы сделать его пригодным для использования через сайт, когда мне нужно добавить записи в выборку, добавив 'ajax' к классу формы.)

$('form.ajax').on('submit', function() {
    var that = $(this),
        url = that.attr('action'),
        type = that.attr('method'),
        data = {};

    that.find('[name]').each(function(index,value) {
      var that = $(this),
          name = that.attr('name'),
          value = that.val();
      data[name] = value;
    });
    $.ajax({
      url: url,
      type: type,
      data: data,
      success: function(response) {
        $('#select').load(document.URL +  ' #select');
        $('#addCategoryModal').modal('hide');
        $('#siteMessage').toast('show');
      }
    });
    return false;
  });

И это PHP настройка записи в БД (работает) и как Обычно я запускаю сообщение fla sh при перезагрузке страницы (сообщения также работают):

      //create record in db
      $newCategory = $this->blogModel->createCategory($formFields);
      if ($newCategory) {
        flash('siteMessage', 'Blog category added successfully');
      } else {
        flash('siteMessage', 'Something went wrong', 'bg-danger');
      }

И это код fla sh:

  function flash($name = '', $message = '', $class = 'bg-success') {
    if (!empty($name)) {
      if (!empty($message) && empty($_SESSION[$name])) {
        if (!empty($_SESSION[$name])) {
          unset($_SESSION[$name]);
        }

        if (!empty($_SESSION[$name.'_class'])) {
          unset($_SESSION[$name.'_class']);
        }

        $_SESSION[$name] = $message;
        $_SESSION[$name.'_class'] = $class;
      } elseif (empty($message) && !empty($_SESSION[$name])) {
        $class = !empty($_SESSION[$name.'_class']) ? $_SESSION[$name.'_class'] : '';
        echo '
        <div id="siteMessage" class="toast shadow" data-delay="8000" role="alert" aria-live="assertive" aria-atomic="true" style="position: absolute; top: 19px; right: 45%; z-index:10">
          <div class="toast-header '.$class.'">
            <i class="fas fa-envelope mr-2 pt-1 text-white"></i>
            <strong class="mr-auto text-white">Site Message</strong>
            <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
              <span class="text-white" aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="toast-body">
            '.$_SESSION[$name].'
          </div>
        </div>
        ';
        unset($_SESSION[$name]);
        unset($_SESSION[$name.'_class']);
      }
    }
  }

My PHP обрабатываю страницу, создаю запись в БД и устанавливаю сообщение fla sh как обычно. Я думаю, что не понимаю взаимодействия с тем, как AJAX возвращает возвращаемый успех и устанавливает сообщение fla sh.

Есть мысли?

Answer 1

Благодаря CBroe, который указал на присущие ему проблемы с использованием механизма сообщений fla sh, я добавил следующий div в нижней части страницы и теперь вызываю этот прямой вызов с помощью toast.show, чтобы передать сообщение user.

Я не уверен, что это самый эффективный способ сделать это, но он работает.

<div id="categoryMessage" class="toast shadow" data-delay="8000" role="alert" aria-live="assertive" aria-atomic="true" style="position: absolute; top: 19px; right: 45%; z-index:10">
  <div class="toast-header bg-success">
    <i class="fas fa-envelope mr-2 pt-1 text-white"></i>
    <strong class="mr-auto text-white">Site Message</strong>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span class="text-white" aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    The category was added successfully
  </div>
</div>