在 AJAX 请求错误时显示引导警报答案

【问题标题】：Show Bootstrap Alert on AJAX request error在 AJAX 请求错误时显示引导警报
【发布时间】：2016-10-14 10:49:22
【问题描述】：

我有一个简单的 AJAX 请求，它根据表格中的一些选择更新一些 PHP 会话变量。如果 AJAX 请求出现错误，我会更改他们选择的表格行的颜色（如果他们选择“是”，通常会变为绿色，如果选择“否”，则通常会变为红色）。这一切都很好。

我现在还想在屏幕上显示一个可关闭的 Bootstrap 警报，就像在他们的示例中一样：

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span>
  </button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

但我不确定当 AJAX 请求出错时如何显示此内容。这是我的脚本：

$(document).ready(function() {
  $('button.btn-success').click(function() {
    var refreshItemID = $(this).closest('tr').attr('id');
    console.log(refreshItemID);
    // Create a reference to $(this) here:
    $this = $(this);
    $.post('updateSelections.php', {
      refreshItemID: refreshItemID,
      selectionType: 'yes'
    }, function(data) {
      data = JSON.parse(data);
      if (data.error) {
        console.log(data);
        console.log('something was wrong with the ajax request');
        $this.closest('tr').addClass("warning");
        return; // stop executing this function any further
      } else {
        console.log('update successful - success add class to table row');
        $this.closest('tr').addClass("success");
        $this.closest('tr').removeClass("danger");
        //$(this).closest('tr').attr('class','success');
      }
    }).fail(function(xhr) {
      console.log('ajax request failed');
      // no data available in this context
      $this.closest('tr').addClass("warning");
    });
  });
});

如果出现错误，您可以看到它在表格行中添加了一个警告类：

$this.closest('tr').addClass("warning");

但我不确定如何扩展它以添加可关闭的警报（以及如何控制该警报的位置）？

【问题讨论】：

使用这个引导通知CLICK HERE

标签： javascript jquery ajax twitter-bootstrap

【解决方案1】：

设置警报 div 默认显示：无，在 ajax 调用成功/文件/错误中，您可以使用以下代码显示警报。

$(document).ready(function() {


  $('button#alertshow').on('click', function() {
    var msg_type = $("#msgtype").val();
    ShowAlert(msg_type, 'Message Content', msg_type);
  });


  function ShowAlert(msg_title, msg_body, msg_type) {
    var AlertMsg = $('div[role="alert"]');
    $(AlertMsg).find('strong').html(msg_title);
    $(AlertMsg).find('p').html(msg_body);
    $(AlertMsg).removeAttr('class');
    $(AlertMsg).addClass('alert alert-' + msg_type);
    $(AlertMsg).show();
  }

});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="alertshow">Show alert</button>
<select id="msgtype">
  <option value="warning">Warning</option>
  <option value="info">Info</option>
  <option value="success">Success</option>
  <option value="danger">Danger</option>
</select>
<div class="alert alert-dismissible" role="alert" style="display:none;">
  <strong>Warning!</strong> 
  <p>Better check yourself, you're not looking too good.</p>
</div>

【讨论】：

【解决方案2】：

例如在表格上方或下方添加警报的 html 代码，并将 style="display:none" 添加到警报 div。还要为该 div 设置一个 id，例如 id="alert_ajax_error"。

现在失败回调应该是这样的：

.fail(function(xhr) {
  console.log('ajax request failed');
  // no data available in this context
  $this.closest('tr').addClass("warning");

  //make alert visible
  $("#alert_ajax_error").show();
});

如果成功隐藏警报$("#alert_ajax_error").hide();

【讨论】：