In recent months I have played with the idea of introducing jQuery into my Blog.  Several interesting plug-ins are out in the wild that produce some pretty slick web site functionality.  In addition to the plug-ins jQuery privides a simple way to manipulate the html document object model (DOM). 

One problem that became immediately evident was that a collision of sorts was happening between BlogEngine.NET and jQuery.  Whenever I would try and load jQuery the objects would always error out.  Not being a very intelligent bear, I had to think, think, think. (yes, I have two little girls who love Winnie the Pooh)  Looking into the BlogEngine.NET code you can see that a JavaScript file called Blog.js includes the same variable name that jQuery uses as it’s default variable, the $ character.  So whenever I attempted to load the jQuery scripts they were colliding with the Blog.js scripts.

Fortunatey jQuery has a nifty way to deal with this issue:  The noConflict method.  So an example of loading up jQuery with the noConflict method would look like the following:

<script src="/js.axd?path=js/jquery-1.2.6.min.js" type="text/javascript"></script>
<script type="text/javascript">
	$j = jQuery.noConflict();	
    $j(document).ready(function() {
        ....
    });
</script>

Using this method you can effectively remove the collission with BlogEngine.NET and use the power of jQuery.  A couple of points worth mentioning:

1. I renamed the default variable $ to j$.  This allows a subtle yet effective way to rename jQuery without adding much more text to my code.
2. Did you notice that I am using the JavaScript handler to load the jQuery file?  This is a useful handler that everyone should be using when dealing with JavaScript in BlogEngine.NET.
3. I am using the document.ready function to ensure that the DOM has loaded before attempting to execute any of the code.  Not only can you add jQuery calls inside the jQuery document.ready function, you can load any JavaScript calls that you wish to execute after the document has loaded.

Now that we have successfully loaded jQuery it’s time to use some of the cool functionality that goes along with it.  One thing I used immediately was adding the rouded corner effect found in the corners plug-in.  I added the script tag to the head section and inserted a command in the document.ready function:

<script src="/js.axd?path=js/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="/js.axd?path=js/jquery.corner.js" type="text/javascript"></script>
<script type="text/javascript">
	$j = jQuery.noConflict();	
    $j(document).ready(function() {

		// Set corners in the comments section
		$j(".comment").corner();

    });
</script>

Again, I used the JavaScript handler to load the JavaScript handler.  But this time something interesting happened.  I started getting errors on the corners plug-in.  So a quick look at the JavaScript file and it was pretty obvious what was wrong.  The corners plug-in loaded an additional instance of the jQuery library.  No big deal, I just needed to make some minor modifications to handle this:

$j = jQuery.noConflict();
(function($j) { 
    $j.fn.corner = function(o) {
        ....
})(jQuery);

With this change my problems was solved.  Several other plug-ins that I have been playing with have met success when similar modifications were made.

I haven’t decided which plug-ins I want to continue to use but for now here is a list of the most interesting I have found to date.

• jQuery Corners Plug-In
• jQuery Faviconize Plug-In
• jQuery LightBox Plug-In
• jQuery Searchbox Slide (not really a plug-in, just cool code)

Feel free to grab these if you find them useful.  Also, if you have any problems using jQuery in your BlogEngine.NET blog feel free to contact me and let’s work through the issues together.