javascript - 使用 json 字符串显示 toast 消息时出现问题

Question

我正在尝试实现一个 ajax 表单，以检查出现错误时应在何处显示 toast 消息。这是 toast 消息部分的一部分，我想触发它​​看起来像

@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 class="alert-container">@include('frontend.layout.toast-message')</div> 放置在我的 html 正文中的一个 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);
    })
});

警报返回我应该在我的 toast 消息上显示的消息，但是 toast 没有显示。最好知道代码中出了什么问题，或者我是否应该以其他方式解析错误消息？

Answer 1

注意@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>