- ok AIC was a bit to depressing moving on to... youtube.com/watch?v=rCVQoG… 20 hours ago
- my sample lol while working on the #cheezburger content card.. i<3 @github http://t.co/03Bc0hEW 20 hours ago
- little AIC jar of flies & hacking on some less styles while sipping a fine brew from Olympia Coffee Roasting Company #goodmorning #cheezlife 21 hours ago
- hey @marthakelly have you met @garannm? she is also a big javascript fan... 1 day ago
- woot looks like i get to spend a week working with the Know Your Meme team haxoring on some ruby in the near future. 1 day ago
I Am Not Myself
Bills.Pay(Developer.Skills).ShouldBeTrue()
Using the jQuery Template Plugin for Consistent User Notifications
Posted by on May 31, 2011
I recently started playing around with the new jQuery template plugin after seeing Stephen Walther present at my local .NET Users Group. I wanted to share this simple user notification template that I have been using.
<html>
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<script src="@Url.Content("~/Content/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Content/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Content/Scripts/jquery.tmpl.min.js")" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.ajax-busy').ajaxStart(function () { $(this).show(); });
$('.ajax-busy').ajaxStop(function () { $(this).hide(); });
$('.ajax-busy').ajaxError(function (e, xhr, settings, error) {
$('#error-message-template').tmpl({ Message: error })
.appendTo('body');
$("#dialog-message").dialog({
modal: true,
width: 480,
buttons: {
Ok: function () {
$(this).dialog("close");
$(this).remove();
}
}
});
});
});
</script>
</head>
<body>
<div id="main-content">@RenderBody()</div>
<div class='ajax-busy'><img src="@Url.Content("~/Content/Images/ajax-loader.gif")" /></div>
<script id="error-message-template" type="text/html">
<div id="dialog-message" title="Something Went Horribly Wrong!">
<p>Despite our best efforts, something went wrong trying to process this request.
I have <a href='@Url.Content("~/elmah.axd")'>logged the error</a>, and dispatched
the ninja fixer monkeys.</p>
<p>Error: ${Message}</p>
</div>
</script>
</body>
</html>
It is amazing how little code is needed create a very nice and consistent ajax error notification.
Update: I wanted to pop back into this post seeing as how it is getting some circulation on the internets and go into a little detail on what all is going on here. To start this code sample is a Razor based layout in an ASP.NET MVC 3 application. So, it is the equivalent of a Master Page in ASP.NET. The elements that being with ‘@’ are Razor syntax for rendering server side information into the final markup sent to the browser.
The basic html page structure is created and three javascript libraries are added in the head; jQuery, jQuery UI and jQuery Templates.
The page consists of a couple divs one of which is classed “ajax-busy” that contains a typical ajax spinner image. While not in the sample code, the ajax-buzy class is not visible by default using CSS rules. The main script block uses the jQuery ajax methods to display the spinner when there is an active ajax call being made.
Near the bottom of the page is a script block of type text/html, this is my client side template for my error notification. This block is ignored by browsers while rendering. To display a message, I add a handler to jQuery’s ajaxError method. This handler first locates the template element by id, then applies the template to a json object that I have created inline and finally appends the result to the body of the html document.
The element is now visible, but I take it a step farther by displaying it as a model dialog using jQuery UI’s dialog widget. With some simple set up of the dialog I handle removing the element from the page when the OK button is clicked.
This bit of functionality is now handled globally in the application by this one chunk of code. Here is what the end product looks like.
Nice work, Bobby. Thanks for sharing.
By the way, just wanted to mention that the work Consistant in your title is spelled Consistent
Thanks Norm.