How to make script execution wait until jquery is loaded

Question

I am having a problem where the page is loading so fast  that jquery hasn t finished loading before it is being called by a subsequent script   Is there a way to check for the existence of jquery and if it doesn t exist  wait for a moment and then try again     In response to the answers comments below  I am posting some of the markup   The situation    asp net masterpage and childpage   In the masterpage  I have a reference to jquery  Then in the content page  I have a reference to the page-specific script  When the page specific script is being loaded  it complains that    is undefined    I put alerts at several points in the markup to see the order in which things were firing  and confirmed that it fires in this order    Master page header   Child page content block 1  located inside the head of the masterpage  but after the masterpage scripts are called    Child page content block 2    Here is the markup at the top of the masterpage    lt    Master Language  C   AutoEventWireup  true  CodeBehind  Site master cs  Inherits  SiteMaster    gt   lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  gt   lt head id  Head1  runat  server  gt       lt title gt Reporting Portal lt  title gt       lt link href    Styles site css  rel  stylesheet  type  text css    gt       lt link href    Styles red red css  rel  stylesheet  type  text css    gt       lt script type  text Scripts  src  http   ajax googleapis com ajax libs jquery 1 6 2 jquery min js  gt  lt  script gt        lt script type  text Scripts  language  javascript  src     Scripts jquery dropdownPlain js  gt  lt  script gt       lt script type  text Scripts  language  javascript  src     Scripts facebox js  gt  lt  script gt       lt meta http-equiv  X-UA-Compatible  content  IE EmulateIE7    gt       lt asp ContentPlaceHolder ID  head  runat  server  gt       lt  asp ContentPlaceHolder gt   lt  head gt    Then in the body of the masterpage  there is an additional ContentPlaceHolder     lt asp ContentPlaceHolder ID  ContentPlaceHolder1  runat  server  gt                   lt  asp ContentPlaceHolder gt    In the child page  it looks like so    lt    Page Title    Language  C   MasterPageFile    Site Master  AutoEventWireup  true  CodeBehind  Dashboard aspx cs  Inherits  Data Dashboard    gt   lt    Register src     userControls ucDropdownMenu ascx  tagname  ucDropdownMenu  tagprefix  uc1    gt   lt asp Content ID  Content1  ContentPlaceHolderID  head  runat  server  gt       lt link rel  stylesheet  type  text css  href     Styles paserMap css    gt   lt  asp Content gt   lt asp Content ID  Content2  ContentPlaceHolderID  ContentPlaceHolder1  runat  server  gt     CONTENT HERE         lt script src     Scripts Dashboard js  type  text javascript  gt  lt  script gt   lt  asp Content gt    Here is the content of the     Script Dashboard js  file         document  ready function               tgl first   show       Show the first div        Description  East panel parent tab navigation         tabNav label   click function                  tabNav li   removeClass  active             this  parent   addClass  active             var index     this  parent  li   index            var divToggle       ui-layout-content   children  div tgl               hide all subToggle divs         divToggle hide            divToggle eq index  show

User · Answer

Let s expand defer   from Dario to be more reusable   function defer toWaitFor  method        if  window toWaitFor             method          else           setTimeout function      defer toWaitFor  method     50             Which is then run   function waitFor         defer  jQuery        gt   console log  jq done          defer  utag        gt   console log  utag done

User · Answer

Rather than  wait   which is usually done using setTimeout   you could also use the defining of the jQuery object in the window itself as a hook to execute your code that relies on it  This is achievable through a property definition  defined using Object defineProperty    function      var  jQuery    Object defineProperty window   jQuery         get  function     return  jQuery         set  function             jQuery                put code or call to function that uses jQuery here

User · Answer

It s a common issue  imagine you use a cool PHP templating engine  so you have your base layout   HEADER BODY    gt  dynamic CONTENT PAGE FOOTER   And of course  you read somewhere it s better to load Javascript at the bottom of the page  so your dynamic content doesnot know who is jQuery  or the      Also you read somewhere it s good to inline small Javascript  so imagine you need jQuery in a page  baboom    is not defined     yet       I love the solution Facebook provides  window fbAsyncInit   function     alert  FB is ready          So as a lazy programmer  I should say a good programmer      you can use an equivalent  within your page    window jqReady   function        And add at the bottom of your layout  after jQuery include  if  window hasOwnProperty  jqReady      function    window jqReady

User · Answer

Use     document  ready function            put all your jQuery goodness in here        Check out this for more info   http   www learningjquery com 2006 09 introducing-document-ready  Note   This should work as long as the script import for your JQuery library is above this call   Update     If for some reason your code is not loading synchronously  which I have never run into  but apparently may be possible from the comment below should not happen   you could code it like the following   function yourFunctionToRun          Your JQuery goodness here    function runYourFunctionWhenJQueryIsLoaded         if  window               possibly some other JQuery checks to make sure that everything is loaded here          yourFunctionToRun          else           setTimeout runYourFunctionWhenJQueryIsLoaded  50            runYourFunctionWhenJQueryIsLoaded

User · Answer

You can try onload event  It raised when all scripts has been loaded    window onload   function           jquery ready for use here     But keep in mind  that you may override others scripts where window onload using

User · Answer

the easiest and safest way is to use something like this   var waitForJQuery   setInterval function          if  typeof       undefined                 place your code here           clearInterval waitForJQuery            10

User · Answer

