title: How to make script execution wait until jquery is loaded
body: <p>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?</p>
  
  <hr>
  
  <p>In response to the answers/comments below, I am posting some of the markup.</p>
  
  <p>The situation... asp.net masterpage and childpage.</p>
  
  <p>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".</p>
  
  <p>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:</p>
  
  <ol>
  <li>Master page header. </li>
  <li>Child page content block 1 (located inside the
  head of the masterpage, but after the masterpage scripts are
  called). </li>
  <li>Child page content block 2.</li>
  </ol>
  
  <p>Here is the markup at the top of the masterpage:</p>
  
  <pre><code>&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;
  </code></pre>
  
  <p>Then in the body of the masterpage, there is an additional ContentPlaceHolder:</p>
  
  <pre><code> &lt;asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"&gt;
                  &lt;/asp:ContentPlaceHolder&gt;
  </code></pre>
  
  <p>In the child page, it looks like so:</p>
  
  <pre><code>&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;
  </code></pre>
  
  <p>Here is the content of the "../Script/Dashboard.js" file:</p>
  
  <pre><code>    $(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();
      });
  
  });
  </code></pre>