Moving inline js into external js file causing errors

Question

I was trying to tidy up the inline js scripts for a template I'm modifying and combining them into an external js file when I noticed some errors in the console. They are not doing any harm to the site's functionality but I am wondering what I'm doing wrong and how to fix it.

My external js file is:

<script type="text/javascript" src="web/js/init.js"></script>

Link 1 throws the following error:

Uncaught TypeError: Object [object Object] has no method 'owlCarousel'

(I don't use that carousal on that page...)

Link 2 where I do use the carousal throws this error:

Uncaught TypeError: Object [object Object] has no method 'nivoSlider'

(I don't use the slider on that page)

Link 3 I left the inline scripts (no external js file) in place and no js errors relating to external/internal js.

Thanks!

When you consolidated, your functions are still trying to use things that don't exist in their respective pages. The reason the last one doesn't throw any errors is because there is no 'owlCarousel' on the page, and it was never called, but there is a nivoSlider loaded and has the elements associated with it. The external javascript file when loaded is running everything in advance because there is no function encapsulation. If you're going to put everything in an external javascript file you have to put the "loaders" in their own function that gets called when those elements exist. — blakev, Mar 06 '14 at 04:48
I would also suggest only calling your $(function(){}); once. There is no need to call it separately for each piece of code that you right. In addition, I would put your scripts in the footer instead of the header. — thesublimeobject, Mar 06 '14 at 04:51
@blakev So wrap the all the functions in: $(window).load(function() ? Thesublimeobject, You mean take all the js/css from the head and put it right before
? — YKB, Mar 06 '14 at 04:55
@YKB You can also use the $(document).ready(function() { //put code here }); method. And putting your javascript at the bottom of the page prevents it from blocking the loading for the browser. Normally your browser processes all the javascript it sees before displaying elements. This doesn't happen with asynchronously loaded javascript (like Google Analytics .js code) but will happen with your javascript. — seangwright, Mar 06 '14 at 05:01
I'm not "super up" on jquery semantics, but essentially all your code is being run in your external.js file ~ even code that shouldn't be run because you didn't include the proper source files before it, and you don't have the correct elements on the page yet. You need to not run things when they shouldn't be. — blakev, Mar 06 '14 at 05:04

score 1 · Accepted Answer · answered Mar 06 '14 at 04:53

You are calling nivoslider() and not using its js file that why you are getting error for nivoslider, remove the below lines from your init.js From your puppies page

$(window).load(function() {
   $('#slider').nivoSlider();
});

Same problem with you owlcarousel remove the below code from init.js for your index page

$("#owl-example").owlCarousel({
    autoPlay: 3000, //Set AutoPlay to 3 seconds
    items : 3,
    itemsDesktop : [1199,3],
    itemsDesktopSmall : [979,3]
});

If your id slider and owl-example used for nivoslider and owlCarousel only then you can do it by checking length of your elements like,

$(function() {
   if($('#slider') && $('#slider').length){// must be on puppies page only
       $('#slider').nivoSlider();
   }
   if($('#owl-example') && $('#owl-example').length){// must be on index page only
      $("#owl-example").owlCarousel({
         autoPlay: 3000, //Set AutoPlay to 3 seconds
         items : 3,
         itemsDesktop : [1199,3],
         itemsDesktopSmall : [979,3]
      });
   }
});

score 0 · Answer 2 · edited May 23 '17 at 12:28

1) You are targeting an element that does not exist on the page. There is no element with an ID of owl-example, so jquery returns nothing and a method is being called on this null value. ( See here on SO how to test for null first )

2) Same as above but with an element with the ID of slider. It doesn't exist on this page, so a method is being called on null.

Your code looks like

$(function(){
  //Code..
})

These functions are all being called when the DOM loads. See this SO question.

3) You are not getting errors on this page because the jquery selectors you are using are returning elements in the page that match. This doesn't have anything to do with inline/external.

Moving inline js into external js file causing errors

2 Answers2