How to Make an Ajax Request when Twitter Bootstrap Alert is Dismissed

Twitter Bootstrap is an awesome CSS framework which speeds the UI development a lot.

I worked on one of my products (qSandbox.com) this weekend. I wanted to notify the user that their account has been upgraded. I wanted the message to be shown in the control panel. That's in addition to the email confirmation.

I save the user specific message in a folder and if that file exist it is shown to the user.
The message will expire within 24hours but I wanted if the user dismissed the message so it is deleted.
That way the user won't be bother with the message again.

The project uses Twitter Bootstrap 3.x so I used the dismissible alert which when clicked makes an ajax request to remove the message.

Here is a link to a working demo: https://gist.github.com/lordspace/d950dfbd81b4a7f7213a

<?php

echo 'Ok';


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Example: How to Make an Ajax Request when Twitter Bootstrap Alert is Dismissed</title>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="//oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
	
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />

	<!-- Optional theme -->
	<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" />

  </head>
  <body>
	<div class="row">
		<div class="col-md-6">
			<h1>Hello, world!</h1>
			
			<div>
				This example code shows you how you can call JavaScript (ajax) when an alert is dismissed so you
				can make sure the message doesn't bug the user again.
			</div>
			
			<div>
				Here is a link to the <a href='http://slavi.ca/tutorials/make-ajax-request-twitter-bootstrap-alert-dismissed/' target='_blank'>blog post</a>
			</div>
			
			<br/>
			
			<div class="alert alert-warning alert-dismissible" role="alert" data-id="100" data-user_id="500">
			  <button type="button" class="close" data-dismiss="alert">	  
				<span aria-hidden="true">&times;</span><span class="__sr-only">Close</span>
			  </button>
			  <strong>Warning!</strong> Start coding, you're missing the fun!
			</div>
		</div>
	</div>
	
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	
    <!-- Latest compiled and minified JavaScript -->
	<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>	
	
	<script>
		$(document).ready(function($) {		
			// This handles when the user clicks on an X button of an alert message.
			// We need to call ajax to make sure the message is deleted so it doesn't bug the user again.
			$('.alert-dismissible').bind('closed.bs.alert', function () {
				var id = $(this).data('id') || 0;
				var user_id = $(this).data('user_id') || 0;
				$.get('ajax.php?cmd=dismiss_alert&user_id=' + escape(user_id) + '&id=' + escape(id));
			});
		});
	</script>

  </body>
</html>

Related

 

 

Do you need a quick way (seconds!) to set up a test WordPress site?
Then you need to check out qSandbox now.

Disclaimer: The content in this post is for educational purposes only. Always remember to take a backup before doing any of the suggested steps just to be on the safe side.
Referral Note: When you purchase through a referral link (if any) on this page, we may earn a commission.
If you're feeling thankful, you can buy me a coffee or a beer