How jQuery Resources Hotlinking will Affect your Applications

Tweet

The jQuery team had made an announcement that hotlinking will be disabled from January 31, 2011. Let us see how this decision will this impact our applications if you are still hotlinking (hotlinking is bad).

In order to improve the performance and availability of our sites for all users, we have disabled hotlinking to images across our entire network. We will be disabling hotlinking to all other types of content (such as CSS and JavaScript) at the end of January. If your site is hotlinking to jQuery domains other than code.jquery.com, please be aware that you must update your site before this deadline or it will stop functioning normally.

So you should always download the script and resources to your server or use the ones hosted on the CDN. Read my post Latest jQuery and jQuery UI Theme links on Google and Microsoft CDN

Let us take the example of the jQuery UI Theme switcher widget and remove hotlinking in it.

Let’s say you have an application that uses the jQuery UI Theme switcher widget to stylize your controls. Up till now, developers (including me for demos) have been hotlinking to the script and resource file directly using the link http://jqueryui.com/themeroller/themeswitchertool/

Since hotlinking has been disabled, your widget will not show any thumbnail images anymore. What you will get is a HTTP 403 forbidden error

Firebug confirms the 403 Forbidden message:

The solution is to download the theme switcher JavaScript code and images to your own server and modify the code to point to the images, you just downloaded.

Follow these steps:

Step 1: Create a folder called Script and download the theme switcher file. Rename the file to themeswitchertool.js. Remove/Replace the earlier reference and add a reference to this script file in your application

<script src="Scripts/themeswitchertool.js" type="text/javascript">

Step 2: Create a folder called ‘images’ and download the images to this folder. You can get the image names using Firebug as shown above.

Step 3: Now open the themeswitchertool.js file and find the references to the theme roller images in them. Remove the hotlinking by replacing the image url’s and pointing them to the images you just downloaded, as shown below:

That’s it. You should now see the images showing up in the theme switcher widget

Tweet

About The Author

Suprotim Agarwal, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal.