SwissChecklist

Checklist: Include jQuery in DotNetNuke Skin

This checklist describes how to include jQuery within a DotNetNuke skin. It loads only if jQuery is not already included i.e. by a module.
  • Create "jQuery.js" in /Js folder within skin root

    Show Details Show Substeps Show Substeps Show Substeps
  • Include this file in your skin on top of the head (before other javascript files)

    Show Details Show Substeps Show Substeps Show Substeps
    example of include javascipt in head:

    <script runat="server">
     Protected Overrides Sub OnLoad(ByVal e As EventArgs)
      MyBase.OnLoad(e)
      AttachCustomHeader("<link href='" + SkinPath + "css/Standard.css' rel='stylesheet' type='text/css' />")
      AttachCustomHeader("<link href='" + SkinPath + "css/patches/PatchDnn.css' rel='stylesheet' type='text/css' />")
      AttachCustomHeader("<!--[if lte IE 7]><link href='" + SkinPath + "css/patches/PatchStandard.css' rel='stylesheet' type='text/css' /><![endif]-->")
      AttachExternalJS(SkinPath+ "/js/scripts.js")
     End Sub

     Sub AttachExternalCSS(ByVal CSSPath As String)
      AttachCustomHeader("<link type='text/css' rel='stylesheet' href='" & CSSPath & "' />")
     End Sub
     
     Sub AttachExternalJS(ByVal JSPath As String)
      AttachCustomHeader("<script type='text/javascript' src='" & JSPath & "'></scr" & "ipt>")
     End Sub
     
     Sub AttachCustomHeader(ByVal CustomHeader As String)
      Dim HtmlHead As HtmlHead = Page.FindControl("Head")
      If Not (HtmlHead Is Nothing) Then
       HtmlHead.Controls.Add(New LiteralControl(CustomHeader))
      End If
     End Sub
    </script>
  • New Step

    Show Details Show Substeps Show Substeps Show Substeps
  • Add following script that will only add jQuery if it's not included already (i.e. by a module)

    Show Details Show Substeps Show Substeps Show Substeps
    function initJQuery() {
      //if the jQuery object isn't available
      if (typeof(jQuery) == 'undefined') {
      
        if (typeof initJQuery.jQueryScriptOutputted == 'undefined') {
          //only output the script once..
          initJQuery.jQueryScriptOutputted = true;
      
          //output the script (load it from google api)
          document.write("<scr" + "ipt type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js\"></scr" + "ipt>");
        }
        setTimeout("initJQuery()", 50);
      } else {
        (function ($) { // CLOSURE -> save to use $
          $.fn.foo = function (input) {
            alert("foo:" + input);
          };
        })(jQuery);
      }
      
      window.onload = function () {
      
      }
    }
    initJQuery();
  • Include plugins below the file jQuery.js

    Show Details Show Substeps Show Substeps Show Substeps
  • New Step

    Show Details Show Substeps Show Substeps Show Substeps
Use this Checklist

Preview/Print

Use

Change

Sort