How to avoid uncaught jQuery error

Question

I am using Owl Carousel in my WordPress theme and currently applying jQuery inside my page while chances are that there may not be jQuery loaded until I am calling that function and it throws that error ... how to avoid that error ? I am using document . ready function as well ..... while I want to load jQuery in my footer only not in header as well ... any one to guide me please where am I wrong ? here is the code i am using

$(document).ready(function() {
  $('#portfolio-slider').owlCarousel({
    loop: true,
    margin: 10,
    nav: true,
    items: 3,
    responsive: {
      0: {
        items: 2
      },
      600: {
        items: 3
      },
      1000: {
        items: 3
      }
    }
  })
});

This is inside my page, while jquery is being loaded in footer ....

`document.ready` will solve this purpose provided jQuery has been included prior to its use. You could move your code in the footer after including jQuery there — techie_28, Jun 16 '16 at 08:06
But, I can't go there, I have to use in my page nothing else, while I am using document.ready as well ... then why I am facing this issue plz ??? — laraib, Jun 16 '16 at 08:08

pwolaq · Accepted Answer · 2016-06-16T08:16:38.813

first of all, to avoid mistakes, wrap your code with:

(function($){
    // your code goes here
})(jQuery);

this will make sure that $ === jQuery

secodnly, when you enqueue your scripts in Wordpress, add jQuery as dependency:

wp_enqueue_script ( 'YourScript', 'your-script.js', array('jQuery') )

if you cannot do it as above, another approach is to use DOMContentLoaded handler, which is exactly what document.ready does, but without jQuery - when it fires, you should have jQuery available:

document.addEventListener('DOMContentLoaded', function() {
  $('#portfolio-slider').owlCarousel({
    loop: true,
    margin: 10,
    nav: true,
    items: 3,
    responsive: {
      0: {
        items: 2
      },
      600: {
        items: 3
      },
      1000: {
        items: 3
      }
    }
  })
});

wow life saver it works like a charm man ... thanks a lot you are my teacher and hero from onwards ... thanks again dear — laraib, Jun 16 '16 at 08:18

score 1 · Answer 2 · answered Jun 16 '16 at 08:11

This is one way to keep checking that jQuery has loaded before calling your code:-

function jQueryLoaded() {
  $(document).ready(function() {
    $('#portfolio-slider').owlCarousel({
      loop: true,
      margin: 10,
      nav: true,
      items: 3,
      responsive: {
        0: {
          items: 2
        },
        600: {
          items: 3
        },
        1000: {
          items: 3
        }
      }
    })
  });
}

function checkForjQuery() {

  window.jQuery ? jQueryLoaded() : setTimeout(checkForjQuery);

}

checkForjQuery();

score 1 · Answer 3 · edited May 23 '17 at 11:53

Why it happens

$(document).ready() executes its inside code when the dom is loaded, but you are calling to that function before jquery library is loaded, so the browser does not know what $(document).ready() means.

Workarounds

You can handle it in some ways; you can move the code after the line that loads the jQuery library, You can add your code to a separate js file and load it after jQuery library (recommended)... Or You can also use vanilla js to wait for dom ready, like:

document.addEventListener("DOMContentLoaded", function() {
    $('#portfolio-slider').owlCarousel({
        loop: true,
        margin: 10,
        nav: true,
        items: 3,
        responsive: {
            0: {
                items: 2
            },
            600: {
                items: 3
            },
            1000: {
                items: 3
            }
        }
    });
});

Check https://stackoverflow.com/a/21814964/3648578 for the last workaround.

How to avoid uncaught jQuery error

3 Answers3