Проблема с отображением тостового сообщения с использованием строки json - PullRequest
Новая
       12

Проблема с отображением тостового сообщения с использованием строки json

4 голосов
/ 19 июня 2019

Я пытаюсь реализовать проверку формы ajax, где должно появляться всплывающее сообщение при ошибке.это та часть сообщения о тосте, которую я должен вызвать, выглядит как 

@if ($errors->any())
<div class="alert alert-danger alert-dismissable fade show {{ session()->get('dismiss', '') }}" data-auto-dismiss="2000">
  <i class="fas fa-times-circle toast-icon"></i>
  <div class="toast-message">{{ $errors->has('message') ? $errors->first('message', ':message') : __('The given data was invalid.') }}</div>
  <i class="fal fa-times close" data-dismiss="alert" aria-label="Close"></i>
</div>
@endif

этот файл затем включается в div, который я поместил в тело моего html, используя <div class="alert-container">@include('frontend.layout.toast-message')</div>

и со стороны js вызываемая мной функция ajax. 

$('#signup_form').submit(function(e) {
  e.preventDefault();
  $.ajax({
    method: "POST",
    url: $('#signup_form').attr('action'),
    data: new FormData($('#signup_form')[0]),
    processData: false,
    contentType: false,
    cache: false,
    beforeSend: function (xhr) {
      $(this).find('button').prop('disabled', true);
      $.each($('.form-group.is-invalid .message'), function () {
        $(this).text('');
      });
      $.each($('.form-group.is-invalid'), function () {
        $(this).removeClass('is-invalid');
      });
    }
  }).done(function (response) {
    if (response.success == true) {
      ///
    }
  })
  .fail(function(jqXHR) {
        if (jqXHR.responseJSON) {
            //prompt for alert message
            var alertContainer = $('.alert-container');
            alertContainer.find('.toast-message').text(jqXHR.responseJSON.message).addClass('show');
            alert(jqXHR.responseJSON.message);
            //go through each input to see which ones are within the error
            $.each(jqXHR.responseJSON.errors, function (field, message) {
                var element = $('#'+ field);
                element.parents('.form-group').addClass('is-invalid');
                element.parents('.form-group').find('.message').text(message).show();
            });
        }
        $(this).find('button').prop('disabled', false);
    })
});

предупреждение возвращает сообщение, которое я должен получить в своем сообщении тоста, однако тост не отображается.Было бы хорошо узнать, что пошло не так в коде, или я должен был бы разобрать сообщение об ошибке другим способом?

1 Ответ

0 голосов
/ 19 июня 2019

Обратите внимание, что @if .. @endif - это не код js, это код php. Таким образом, если вы обновили страницу без ошибок, она не будет существовать.

Итак, я думаю, это ничего не найдет: 

alertContainer.find('.toast-message');

Возможное решение

Всегда помещайте туда div.alert, но держите его скрытым, если нет ошибок. Пример (я не проверял это): 

<div class="alert alert-danger alert-dismissable fade {{ $errors->any()?'show':'hide' }} {{ session()->get('dismiss', '') }}" data-auto-dismiss="2000">
  <i class="fas fa-times-circle toast-icon"></i>
  <div class="toast-message">{{ $errors->has('message') ? $errors->first('message', ':message') : __('The given data was invalid.') }}</div>
  <i class="fal fa-times close" data-dismiss="alert" aria-label="Close"></i>
</div>
...