The Mighty Blog

jQuery Tips for DotNetNuke Developers

Apr 28

Written by:
4/28/2009  RssIcon

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.

  1. 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]
  2. 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.
  3. Always call the jQuery core methods using the jQuery() format.  This is related to the previous issue.
  4. 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();.
  5. 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.
  6. 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.
    Host > Host Settings > jQuery Settings > Use Hosted jQuery Version
  7. 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.
    Host > Host Settings > jQuery Settings > Use jQuery Debug Version
  8. 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.

Technorati Tags: ,,,

Tags:
Categories: DotNetNuke

9 comment(s) so far...


Gravatar

Re: jQuery Tips for DotNetNuke Developers

Great post! Thanks for your help Will

By Gaz on   4/29/2009
Gravatar

Re: jQuery Tips for DotNetNuke Developers

Great tips Will. Thanks.

Dax

By Dax Davis on   4/29/2009
Gravatar

Re: jQuery Tips for DotNetNuke Developers

Good tips thanks for those

By Dylan Barber on   4/29/2009
Gravatar

Re: jQuery Tips for DotNetNuke Developers

It is of course my pleasure. I am happy to help. :)

By Will on   4/29/2009
Gravatar

Re: jQuery Tips for DotNetNuke Developers

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
Gravatar

Re: jQuery Tips for DotNetNuke Developers

Great tips, thanks for the help.

By Surge on   7/10/2010
Gravatar

Re: jQuery Tips for DotNetNuke Developers

Hi Will,
Can you please help me with the following:
How could I "call" a jquery script from code? I'm trying to do the following: A realestate module with two asp:panels one for the list and one for the details. In the details panel I have a Ligtbox gallery (something similar but more basic than your module), and the module has "Supports partial rendering" set to true. So, when you click a realestate, the panel 1 hides, the panel 2 populates and shows. The problem is that in this case the lightbox doesn't work. When I do that with two controls in a module communicating with IMC the Lightbox works but I loose the AJAX funcionality.
Thank you.

By Kristian Radolovic on   12/15/2011
Gravatar

Re: jQuery Tips for DotNetNuke Developers

@Kristian: It sounds like your required jQuery or JavaScript code is not loaded either before or after the panels are shown. I would suggest either having the required code loaded regardless to which panel is showing, or load the script dynamically through jQuery.getScript(). If you use a standard SCRIPT tag with panels, it is likely that the browser is unaware that the script appeared in the markup.

By Will on   12/15/2011
Gravatar

Re: jQuery Tips for DotNetNuke Developers

Making jscript and jquery twitter widget scripts to work in IE

Ok, I am trying to implement a working Twitter Feed widget on a DNN website. I went and found

two different scripts, and put them into a container skin inside of a tag toward the bottom of the container skin.

#1 In a nutshell, the first twitter feed script:











jQuery(document).ready(function(jQuery) {
$.getScript('http://widgets.twimg.com/j/2/widget.js', function() {
otweet = new TWTR.Widget({
id: 'widget-twitter-inner',
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 'auto',
height: 300,
theme: {
shell: {
background: '#3f67a3',
color: '#fafafa'
},
tweets: {
background: '#faf2fa',
color: '#061859',
links: '#219de0'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('xxxUser').start();

})
})






#2 In a nutshell the second twitter feed script:











new TWTR.Widget({
id: 'innerdiv',
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 'auto',
height: 300,
theme: {
shell: {
background: '#3f67a3',
color: '#fafafa'
},
tweets: {
background: '#faf2fa',
color: '#061859',
links: '#219de0'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('xxxuser').start();
document.getElementById('innerdiv').click()

With the Script #1, sometimes the twitter feed box loads properly, but sometimes it loads in a wierd incomplete way, and page hangs with a "one item remaining" message.

The feeds are there, but the box is not completely loaded, AND the browser continues to "LOAD" for over 60 seconds or even forever.

Other times, the twitter box does load completely. It is easy to get the twotter box to complete loading by just clicking anywhere on the screen. The box is on all pages, and changes pages will now display a correct twitter box.

With Script #2, on the HOME page, the twitter box always loads completely, and there is no "one item remaining" hang. However, when we navigate to other pages, the twitter box is incompletely rendered, though again there is no "one item remaining" hang. In this case the box can always be rendered completely by doing a page refresh. But navigating between pages results in the incomplete box.

SO far, all of these tests were in IE 7 or IE 8 Browser

Questions:

1. What is going on? Is there any way in Dot Net Nuke to get the first script to reliably load the box, or the 2nd script to render the box correctly on all pages? Perhaps there is only a simple setting somewhere.

2. Is there a web source for javascript or jquery scripts that load Twitter feed boxes that also WORK with Dot Net Nuke?

Thanks,

Richard



By Richard Folden on   1/11/2012

Your name:
Gravatar Preview
Your email:
(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Add Comment   Cancel 
Add to Technorati Favorites
Tweet about my blog
The opinions expressed here are the personal opinions of Will Strohl and do not necessarily represent the views and opinions of the DotNetNuke Corporation.
© Copyright 2004-2011 by Will Strohl. All rights reserved. Website Skinned By: Ralph Williams  Website Hosted By: Applied Innovations