Check this   https   jsfiddle net neohunter ey2pqt5z   It will create a fake jQuery object  that allows you to use the onload methods of jquery  and they will be executed as soon as jquery is loaded   It s not perfect    x000D   x000D     This have to be on  lt HEAD gt  preferibly inline x000D  var delayed jquery       x000D  jQuery   function     x000D    if  typeof arguments 0      function     x000D      jQuery document  ready arguments 0    x000D      else   x000D      return   x000D        ready  function fn    x000D          console log  registering function    x000D          delayed jquery push fn   x000D          x000D        x000D      x000D     x000D      jQuery  x000D  var waitForLoad   function     x000D    if  typeof jQuery fn     undefined     x000D      console log  jquery loaded       x000D      for  k in delayed jquery    x000D        delayed jquery k     x000D        x000D      else   x000D      console log  jquery not loaded      x000D      window setTimeout waitForLoad  500   x000D      x000D     x000D  window setTimeout waitForLoad  500   x000D     end x000D   x000D   x000D   x000D     now lets use jQuery  the fake version  x000D  jQuery document  ready function     x000D    alert  Jquery now exists     x000D      x000D   x000D  jQuery function     x000D    alert  Jquery now exists  this is using an alternative call    x000D     x000D   x000D     And lets load the real jquery after 3 seconds   x000D  window setTimeout function     x000D    var newscript   document createElement  script    x000D    newscript type    text javascript   x000D    newscript async   true  x000D    newscript src    https   ajax googleapis com ajax libs jquery 1 6 1 jquery min js   x000D     document getElementsByTagName  head   0     document getElementsByTagName  body   0   appendChild newscript   x000D     3000   x000D   x000D   x000D

User · Answer

I don t think that s your problem  Script loading is synchronous by default  so unless you re using the defer attribute or loading jQuery itself via another AJAX request  your problem is probably something more like a 404   Can you show your markup  and let us know if you see anything suspicious in firebug or web inspector

User · Answer

Late to the party  and similar to Briguy37 s question  but for future reference I use the following method and pass in the functions I want to defer until jQuery is loaded   function defer method        if  window jQuery            method          else           setTimeout function     defer method     50             It will recursively call the defer method every 50ms until window jQuery exists at which time it exits and calls method    An example with an anonymous function   defer function          alert  jQuery is now loaded

User · Answer

Yet another way to do this  although Darbio s defer method is more flexible    function       var nTimer   setInterval function         if  window jQuery             Do something with jQuery       clearInterval nTimer              100

User · Answer

I m not super fond of the interval thingies  When I want to defer jquery  or anything actually  it usually goes something like this   Start with    lt html gt    lt head gt     lt script gt var  d    var    n   gt   d push n   lt  script gt    lt  head gt    Then     lt body gt     lt div id  thediv  gt  lt  div gt      lt script gt        function               thediv   html  thecode               lt  script gt      lt script src  http   code jquery com jquery-3 2 1 min js  type  text javascript  gt  lt  script gt    Then finally      lt script gt for var f in  d   d f      lt  script gt    lt  body gt   lt html gt    Or the less mind-boggling version    lt script gt var def    function defer n  def push n   lt  script gt   lt script gt  defer function           thediv   html  thecode         lt  script gt   lt script src  http   code jquery com jquery-3 2 1 min js  type  text javascript  gt  lt  script gt   lt script gt for var f in def  def f      lt  script gt    And in the case of async you could execute the pushed functions on jquery onload    lt script async onload  for var f in def  def f        src  jquery min js  type  text javascript  gt  lt  script gt    Alternatively   function loadscript src  callback     var script   document createElement  script      script src   src   script async   true    script onload   callback    document body appendChild script      loadscript  jquery min   function   for var f in def  def f

User · Answer

A tangential note on the approaches here that load use setTimeout or setInterval   In those cases it s possible that when your check runs again  the DOM will already have loaded  and the browser s DOMContentLoaded event will have been fired  so you can t detect that event reliably using these approaches   What I found is that jQuery s ready still works  though  so you can embed your usual   jQuery document  ready function               inside your setTimeout or setInterval and everything should work as normal

User · Answer

you can use the defer attribute to load the script at the really end    lt script type  text javascript  src  myscript js  defer  defer  gt  lt  script gt    but normally loading your script in correct order should do the trick  so be sure to place jquery inclusion before your own script  If your code is in the page and not in a separate js file so you have to execute your script only after the document is ready and encapsulating your code like this should work too     function      here goes your code

User · Answer

edit  Could you try the correct type for your script tags  I see you use text Scripts  which is not the right mimetype for javascript   Use this    lt script type  text javascript  src  http   ajax googleapis com ajax libs jquery 1 6 2 jquery min js  gt  lt  script gt    lt script type  text javascript  src     Scripts jquery dropdownPlain js  gt  lt  script gt   lt script type  text javascript  src     Scripts facebox js  gt  lt  script gt    end edit  or you could take a look at require js which is a loader for your javascript code   depending on your project  this could however be a bit overkill

User · Answer

I have found that suggested solution only works while minding asynchronous code  Here is the version that would work in either case   document addEventListener  DOMContentLoaded   function load         if   window jQuery  return setTimeout load  50         your synchronous or asynchronous jQuery-related code    false

[javascript] How to make script execution wait until jquery is loaded

Examples related to javascript

Examples related to jquery