Sunday, March 31, 2013

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 ;)

34 comments:

ruby on rails developer said...

Valuable post regarding jquery scripting. I love to read your blog because which is pond of knowledge.

Anonymous said...

Thank you for a great article, it clarified a lot of things for me

Hariharan s said...

Hi, Nice post in jquery to getscript,FireBug and caching

-Hari
Theosoft

Sqiar BI said...

SQIAR http://www.sqiar.com/services/data-warehousing/ is a leading Business Intelligence company and provides Data Warehousing Services in United Kingdom and USA.

Harry Parker said...

great post you have done here. i wish you to check Sky Customer Service Contact Number

soniya rawat said...

very nice post, thank you for posting this.
for Latest Tech News check my blog Latest News Update 24x7.

Reset hotmail password said...

thanks, your post very Nice and Great. It is very helpful for me. I wish you to check Reset Hotmail password

friv4 said...

This article is really fantastic and thanks for sharing the valuable post.
games2girls 2

juegos de frozen said...

Hello, just wanted to say, I loved this article. It was practical.
Signature:
download descargar facebook gratis para Android celular and download free descargar facebook apk en español, descargar facebook plus , descarga facebook

Whatsapp Descargar said...

Posts shared useful information and meaningful life, I'm glad to be reading this article and hope to soon learn the next article. thank you
Signature:
download free descarga Whatsapp and download whatsapp baixar online and descargar whatsapp , baixar whatsapp

baixar facebook movel said...

Thanks for sharing your info. I really appreciate your efforts and I will be waiting for your further write
Signature:
Jugar juegos de frozen en línea gratis, los nuevos de princesa de Disney juegos frozen - la princesa encantadora y linda. Divertirse frozen!

iniciar sesion facebook entrar said...

Thanks for sharing the information. It is very useful for my future. keep sharing
Signature:
facebook iniciar sesion gratis - Sitio Oficial iniciado sesión en Facebook lengua española. facebook inicio sesion rápido, facebook iniciar sesion en tu cuenta de entrar facebook

Anh Mai said...

Thanks for all your information, Website is very nice and informative content.
Signature:
Versión en facebook en español descargar a los países hablan Español: facebook entrar direto agora , facebook en español descargar , facebook entrar direto agora

Mít Trang said...

This is also a very good post which I really enjoyed reading. It is not everyday that I have the possibility to see something like this.
Signature:
download baixar facebook movel, Facebook movel, baixar facebook. Facebook chat, baixar whatsapp, fazer o download baixar whatsapp gratis para Android, iPhone. Últimas Facebook

games unblocked said...

Thanks for sharing your info. I really appreciate your efforts and I will be waiting for your further write
Signature:
The place to play all unblocked games at school online. Here you can find every blocked games such as: unblockedgames , unblocked games happy , unblocked games 77 , Gmod Free

Shariq Waseem said...

http://b2bad.in/Packers-and-Movers-in-Delhi/ @ Movers and packers in Delhi http://b2bad.in/Packers-and-Movers-in-Delhi/ @ Delhi packers and movers

games unblocked said...

Its really good information, i like your blog post. Thanks for sharing
kids games , friv2 , jogos de friv , juegos.com , juegos de matar zombbies
, juegos de un show mas

Juegos De Terror said...

Today, I read post.... thank u for sharing.
Thanks u so much.
run 3 game
football heads
juegos de terror online
mahjong games
Cool math 4 kids

Friv4 Games Online said...

I found a lot of information here to create this actually best for all newbie here. Thank you for this information.
Signature:
i like play games play happy wheels online and play happy wheels unblocked full and Download retrica online includes more than eighty different filters with many different styles and include retrica indir , and zombie tsunami is the ideal game for anyone who loves the running game genre

Jennifer Lupex said...

An exceptionally instructive site. The way you have offer this data is truly extremely grateful. Would like to see more on this point here. A debt of gratitude is in order for posting this data here.
top b tech colleges in india

Regina Hilary said...


this is one of the cult game now, a lot of people enjoy playing them . Also you can refer to the game :
age of war | earn to die 5 | Tank trouble | happy wheels | earn to die 6
The game controls are shown just under . Movement mechanisms primarily include acceleration and tilting controls.
tank trouble unblocked | wings io | strike force heroes

Alice Denny said...

I was working and suddenly I visits your site frequently and recommended it to me to read also. Age Of War 2
Big Farm | Slitherio
Tank Trouble | Happy Wheels
Goodgeme Empire | Slither.io

Naviya Nair said...

I have read your blog its very attractive and impressive. I like it your blog.

.Net Training in Chennai | .Net Online Training | Dot Net Training in Chennai

Dot Net Online Training | LINQ Online Training

Mark Smith said...

Rolex Watches Authentic Mens & Ladies Rolex Datejust, President Watches for Sale at JavyEstrella.com.

hường lê said...

Such a very useful article. Very interesting to read this article.I would like to thank you for the efforts you had made for writing this awesome article.

Discover our website bounty of free online games now!
Our website has the biggest collection of free online games. Totally new games are added every day!

age of war 2| gold Miner 2| unfair Mario 2 | cubefield 2 |tanki Online 2


vinu priya said...

Learning new technolgy would help oneself at hard part of their career. And staying updated is the only way to survive in current position. Your content tells the same. Thanks for sharing this information in here. Keep blogging like this.
iOS App Development Company in India

Thamizharasi J said...

wow its great thing and wish to you do more level of things and i am waiting to get your new ideas. keep share more things.
IELTS Coaching in Chennai

Sindhuja Ravi said...

Thank you for taking the time to provide us with your valuable information. We strive to provide our candidates with excellent care and we take your comments to heart.As always, we appreciate your confidence and trust in us
Digital Marketing Company in India

Randeep Kashyap said...

Freelance Best Makeup & Hair Artist in Jaipur with huge experience and Specialization in Bridal and Wedding Makeup,Celebrity Makeup,Professional Makeup,Creative Makeup,Bollywood Makeup..
Fiza Makeup Academy
Fiza Makeup and  Hair Artist
Wedding Makeup Artist in jaipur
 Bridal Makeup Artist in jaipur
 Professional Makeup Artist in jaipur
 Hair and Makeup Artist injaipur
Celebrity Makeup Artist injaipur
Creative Makeup Artist injaipur
Bollywood Makeup Artist in jaipur
Character Makeup Artist in jaipur

Drag Racer V3 said...

That's so nice. Thanks! dragracerv3game.com

games draw said...

Many thanks for sharing friv4schoolonline.net

Alice Taylor said...

Thanks for sharing this quality information with us. I really enjoyed reading.

http://lennyfacetext.com

Love Kpop said...

I'm puzzled with lots of exercises. I was afraid I could not do the right time despite my hard work. I need a support person.
http://run3play.com

Thu Lê said...

I was very impressed by this post, this site has always been pleasant news. Thank you very much for such an interesting post. Keep working, great job! In my free time, I like play game: vex3game.com. What about you?