jQuery Load Script Once onClick

Question

I am trying to load 2 scripts in jquery only once a #element is clicked. Currently, I am trying to use:

    jQuery("#element").click(function () {
       jQuery('#elementcontainer').load('/js/jquery.script.js');
       jQuery('#elementcontainer').load('/js/jquery.script2.js');
    });

The problem is that the scripts load everytime the #element is clicked. I only want the scripts to load once - and currently they also make like this

"http://127.0.0.1/pck/Js/jquery.script.js?_=1279101767931"

How can I load the scripts ONLY once and stop the non-cache. I am using ASP.NET MVC ?

Thx

Nick Craver · Accepted Answer · 2010-07-14 12:36:46Z

9

You can use one() like this:

jQuery("#element").one('click', function () {
   jQuery('#elementcontainer').load('/js/jquery.script.js?' + (new Date().getTime()));
   jQuery('#elementcontainer').load('/js/jquery.script2.js?"' + (new Date().getTime()));
});

.one() executes the event handler exactly once, the Date() piece is for the cache. I'm no sure you want .load() though, if your intent is just to get/execute the scripts, then $.getScript() is more appropriate, like this:

jQuery("#element").one('click', function () {
   jQuery.getScript('/js/jquery.script.js');
   jQuery.getScript('/js/jquery.script2.js');
});

$.ajax() requests of dataType = "script" (which $.getScript() is) won't be cached.

If you want to cache, you have two options, you can use $.ajaxSetup() once (but this affects all subsequent $.ajax() or shorthand calls):

$.ajaxSetup({ cache: false });

Or make the full $.ajax() call version that $.getScript() is short for:

jQuery("#element").one('click', function () {
   jQuery.ajax({ url: '/js/jquery.script.js', dataType: 'json', cache: true });
   jQuery.ajax({ url: '/js/jquery.script2.js', dataType: 'json', cache: true });
});

edited Jul 14, 2010 at 12:36

answered Jul 14, 2010 at 12:23

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Tom Over a year ago

ok cool thx so much ill give this a try now :) can I just replace the .load with .getscript ? also I want the scripts to cache. current they add the ?_=2312312312 but I don't want them too ?

Nick Craver Over a year ago

@Tom - Yup, I added an example...if you look at your console, getscript will add the time to the querystring under the covers, it happens here: github.com/jquery/jquery/blob/master/src/ajax.js#L269

Nick Craver Over a year ago

@Tom - They need to add that...that's how they instruct the browser not to cache, otherwise IE in particular will hold onto them.

Sarfraz Over a year ago

@Nick Craver: +1 for that caching thing, noobs run into problems as they don't know requests being cached in those cases.

Tom Over a year ago

hey thanks so much nick - if I want to cache the scripts ? can I do this with the above code ? i.e. currently the ?=2312312 is added but I would prefer they were cached ?

|

Bogdan Constantinescu · Accepted Answer · 2010-07-14 12:23:19Z

0

This will do the trick:

  jQuery("#element").click(function () {
       jQuery('#elementcontainer').load('/js/jquery.script.js');
       jQuery('#elementcontainer').load('/js/jquery.script2.js');
       jQuery(this).unbind('click');
    });

Note the unbind() method called on $(this) (which is the element #element). You can check more unbind() functionality here.

answered Jul 14, 2010 at 12:23

Bogdan Constantinescu

5,3864 gold badges42 silver badges51 bronze badges

Collectives™ on Stack Overflow

jQuery Load Script Once onClick

2 Answers 2

9 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related