CODEWITHSUNDEEP
jquerygetscript
Green Grasso Holm
Green Grasso Holm

Reputation: 705

jQuery getScript not working, or I'm using it wrong

I'm having trouble getting jquery's $.getScript to work. Here's a test file, demo.html:

<!DOCTYPE html>

<script src="/xyz/scripts/jquery-1.11.0.min.js"></script>
<script>
    function wow() { return 3; }
</script>

<h1>Demo</h1>

<script>
    console.log(wow);
    console.log(wow());
</script>

When I browse to this in Chrome on Windows 10, the following is displayed in the console:

Navigated to https://example.org/xyz/tools/demo.html
demo.html:11 ƒ wow() { return 3; }
demo.html:12 3

which is correct.

Then I move the function definition to a file called myModule.js:

function wow() { return 3; }

and create demo2.html, which is demo.html with the function definition replaced by a getScript call:

<!DOCTYPE html>

<script src="/xyz/scripts/jquery-1.11.0.min.js"></script>
<script>
    $.getScript("myModule.js");
</script>

<h1>Demo</h1>

<script>
    console.log(wow);
    console.log(wow());
</script>

This time I get

Navigated to https://example.org/xyz/tools/demo2.html
demo2.html:11 Uncaught ReferenceError: wow is not defined
at demo2.html:11

Am I misunderstanding what $.getScript is for or how it's used?

Addendum

In response to the suggestion to wrap my console.log calls in a $.ready wrapper, I tried the following:

<!DOCTYPE html>

<script src="/xyz/scripts/jquery-1.11.0.min.js"></script>
<script>
    $.getScript("myModule.js");
</script>

<h1>Demo</h1>

<script>
$.ready(function() {
    console.log(wow);
    console.log(wow());
});
</script>

This time I got no error message but, also, the values of wow and wow() weren't written to the console.

Upvotes: 0

Views: 4202

Answers (4)

Green Grasso Holm
Green Grasso Holm

Reputation: 705

Thanks to @freedomn-m, who mentioned Promises in a response follow-up comment, I came upon a previous post discussing $.when().done() at How to include multiple js files using jQuery $.getScript() method. This led to script that worked:

<!DOCTYPE html>

<script src="/xyz/scripts/jquery-1.11.0.min.js"></script>
<script>
    $.when(
        $.getScript("myModule.js")
    ).done(function() {
        console.log(wow);
        console.log(wow());
    });
</script>

<h1>Demo</h1>

Upvotes: 0

Amr Elgarhy
Amr Elgarhy

Reputation: 69002

getScript is asynchronous method, so you need access its variables in the callback like that:

$.getScript( "ajax/test.js", function( data, textStatus, jqxhr ) {
  console.log( data ); // Data returned
  console.log( textStatus ); // Success
  console.log( jqxhr.status ); // 200
  console.log( "Load was performed." );
});

Your console.log(wow); was executed before the script fully load.

Upvotes: 0

Justin Pearce
Justin Pearce

Reputation: 5097

The call to getScript() is an asynchronous operation, it does not block the rest of javascript from being executed. You have two options:

1) Wrap the script requiring the content of getScript() in a $(document).ready() to delay execution until everything is loaded.

2) Pass a callback as the second argument to getScript. This callback will be executed if getScript() succeeds.

Upvotes: 0

fdomn-m
fdomn-m

Reputation: 28611

$.getscript

https://api.jquery.com/jquery.getscript/

This is a shorthand Ajax function, which is equivalent to:

$.ajax({
  url: url,
  dataType: "script",
  success: success
});

so $.getscript makes an asynchronous call, so your code is the equivalent of:

  • $.getscript - start loading the script
  • console.log(wow) - can't find it yet as script not yet loaded
  • ... finish loading script

You can use the callback to execute code when the script has loaded:

$.getScript("myModule.js", function() {
    console.log(wow);
    console.log(wow());
});

Upvotes: 1

Related Questions