JQuery library not available in another script when loaded first

Question

I have a single HTML page with various JS imports. I'm importing JQuery, then a custom script of my own, which I'd like to use the JQuery library in, though I get a '$ is not defined' exception.

I thought as I'm loading up JQuery first, I should be able to reference it in my external script?

Is this something RequireJS would solve?

baseTemplate.html

<body>
  <template id="navbar"></template>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
  <script src="navbarTemplate.js"></script>
</body>

navbarTemplate.js

function isTemplateElementSupported() {
    return 'content' in document.createElement('template');
}

if (isTemplateElementSupported()) {
    $('#navbar').append("<table><tr><td><b>some test</b></td></tr></table>");

} else {
    alert('Please update browser!');
}

Inspect in the developer tool of your browser if the jquery script was correctly loaded. Try to use jQuery instead '$' (like jQuery('#id')) to confirm if any other library is in conflict with jquery — Ricardo Pontual, Sep 01 '16 at 11:59

score 0 · Answer 1 · answered Sep 01 '16 at 12:13

Try to use "defer" option for correct load sequence of your javascripts.

<body>
  <template id="navbar"></template>
  <script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
  <script defer src="navbarTemplate.js"></script>
</body>

JQuery library not available in another script when loaded first

1 Answers1