jQuery $(document).ready error blocking footer script

6 Views

So I’ve got a unique problem.

I’ve got a site that I can’t edit the template for at all, I can only alter the embedded script.

Read More

This embedded script is injected into the footer of the site in question.

The embedded script relies on $(document).ready to kick itself off.

The problem is, a script higher up on the page throws an error in it’s $(document).ready function which prevents my $(document).ready from ever being called.

I tried setting up a try .. catch block, like this, but I believe this will only work if my script is higher up on the page still.

My question, is it possible to get my $(document).ready call to run, even if it’s lower on the page, and a previous one has errors?

In the site above my script: 

<script type="text/javascript">
  jQuery(document).ready(function($) {
    $('#logo').vAlign();
  });
</script>

.vAlign(); is not defined so it’s throwing: Uncaught TypeError: undefined is not a function

In my embedded js: 

jQuery(document).ready(function() {
  console.log('ready!');
});

I never see “ready!” in the console.

Post Views: 6

Related posts

Leave a Reply

2 comments

  1. When important operations must always be executed finally-codeblock of try-catch could be used. Even if catch-codeblock is not run through finally-codeblock is and so callReady-function is called definitely at the end no matter whether there was an error or not(except for syntax errors). As it is the case below:

    <script language="JavaScript" src="https://code.jquery.com/jquery-1.11.2.js" type="text/javascript"></script>
<script type="text/javascript">

  try{
    jQuery(document).ready(function($) {
      $('#logo').vAlign();
    });
  }
  catch(e){
    console.log(e);
  }
  finally{
    // some fallback code might be executed here
    callReady();
  }


  jQuery(document).ready(callReady);

  function callReady(){
    console.log('ready!');
  }

</script>

    Unfortunately if there is no error callReady is called twice(because finally is always run through at the end) but you can check for this case:

    <script type="text/javascript">

  var errorHappened = true;

  function checkForErrors(callback){

      callback();

      // when interpreter reaches this point no error with business-code is thrown
      errorHappened = false;

  }

  try{
    jQuery(document).ready(function($) {

      try{

        checkForErrors(function(){

            // put business-code in here

            $('#logo').vAlign();

        })


      }
      finally{
        if(errorHappened){
            callReady();
        }
      }

    });
  }
  catch(e){
    console.log(e);
  }


  jQuery(document).ready(callReady);

  function callReady(){
    console.log('ready!');
  }

</script>

  2. An error in one script tag in the page doesn’t keep other scripts from running.

    Example:

    <script>
    $(function(){ console.log(1); });
</script>
<script>
    $(function(){ console.log 2; });
</script>
<script>
    $(function(){ console.log(3); });
</script>

    This will first log a syntax error for the second script tag, then it will log the values 1 and 3 as the other ready events work fine.

    Demo: http://jsfiddle.net/Guffa/am4f7f18/