Loading scripts using jQuery

Question

$.ajax({ url: "plugin.js", dataType: 'script', cache: true, success: function() {
    alert('loaded');
}});

1) I can't get the script to load, probably due to incorrect path, but how do I determine the correct path? The above code is in init.js, plugin.js is also in the same folder.

2) Can I load multiple plugins at once with the same request? eg. plugin.js, anotherplugin.js?

root
|
|_ html > page.html
|
|_ static > js > init.js, plugin.js

Thanks for your help

score 5 · Accepted Answer · answered May 21 '10 at 04:27

5

You need to use getScript, not ajax. Ajax is for loading data, not for executing code.

If you need to load multiple files, try something like this:

var scripts = ['plugin.js', 'test.js'];
for(var i = 0; i < scripts.length; i++) {
  $.getScript(scripts[i], function() {
    alert('script loaded');
  });
}

answered May 21 '10 at 04:27

Ben Rowe

28,406
6
55
75

17

From the docs: `getScript` is shorthand for `$.ajax({ url: url, dataType: 'script', success: success });`, so there's nothing wrong with using `.ajax`, it's just a bit more verbose. – Alconja May 21 '10 at 04:32
3

I'm using .ajax specifically for asynchronous caching (cache: true). – eozzy May 21 '10 at 04:36

Alconja · Answer 2 · 2010-05-21T04:32:46.410

3

1) The path will be relative to the page it's loaded from (not the path of your init script) since that's the url the browser will be at when it executes the ajax request.

Edit: Based on your edit, the path to load your script from is either /static/js/plugin.js (if it'll be deployed at the root of your domain), or ../static/js/plugin.js to be safe (assuming all pages that it'll be loaded from will be in /html).

2) No. If they're in different files, they'll need to be different requests. You could merge them into one file on the server-side though...

edited May 21 '10 at 04:32

answered May 21 '10 at 04:22

Alconja

14,834
3
60
61

Thanks, I've edited the desc to show the structure, can you help find the path? Thanks! – eozzy May 21 '10 at 04:27
Tried both /static/js/plugin.js and /static/js/plugin.js but it still won't load. Any other way of cross-checking? – eozzy May 21 '10 at 04:39
First try loading the file directly in the browser, it should work at `http:///static/js/plugin.js`. Assuming the file is where you expect & that works, try installing [firebug](http://getfirebug.com/) and watch the Net panel when the ajax request is fired to see the actual URL being requested and to see what the response is... – Alconja May 21 '10 at 04:45
Thank you! I didn't the the path was relative to the *page*, I'm new at jQuery and this was consuming a lot of time – Mari Faleiros Oct 24 '17 at 11:49

score 1 · Answer 3 · answered Mar 13 '13 at 16:22

As an update, the better way to do this with jQuery 1.9.x is to use Deferreds-methods (i.e. $.when), such as follows:

$.when(
  $.getScript('url/lib.js'),
  $.getScript('url/lib2.js')
).done(function() {
  console.log('done');
})

The .done() callback function has a number of useful params.

Read the documentation: http://api.jquery.com/jQuery.when/

score 0 · Answer 4 · answered Nov 19 '14 at 10:53

You can use '../' to set the script path as base path. Then add the relative path for the

    $.getScript("../plugin.js").done(function(script, textStatus ) {
    alert("loaded:" + textStatus);
}).fail(function(script, textStatus ) {
    alert("failed: " + textStatus);
});

score 0 · Answer 5 · answered May 21 '10 at 04:26

0

Check out the jQuery .getScript function, which will load the script and include it in the current document.

1) The path should be /static/js/plugin.js, relative to your document.

2) No. Each file is loaded by a single HTTP request.

answered May 21 '10 at 04:26

Emil Vikström

90,431
16
141
175

Tried both /static/js/plugin.js and /static/js/plugin.js but it still won't load. Any other way of cross-checking the path? – eozzy May 21 '10 at 04:39
1

Use Firefox when developing. Install Firebug (plugin) which is free. Inside that, activate all "debug panels" and place a "breakpoint" where you need to stop the javascript. Then you can mouse-over on the active variables and read their current value. Quite nice! – BerggreenDK Jul 14 '10 at 03:04

score 0 · Answer 6 · answered May 21 '10 at 04:27

I would check Firebug's net tab to see if it was loaded correctly, and the path it is trying to load from.

The path will be from the document where the JavaScript was included.

I also keep a config object like this (PHP in this example)

var config = { basePath: '<?php echo BASE_PATH; ?>' };

Then you could do

var request = config.basePath + 'path/to/whatever.js';

Loading scripts using jQuery

6 Answers6

Linked