Show Bootstrap Alert on AJAX request error

Question

I have a simple AJAX request that updates some PHP session variables based on some selections in a table. If there's an error with the AJAX request I change the colour of the table row that they selected (it usually changes to green if they select 'Yes' and red if they select 'No'). This is all working well.

I would now like to display one of the dismissible Bootstrap alerts on the screen as well, like in their example:

 <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> 

but I'm not sure how I can cause this to be displayed when there's an error with the AJAX request. Here's my script:

 $(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"); }); }); }); 

You can see it adds a warning class to the table row if there's an error:

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

but I'm not sure how to extend this to also add a dismissible alert (and how to control the positioning of that alert)?

Answer 1

Set alert div default display:none and inside ajax call success / file / error you can show alert using below code.

 $(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> 

Answer 2

Eg add the html code of the alert above or under your table and add style="display:none" to the alert div. Also set an id, like id="alert_ajax_error" to that div.

Now the fail callback should look like this:

.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();
});

In case of success hide alert with $("#alert_ajax_error").hide();