XMod Pro 4 leverages jQuery in myriad ways. Some are flashy, but this small feature is so useful, I wonder why we didn't add it earlier.

I love jQuery. Since I first started using it in 2006 I realized it was a wonderful gift to front-end developers. Back in those days it was hard to use jQuery within DotNetNuke - especially when it came to integration within a commercial module.

XMod was one of the first modules to actively use jQuery. However, we could only use it for our administrative screens - not on the public facing screens because - from a module developer's perspective, that's the wild west. You never know what modules you'll be sitting next to on a page and how good (or bad) their implementation might be.

Thankfully, the recent automatic inclusion of jQuery in DotNetNuke 5 and 6 make that process less painful. We've gradually added more and more features which leverage the jQuery library and more XMod Pro developers are learning how easy it is to do spectacular things with our module and the jQuery library. Just take a look at some of our free Module Kits for working examples.

The thing is, the more I personally use XMod Pro for jQuery work, I've increasingly realized there's more XMod Pro can do to make life a little less tedious for jQuery developers. XMod Pro (since version 1.0) has made it possible to dynamically inject Javascript - including jQuery - into your pages - allowing injection of code in the header area of the page, the top of the body section, and near the bottom of the page (for quicker loading times of pages). We've missed one obvious area - the typical boilerplate code that almost every jQuery page includes:

jQuery(document).ready();

Beginning in version 4.0, you can use the new <xmod:jQueryReady></xmod:jQueryReady> tag to quickly and painlessly put this in the page. Don't stop reading yet. We didn't just insert the ready statement.

1. We handle registering your script in the page without the need for a <xmod:ScriptBlock></xmod:ScriptBlock> tag.
2. We place your code near the bottom of the page for performance reasons.
3. We wrap your code in a closure which not only helps prevent other Javascript from stepping on your code, it also makes it possible to use the "$" shortcut to avoid typing "jQuery" all the time.
4. We create the function body so you can just start typing jQuery code.

In a nutshell, this is what gets rendered out to the page:

(function($){
	$(document).ready(function(){
		// your code goes here
	});
) (jQuery);

So now you can simply put in your jQueryReady tag and start writing jQuery code. Quick, simple, painless. Saves typing, saves typos.

Example:

<xmod:jQueryReady>
	$('#myList li:first').css({'color': 'red'});
</xmod:jQueryReady>

We've got some other ideas on how to make you more productive, but I want to hear from you. How can we save you time and effort?