Using jquery before the script includes?

Question

In my one of the PHP project, part of it done by some other people. All the js scripts are loaded in footer file. The html closes at the footer file. How Can I use jquery functions before the inclusion of footer file ?. Since using it after the footer file will show it after the closing of html. When I tired to use jquery functions before the footer I get the js error $ not defined etc.. I have searched many similar questions but couldn't find a solution. I can't change the file inclusion order currently since some other people have done it. Any help will be appreciated.

@Pointy Then what is the solution for this ? What is the best way to include the scripts? — Krishnadas PC, Jun 25 '15 at 17:56
You could put your code in an external .js file, and load it from the same footer code that loads jquery. — Barmar, Jun 25 '15 at 17:56
Just include every Javascript in your header... (like almost every website do) — poudigne, Jun 25 '15 at 17:56
@PLAudet actually it's suggested (and it's a really great idea) to put your script tags before the `
` closing tag. — Roko C. Buljan, Jun 25 '15 at 17:59
Actually, it is best practice now to put them in the header and use the async and defer attributes. See [this](http://stackoverflow.com/questions/436411/where-is-the-best-place-to-put-script-tags-in-html-markup) question and [this](https://developers.google.com/speed/docs/insights/BlockingJS) link from google about blocking js. — Andrew Mairose, Jun 25 '15 at 18:05

score 2 · Accepted Answer · answered Jun 25 '15 at 18:01

If, like you mention, you have absolutely no control over where jQuery scripts are included, you can set timer to check when jQuery is ready, e.g.:

<script>
  var i = setInterval(function() {
    if ($) {
      clearInterval(i);
 
       $(document).ready(function(){
          alert('Ready!');
       })        
    }
  }, 100)
  
</script>  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

But otherwise - if you can control it - include them before your code.

score 1 · Answer 2 · answered Jun 25 '15 at 18:08

this code will only run properly in modern browsers (IE > 8)

<div class="jq"></div>
<script>
document.addEventListener('DOMContentLoaded', function(){
    $('.jq').html('working');
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Example - http://jsfiddle.net/2mmdrega/

Mario Trucco · Answer 3 · 2015-06-25T18:44:03.433

I sometimes did something like this:

    function JQueryManager(callback, thisArgument) {

        this.execute = function() {
            if (typeof jQuery == "undefined") {
                console.log("Waiting for jQuery...");
                var self = this;
                var selfArgs = arguments;
                setTimeout(function() {
                    self.execute(selfArgs)
                }, 100)
            } else {
                console.log("Found jQuery. Version: " + jQuery.fn.jquery);
                callback.apply(thisArgument, arguments)
            }

        }
    }

    function myCallback(results) {
        alert("found " + results.length + " results")
    }


    var jQueryManager = new JQueryManager(myCallback);
    jQueryManager.execute($("div"));

That allows you to execute a callabck function when jQuery is available

EDIT: fixed some copy-paste errores

Using jquery before the script includes?

3 Answers3