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';
view raw ajax.php hosted with ❤ by GitHub
<!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>
view raw dismissable alert bootstrap hosted with ❤ by GitHub

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