Self Hosting jQuery & jQuery UI files

Self Hosting jQuery and jQuery UI files

mojoPortal content management system 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 CMS 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, when extracted I have sub folders:
  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:

    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. 

Combining the jQuery UI CSS with Your Other CSS

If you self host the jQueryUI files you might consider integrating the CSS into your skin so that it can be combined and minified to improve page speed and reduce the number of http requests. Actually you could load the javascript from the CDN but just locally host the CSS by adding it to your skin. You can put the jQuery UI CSS file and supporting images in a sub folder of your choosing and then add it by configuration from the style.config file. Then you would set this property on the <portal:StyleSheetCombiner control in your layout.master so that it won't add the no longer needed extra style link for the the jQueryUI CSS.


However, for this to work correctly with our CSSHandler that does the combining and minifying of the CSS, you will need to edit the CSS file for jQueryUI.

Any place where you see background image urls like this example:

.ui-widget-overlay { background: #eeeeee url(images/ui-bg_diagonals-thick_90_eeeeee_40x40.png) 50% 50% repeat; opacity: .80; filter:Alpha(Opacity=80); }

You would need to add single quotes around the image url, and if it has the filter:Alpha(Opacity=80); or any variation of that it will throw off our combiner, so the solution is to move that to a different line so that it is not in the same style rule as the image. So the solution for the above would be to change it like this:

.ui-widget-overlay { background: #eeeeee url('images/ui-bg_diagonals-thick_90_eeeeee_40x40.png') 50% 50% repeat; opacity: .80; }
.ui-widget-overlay { filter:Alpha(Opacity=80);}

that will make it work correctly with our CSS handler.

Last Updated 2011-07-04

Monetize Your Site With Site Membership Pro!