Show alert on page load using LAB JS

236 views Asked by At

I inherited some code and all I want to do is run some jQuery code specifically an alert.

I know how to do that using jQuery/JavaScript but now sure if I can just use what I already have which is as follows:

<script>
  $LAB
  .script("js/lib/jquery-1.7.1.min.js").wait()
  .script("js/lib/jquery.mobile-1.1.0.min.js").wait()
  .script("../js/mobile/config/buildfile.js").wait()
  .script("js/init.js")
  .wait(function () {
    $(function() {
    setupHelpers();
    loadApp(true,
      function () {
      },
      function () {
      });
    });
  });
</script>

Do I need to still use document.ready or can I just put that alert somewhere in the code above? Thanks

1

There are 1 answers

0
Kyle Simpson On

The answer to if you need to wait for DOMready or not is separate from whether or not LABjs is in the picture. It's a common misunderstanding to conflate "DOMready" with "scripts are finished and ready", when in fact they're two separate events, and should be treated individually in terms of what you need.

So, to answer your specific question, should you wait for DOMready or not... the answer is, it depends on if you need the DOM or not to display the alert. If you're alerting to the user using the normal alert() dialog popup, then no you don't. If you're using some plugin which "alerts" the user by way of injecting a <div> into the DOM to show the alert, then yes you definitely need to wait for the DOM.

Whatever you do, don't fall for the fallacy that the "script loaded" event (which is what you get in your final wait(..) call) means the DOM is ready. This is not necessarily true.


Rule 1: if you need the DOM for some task, always wait using a DOMready event handler, don't assume.

Rule 2: if you need to wait for some or all scripts to finish loading, use a script-loaded event, like what a script loader like LABjs gives you.

Rule 3: if you need both the DOM and the scripts to finish loading, then compose both events, by embedding a DOMready handler in your script-loaded handler, as you have done above.