Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>If you're using a third-party JavaScript framework/toolkit/library, it probably provides a function/method that allows you to execute code once the DOM has fully loaded. <a href="http://dojotoolkit.org/" rel="nofollow noreferrer">The Dojo Toolkit</a>, for example, provides <a href="http://api.dojotoolkit.org/jsdoc/dojo/1.2/dojo.addOnLoad" rel="nofollow noreferrer">dojo.addOnLoad</a>. Similarly, <a href="http://jquery.com/" rel="nofollow noreferrer">jQuery</a> provides <a href="http://docs.jquery.com/Events/ready" rel="nofollow noreferrer">Events/ready</a> (or its <a href="http://docs.jquery.com/Core/jQuery#jQuery.28.C2.A0callback_.29" rel="nofollow noreferrer">shorthand form</a>, accessible by passing a function directly to the jQuery object).</p> <p>If you're sticking with plain JavaScript, then the trick is to use the window.onload event handler. While this will ultimately accomplish the same thing, window.onload executes after the page--and everything on it, including images--is completely loaded, whereas the aforementioned libraries detect the first moment the DOM is ready, before images are loaded.</p> <p>If you need access to the DOM from a script in the head, this would be the preferred alternative to adding scripts to the end of the document, as well.</p> <p>For example (using window.onload):</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;title&gt;Test Page&lt;/title&gt; &lt;script type="text/javascript"&gt; window.onload = function () { alert(document.getElementsByTagName("body")[0].className); }; &lt;/script&gt; &lt;style type="text/css"&gt; .testClass { color: green; background-color: red; } &lt;/style&gt; &lt;/head&gt; &lt;body class="testClass"&gt; &lt;p&gt;Test Content&lt;/p&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>This would enable you to schedule a certain action to take place once the page has finished loading. To see this effect in action, compare the above script with the following, which blocks the page from loading until you dismiss the modal alert box:</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;title&gt;Test Page&lt;/title&gt; &lt;script type="text/javascript"&gt; alert("Are you seeing a blank page underneath this alert?"); &lt;/script&gt; &lt;style type="text/css"&gt; .testClass { color: green; background-color: red; } &lt;/style&gt; &lt;/head&gt; &lt;body class="testClass"&gt; &lt;p&gt;Test Content&lt;/p&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>If you've already defined window.onload, or if you're worried you might redefine it and break third party scripts, use this method to append to--rather than redefine--window.onload. (This is a slightly modified version of <a href="http://simonwillison.net/2004/May/26/addLoadEvent/" rel="nofollow noreferrer">Simon Willison's addLoadEvent function</a>.)</p> <pre><code>if (!window.addOnLoad) { window.addOnLoad = function (f) { var o = window.onload; window.onload = function () { if (typeof o == "function") o(); f(); } }; } </code></pre> <p>The script from the first example, modified to make use of this method:</p> <pre><code>window.addOnLoad(function () { alert(document.getElementsByTagName("body")[0].className); }); </code></pre> <p>Modified to make use of Dojo:</p> <pre><code>dojo.addOnLoad(function () { alert(document.getElementsByTagName("body")[0].className); }); </code></pre> <p>Modified to make use of jQuery:</p> <pre><code>$(function () { alert(document.getElementsByTagName("body")[0].className); }); </code></pre> <p>So, now that you can execute code on page load, you're probably going to want to dynamically load external scripts. Just like the above section, most major frameworks/toolkits/libraries provide a method of doing this.</p> <p>Or, you can roll your own:</p> <pre><code>if (!window.addScript) { window.addScript = function (src, callback) { var head = document.getElementsByTagName("head")[0]; var script = document.createElement("script"); script.src = src; script.type = "text/javascript"; head.appendChild(script); if (typeof callback == "function") callback(); }; } window.addOnLoad(function () { window.addScript("example.js"); }); </code></pre> <p>With Dojo (<a href="http://api.dojotoolkit.org/jsdoc/dojo/1.2/dojo.io.script.attach" rel="nofollow noreferrer">dojo.io.script.attach</a>):</p> <pre><code>dojo.addOnLoad(function () { dojo.require("dojo.io.script"); dojo.io.script.attach("exampleJsId", "example.js"); }); </code></pre> <p>With jQuery (<a href="http://docs.jquery.com/Ajax/jQuery.getScript" rel="nofollow noreferrer">jQuery.getScript</a>):</p> <pre><code>$(function () { $.getScript("example.js"); }); </code></pre>
    singulars
    1. This table or related slice is empty.
    1. POWhat are the ways to minimize page wait from external javascript callouts?
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USChristopher Parker
    1. USChristopher Parker
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COI think the original poster was interested in loading of external JavaScript files. Usually, this is done in the <head> and the page can't continue to load until those links are resolved. Your answer is about how to invoke JS after the page loads, not how to pull in the JS to being with.
      singulars
      1. PO
      1. USBen Combee
    2. COAfter re-reading the original question, I see your point. In that case, my answer could be combined with something such as this: http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml
      singulars
      1. PO
      1. USChristopher Parker
    3. COI've updated my answer with your comment in consideration. Thanks!
      singulars
      1. PO
      1. USChristopher Parker
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload