Home/ Questions/Q 7490289
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T15:34:38+00:00

I saw similar question here in SO, where someone wants to do the same

  • 0

I saw similar question here in SO, where someone wants to do the same thing. The different case is that I have this lightweight script that listens for event bubbling to the top of the document root that I intentionally want to put on the top of the page and I dont want to wrap it inside $(document).ready(). It looks something like this:

<html>
<head>
    <script>
        document.documentElement.onclick = function (e) {
        //$.ajax call using jQuery. Possible that jQuery is not loaded when page is not completely loaded
        }
    </script>
</head>

And then near the bottom of the page I include jQuery like this:

<body>
    <script src="./jQuery.js"></script>
</body>
</html>

As you can see on the <head> when I’m making an ajax call to somewhere using $.ajax, it’s possible that jQuery is not yet loaded, so that it may throw $ is undefined error when someone clicks on something on DOM, and jQuery is not loaded yet. My workaround is probably to use settimeout hoping that jquery will be loaded sometime later and the code is working like this:

if (typeof $ === 'undefined'){
  setTimeout(doAJAXJquery, 50);
}else{
  $.ajax(//blablabla) //jQuery loaded and ready to use!!
}

But it’s a really dirty hack. How am I supposed to know when jQuery is finished loading? that 50ms i put there is only an arbitrary value i made up myself. Of course it is still not gonna work if jquery hasn;t been loaded yet and it already passes 50ms.

Is there any better workaround so when jQuery is undefined, it is gonna retry sometime later again, or put a function that executes ajax inside some callback that gets executed when jQuery is ready? thanks.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    what about

    <head>
<script type="text/javascript">
var init = function(){
    document.documentElement.onclick = function (e) {
    //$.ajax call using jQuery. Possible that jQuery is not loaded when page is not completely loaded
    }
}
</script>
</head>
<body>
<script src="./jQuery.js"></script>
<script type="text/javascript">
init();
</script>
</body>
    • 0