green field

Self Hosting jQuery and jQuery UI files

mojoPortal should work fine out of the box for most intranets as long as your users also have internet access. If your users don't have internet access but only have access to the intranet, then you need to configure a couple of things differently to make your mojoPortal site work correctly.

The issue is that we use jQuery and jQueryUI with mojoPortal, but we no longer ship the javascript with mojoPortal because it makes our download a lot bigger, and in most installations its works best and is a best practice to load the javascript from the Google CDN (Content Delivery Network). All that means is we load the javascript from a google url instead of hostiong the files within the mojoportal installation. This is a best practice because it saves some load on your own servers and because the same files can be cached in the browser for any sites that use the google CDN. But if the internet is not avalable to all the users, then you need to host the files yourself. Developers may also want to do this if they find themselves working frequently without internet access on their development machines. If you are working while flying on a plane for example you may not have access to the internet and it may be hard to test your mojoportal projects unless you download and configure jQuery and jQueryUI on your machine when you do have internet access so you can use them when you don't.

So I will here outline the steps to install the jQuery and jQueryUI files within our mojoPortal installation to help you resolve this issue if it applies to you.

  1. In your Web.config or ideally in your user.config set this to false:
    <add key="UseGoogleCDN" value="false" />
     
  2. Download jQuery, as of this writing the latest version is 1.4.2, so I create a folder /ClientScript/jquery142 and I download the jQuery file, it came down as jquery-1.4.2.min.js
     
  3. Put it in the folder and renamed it to jquery.min.js
     
  4. Set the correct path in this config setting:
    <add key="jQueryBasePath" value="~/ClientScript/jquery142/" />
     
  5. Download the jQuery UI files (version 1.8.2 as of this writing) and put the js folder beneath /ClientScript/ and rename it to jqueryui182, replacing the 182 with whatever the latest version of jQuery UI it is. Select everything and choose a theme (you can download more themes later). Unzip the zip file, for me the file came down as jquery-ui-1.8.2.custom.zip, when extracted I have sub folders:
    css
    development-bundle
    js
     
  6. Create a folder /ClientScript/jqueryui182 and a sub folder /ClientScript/jqueryui182/themes
     
  7. from the js folder in the download, copy the file jquery-ui-1.8.2.custom.min.js and put it in the /ClientScript/jqueryui182 folder
     
  8. Rename the file jquery-ui-x.x.x.custom.min.js to jquery-ui.min.js
     
  9. From the css folder of the download copy any subfolder(s), in my case there was a folder named ui-lightness, and paste it into the /ClientScript/jqueryui182/themes folder. So for me it landed at /ClientScript/jqueryui182/themes/ui-lightness
     
  10. Inside the theme folder will be a file named jquery-ui-1.8.2.custom.css, rename it to jquery.ui.all.css
     
  11. Then configure this setting with the appropriate path:
    <add key="jQueryUIBasePath" value="~/ClientScript/jqueryui182/" />
     
  12. You may need additional themes, the jQueryUI theme used for a mojoPortal skin is determined by the setting:
    JQueryUIThemeName="ui-lightness" on the <portal:StyleSheetCombiner control located in the layout.master file of a mojoPortal skin.
    You can download additional skins from the Gallery tab on: http://jqueryui.com/themeroller/

    You can also design your own custom themes on the above linked page. Note that the named themes in the Gallery are available from the Google CDN, but if you roll your own then you must host the files locally.

That should be all you need to do to host the jQuery and jQueryUI files locally. 

Last Updated 2010-05-14

Custom Skinning by Joe Davis Your advertisement here Nominate mojoPortal for the 2010 CMS Awards
Give your site more mojo! Your advertisement here mojoPortal User Group on Yamisee