1

Please see example below. How do I call my function from within the loaded file?

Here is my external file, loaded with ajax:

// some-file-name.js
var api = {
    method1: function() {
        // doStuff here
    }
}

Here I am loading the file and hopefully invoking some function from the new methods provided:

// load script and do stuff with it when done
$.when(
   $.getScript("some-file-name.js"), 
   $.Deferred(function(deferred) {
       $(deferred.resolve);
})).done(function() {
    // how to call api.method1() when api.method1() gives me undefined? 

});

Any suggestions much appreciated.

Iladarsda
  • 10,640
  • 39
  • 106
  • 170
  • This is a [FAQ](https://www.google.nl/search?q=load+jsfile+with+ajax) – mplungjan Feb 19 '14 at 16:48
  • possible duplicate of [jQuery: How do you synchronously load a script from another directory via an ajax call?](http://stackoverflow.com/questions/4539740/jquery-how-do-you-synchronously-load-a-script-from-another-directory-via-an-aja) – mplungjan Feb 19 '14 at 16:51
  • @mplungjan - I can load the scripts OK, but how do I call its methods? – Iladarsda Feb 19 '14 at 16:53
  • @mplungjan: Rather a duplicate of [jquery .getscript() callback when script is fully loaded and executed](http://stackoverflow.com/questions/14565365/jquery-getscript-callback-when-script-is-fully-loaded-and-executed) @ User789: You should offer a bounty there and close this question. – Bergi Feb 19 '14 at 19:52
  • Yeah I was on the phone - click the word FAQ in my first comment – mplungjan Feb 19 '14 at 22:08

1 Answers1

0
// 1. $.getScript returns a Promise, no need for custom deferred
// 2. access your response. The Promise passes the response to the 
//    success handler parameter

$.when(
   $.get("some-file-name.js"), // 1
).done(
    function(api) {  // 2
      console.log(api.method1);
    }
});
Elise Chant
  • 5,048
  • 3
  • 29
  • 36
  • 1
    -1: a) the custom deferred was used to wait for DOM ready, nothing else b) as stated, the callback does not work. The script might not yet have been executed. – Bergi Feb 24 '14 at 18:46
  • 1
    Oh, I have a very good idea. I even can read [the docs](http://api.jquery.com/jQuery.getScript/): "*The callback is fired once the script has been loaded but not necessarily executed*" If you know more, please tell us. – Bergi Feb 24 '14 at 20:01
  • a) wrap the statement in a $(document).ready({ }); b) $.getScript will return the script and execute it immediately, maybe with your requirement you should use $.get instead – Elise Chant Feb 24 '14 at 20:10
  • a) Which statement, the `console.log`? Yes, that could work as well, but there's nothing wrong with the OP's use of `deferred`. Btw, if you know that `$.ajax` returns a promise, `$.when` is superfluous. b) How would `$.get` help here? Wouldn't it *not* execute the script, so that `api.method` fails for sure? – Bergi Feb 24 '14 at 20:15
  • a) Yes $.ajax returns a promise, so yes technically you don't need $.when, i was following the syntax in your example. You would use $.when if you want to make multiple asynchronous calls ``$(document).ready(function() { $.get("some-file-name.js").done(function(api) { // access your file data in here, // try console.logging it so you can prove it exists api.method1(); }); });`` – Elise Chant Feb 24 '14 at 21:00
  • 1
    Please notice it's not my question :-) And No, in that snippet the ajax request would only start after DOM ready, which is not the intended behaviour. You could however do `$.get("…").done(function(resp) { $(function() { // do whatever we want api.method1(); }); })` – Bergi Feb 24 '14 at 21:09