Question

我正在尝试实现一个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 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);
    })
});

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

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>

使用JSON字符串显示吐司消息时出现问题

1 个答案: