jQuery $(document).ready error blocking footer script

Question

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.

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.

Using finally to call a method or function(ready-function) as third codeblock of try-catch is a possibility because finally-codeblock is always executed no matter what error has been thrown. — Blauharley
– Blauharley, Commented Feb 17, 2015 at 17:52
@Blauharley could you elaborate how to use this in an answer using my edit above? — goddamnyouryan
– goddamnyouryan, Commented Feb 17, 2015 at 18:18
Or instead of jQuery(document).ready(function() { ... }) you could simply use (function() { ... })() — floribon
– floribon, Commented Feb 17, 2015 at 19:15

Blauharley · Accepted Answer · 2015-03-09 11:17:48Z

2

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>

edited Mar 9, 2015 at 11:17

answered Feb 17, 2015 at 18:55

Blauharley

4,2546 gold badges31 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

goddamnyouryan Over a year ago

This is very helpful, however the $('#logo').vAlign(); code is the code that I can't touch, which means I can't wrap it in a try block.

Guffa · Accepted Answer · 2015-02-17 17:53:35Z

1

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/

answered Feb 17, 2015 at 17:53

Guffa

703k111 gold badges760 silver badges1k bronze badges

3 Comments

goddamnyouryan Over a year ago

I thought this was the case as well! But there's definite issue here. Please see my edit with the exact code being used.

Guffa Over a year ago

@goddamnyouryan: Aha, the type of the error matters. Although a syntax error doesn't stop other scripts, a runtime error in a ready event handler stops the following handlers from running. Unfortunately it also keeps the load event from working, which would otherwise be an alternative. I had an idea that you could unbind the faulty ready event before it happened, but I couldn't get that to work...

goddamnyouryan Over a year ago

yeah I tried unbinding it as well but it wasn't working for me either. I'm convinced there's a way to handle this, I just don't know what it is.

Collectives™ on Stack Overflow

jQuery $(document).ready error blocking footer script

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related