jQuery getScript, FireBug And Caching

Recently in one of my projects I had a requirement of loading JavaScript files dynamically. It was then I took a look at the jQuery getScript method. At first it looked perfect for my requirement, however as I started using it for my project I realized there were two drawbacks with its default implementation.

1. There isn't any caching for the scripts loaded by getScript
2. Debugging these scripts in FireBug is quite difficult since FireBug cannot map the script code to the script filename

In this post, I am going emphasize on my experiences with getScript and how I got both it to work with both these requirements. I am sure people who are spending time to get these features working will find this useful.

To help me with this, I put up an example Visual Studio project available here. I used Visual Studio for comfort but any text editor will work since it is all about HTML and JavaScript.

Basic Example

Well, getScript is pretty easy to use. In its simplest form, all we have to do is provide it with the script name. Here's an example on how it looks.

But the interesting point is the way it works. Here's a screenshot in FireBug which show three calls being made to the server since getScript appends a random number to the server call causing the browser cache to fail. And the script debugger is also unable to recognize the script name.

Enabling Caching

Solving the caching issue was simple. Following the recommendation on the jQuery getScript documentation page, I setup AJAX caching using ajaxSetup as show below.

This worked well but the only problem that I noticed was that ajaxSetup was a global option and setting it there would make all AJAX calls cached which could mean trouble for the regular data calls we make. Fortunately the documentation page also had a solution for this. I wrote a new jQuery method using that solution as shown below.

Making getScript FireBug Compatible

At first I had had no clue on why this was happening. But thanks to the guys at TechMonks who wrote an absolutely brilliant article on this problem, I could get this fixed. In short the problem was because of how jQuery implements getScript wherein it uses AJAX to the script content and makes it inline. Do read the entire article here for more details.

Here is a code snippet which make getScript compatible with FireBug. The reason why this works is because it loads the JavaScripts files as external resources instead of making it inline and FireBug shows them in the debugging panel.

Internal Caching

The new firebugGetScript from TechMonks works great with FireBug and also facilitates browser caching. However I had one more issue with it. My web application was completely dynamic and had to load a lot of scripts on the fly. Because of this there were scenarios where I was calling the same script through firebugGetScript. However the method wasn't smart enough to recognize this and added the script element multiple times.

I added the ability to recognize this and changed the code to the following.

And things looked perfect with this. I have been using this for quite some time in two different web applications and it's working as expected.

That's it for this post, hope the next time isn't as far away as this ;)