Downloaded 27 times
Uploaded byEngage Software
Considerations with Writing JavaScript in your DotNetNuke site
The document details best practices for writing JavaScript within a DotNetNuke (DNN) site, focusing on the integration of jQuery and ASP.NET AJAX. It emphasizes JavaScript safety techniques, management of variable scopes, and maintaining clean code through modular patterns. Additionally, it provides guidance on including JavaScript correctly, using client script managers, and addresses common jQuery version concerns.
More Related Content
![Fundamentals of Extending Magento 2 - php[world] 2015](https://cdn.slidesharecdn.com/ss_thumbnails/talk2-fundamentalsofextendingmagento2-151120140930-lva1-app6892-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Considerations with Writing JavaScript in your DotNetNuke site
![[BDD 2025 - Mobile Development] Exploring Apple’s On-Device FoundationModels](https://cdn.slidesharecdn.com/ss_thumbnails/md-exploringappleson-devicefoundationmodels-251124030840-d690542c-thumbnail.jpg?width=640&height=640&fit=bounds)
![[BDD 2025 - Mobile Development] Mobile Engineer and Software Engineer: Are we...](https://cdn.slidesharecdn.com/ss_thumbnails/md-mobileengineerandsoftwareengineerarewestillrelevantsidiqpermana-251127010650-55224ef1-thumbnail.jpg?width=640&height=640&fit=bounds)
![[DevFest Strasbourg 2025] - NodeJs Can do that !!](https://cdn.slidesharecdn.com/ss_thumbnails/devfeststrasbourg2025-nodejscandothat-251127142731-da65b6fd-thumbnail.jpg?width=640&height=640&fit=bounds)
![[BDD 2025 - Artificial Intelligence] Building AI Systems That Users (and Comp...](https://cdn.slidesharecdn.com/ss_thumbnails/ai-buildingaisystemsthatusersandcompanieslove-251124030845-038f7732-thumbnail.jpg?width=640&height=640&fit=bounds)
Considerations with Writing JavaScript in your DotNetNuke site
- 1. Writing JavaScript InYour DotNetNuke ® Site Brian Dukes, Engage Software
- 2.
- 3. Brian Dukes EngageSoftware since 2006 Chief Software Architect in charge of Module Development Microsoft Certified Professional Developer
- 4. Agenda -jQuery - ASP.NET AJAX - JavaScript Safety - Including JavaScript
- 5. jQuery - included?Core - IconBar - Skin Widgets - Telerik ( Telerik.Web.CommonScripts.$ ) Modules - Console - Dashboard - Sitemap settings - Blog includes its own version - 3rd Party
- 6. jQuery - optionsDebug Hosted - Google CDN - jQuery UI - SWFObject - WebFont Loader - Use a specific version - Microsoft CDN - jQuery Validation
- 7. jQuery - versions/Resources/Shared/scripts/jquery/jquery.min.js DNN 4.9.1 - 5.0.1 - jQuery 1.2.6 DNN 5.1.0 - 5.2.3 - jQuery 1.3.2 ( closest() , live() ) DNN 5.3.0 - present - jQuery 1.4.2 5.0.0 - API 5.2.3 - SSL (kind of) 5.4.2 - jQuery reference is earlier in the <head>
- 8. ASP.NET AJAX Guaranteedon the page starting in DNN 5.0 Use $find to interact with Telerik controls
- 9. JavaScript Safety -naming Naming collissions - keep exposed variable names to an absolute minimum - don't expose overly generic variable names - company.module instead of module - keep scripts in separate files, create jQuery plugins - don't use $ for jQuery - use module pattern (function ($) { $(function () { // do stuff }); }(jQuery));
- 10. JavaScript Safety JSLint - catches easy-to-miss issues - accidental global variables - Douglas Crockford's JavaScript: The Good Parts jQuery Plugins - http://www.learningjquery.com/2007/10/a-plugin-development-pattern - Engage: Tell-a-Friend
- 11. How to IncludeJavaScript Inside <script> tag - Duplicated for each instance of the module - Less reusable - Less maintainable ClientScriptManager - RegisterStartupScript - RegisterClientScript - Script Ordering... Widgets - http://www.kalyani.com/tag/widgets/ Telerik OnClient...
- 12. Avoid Inconsistencies andFrustration jQuery
- 13. Questions? Commit toDotNetNuke's Stack Exchange: http://bit.ly/dnn-se
Editor's Notes
- #2 Whether you want to take advantage of jQuery, ASP.NET AJAX, or just plain JavaScript, come learn the rules and guidelines for taking advantage of JavaScript within your DotNetNuke site. We'll talk through considerations for enhancing your content, skins, and modules, the best ways to include JavaScript behaviors, and some ways to avoid inconsistencies and frustration.
- #6 While it may be tempting to think that jQuery is just always on the page, that you don't have to think about it, that's not quite the case. The main reason that you see it on the page is that the Enable Skin Widgets option is checked in the Site Settings. If you turn that off jQuery will only be loaded when something requests it. If you're logged in, you may think that it's still there, but that's because the (older) IconBar control panel requests it. Once you logout, jQuery is only on the page if a module on the page requests it. To do that, call DotNetNuke.Framework.jQuery.RequestRegistration() from your module, skin, skin object, etc.
- #7 In the host settings, there are a few options in terms of how jQuery gets included on the page. You can reference the Debug version, if you're a developer (though, in general, I don't think that'll get you much benefit). You can also use a hosted version of jQuery. The two big options for that are the Google CDN and Microsoft's CDN. The benefit of using a CDN is that most people will already have a cached version of the file when they get to your site, so they won't need to have to latency induced by that initial download. For this reason, I recommend the Google CDN, since the Microsoft CDN isn't nearly as widely used. Google also allows you to specify a partial version of the script (meaning, you reference version 1.4 to get the latest version of the 1.4 script). However, because this could serve up different scripts, Google does not instruct the browser to cache the script for a long time using this method. Thus, the main benefit of the CDN is lost if you don't reference a specific version of jQuery, It also hosts some other interesting scripts, though that shouldn't strongly affect your decision to use it or not.
- #8 In DNN 5.0, the DotNetNuke.Framework.jQuery class was introduced to handle requesting jQuery on the page. In DNN 5.2.3, DNN started switching the protocol of a hosted jQuery script from http to https if it was used on a secure page. This works for the Google CDN, but not necessarily for CDNs. In DNN 5.4.2, the reference to jQuery was moved higher in the page, to cause less conflict with scripts that depend on it.
- #9 ASP.NET AJAX is guaranteed to be on the page since DNN 5 (via a ScriptManager control). This enabled UpdatePanels, ASP.NET AJAX Control Toolkit controls (which have been deprecated), as well as just the JavaScript libraries themselves. The main place you might run into needing to use ASP.NET AJAX is when interacting with Telerik controls via the $find method.
- #10 The main difficulty with JavaScript is that it is very easy for one person's code to interfere with another's, via naming collisions. Be careful about your scripts, make sure that you write your scripts inside of a function (providing a scope for any variables you create), consider writing your scripts in separate files, to ensure modularity.
- #11 Run your scripts through JSLint (jslint.com) to catch errors that are easy to slip up on. It is very strict, to help you be careful. Read JavaScript: The Good Parts to get a better understanding of some of the issues it raises. Look at examples of how to write jQuery plugins.,
- #12 Including JavaScript in a <script> tag in your .ascx control is easy, but it also makes it hard to reuse and maintain your code. It's also duplicated for each instance of your module on the page. Using the ClientScriptManager (via Page.ClientScript) manage your script references make it something you don't have to think much about. However, it doesn't handle script order dependencies. If you have multiple scripts that are dependent, consider (1) combining (and minifying) them, (2) using jQuery.getScript to load them dynamically, (3) sending ClientScriptManager.RegisterStartupScript multiple script tags to register at once. Widgets are a way for non-technical end-users to embed JavaScript in content (i.e. HTML module or similar) via an HTML construct, instead of JavaScript. Something to consider... Telerik controls require the name of a function in order to handle client-side events, so this is a case where you can't easily hide your script from other modules, or use a separate script. There are workarounds, but they're not as simple, and not the sort that Telerik gives many examples for.
- #13 The biggest way that you can avoid inconsistencies in your scripts is to always use jQuery when dealing with the DOM. Even when you think something is simple, it's probably not quite as simple are you expect it to be (at least in IE 6, or some other, obscure browser). Jquery's purpose is to handle those inconsistencies, so let it.
- #14 If you're interested in an excellent platform for DNN Q&A, consider committing to being a part of the DotNetNuke Stack Exchange proposal. I honestly believe it will revolutionize how we help each other and get helped when developing, integrating, and maintaining DNN sites.