Apr28Written by:Will
4/28/2009
Some twitter conversations today led me to see the need for a jQuery tips blog entry to help DotNetNuke developers integrate jQuery into their modules easier. There are a handful of things that can easily stumble someone new to the jQuery scene.
- Make sure you call jQuery.noConflict();. This is necessary to not cause other client scripts and libraries to run errors. This is due to the fact that other client scripts might be using the $ designator for a JavaScript class. [jQuery.noConflict(); documentation]
- If manually adding jQuery, try to load the jQuery library in the header before all others. Not doing this can lead to the jQuery library not being loaded before another client script or library tries to use it. This is especially true of jQuery plugins.
- Always call the jQuery core methods using the jQuery() format. This is related to the previous issue.
- Check the jQuery plugin source code. Not all jQuery plugins use the long form of calling jQuery. This can result in errors if you have called jQuery.noConflict();.
- In DNN 5+, register jQuery. DNN 5+ allows module developers to register jQuery to be loaded only when modules need it. Just call DotNetNuke.Framework.jQuery.RequestRegistration(). This prevent jQuery from being loaded when it’s not used. If your skin is using widgets, this is not necessary, but should be done for commercial modules regardless.
- Use the jQuery hosted option. Look in the Host Settings (DNN 5). This is not necessary, but can reduce page load times, since the site visitor may already have the library loaded in case. However, if the hosted source is having problems hosting the library, your page load times could increase dramatically, as well as not load the library at all. Either way, your client side-code will break.
- Only use jQuery Debug Version for debugging. Look in Host Settings (DNN 5). By default, DNN loads the jquery.min.js file. However, when you are debugging jQuery, this makes it nearly impossible to debug. Check this setting to tell DNN to load the uncompressed version of the jQuery library. Only do this on development machines, if possible.
- Wrap onload scripts in a ready() function. Wrapping your scripts in the ready() function prevents conflicts with other scripts on the page, including Microsoft scripts, and the DNN Client API.
Beyond the above tips, your your typical JavaScript debugging methods will apply. I hope this helps.
6 comment(s) so far...
Great post! Thanks for your help Will
By Gaz on
4/29/2009 |
Great tips Will. Thanks.
Dax
By Dax Davis on
4/29/2009 |
Good tips thanks for those
By Dylan Barber on
4/29/2009 |
It is of course my pleasure. I am happy to help. :)
By Will on
4/29/2009 |
I forgot another tip... Consider this line item #8:
8. Any script that needs to be run at page load, wrap inside of a ready function. This prevents any conflicts from happening either with the Microsoft scripts, or the DNN Client API.
jQuery(document).ready(
function() {
/* your code here */
}
);
By Will on
5/5/2009 |
Great tips, thanks for the help.
By Surge on
7/10/2010 |