JS script loads through wp_enqueue but does not work.

  • laonikoss

    (@laonikoss)


    10 years, 5 months ago

    Here’s my problem (I posted this under plugins, so am reposting here because it wasn’t the right place!) (And I can’t seem to edit/move/delete my previous post anymore.)

    I have a js script that I want to load to the page. If I hard-code it onto the <head> section of header.php (including loading an external minified jquery, http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js ) it works just fine.

    However, if I remove the link to the external jquery file, it stops working.

    If I try to load the script through wp_enqueue (functions.php), it loads just fine (I can see it loaded in the <head> section, and if I click on the link it opens the file, so it links to the correct file), but it still doesn’t work.

    What could be the problem?

    Here is the original script:

    $(function() {
    $(window).on('scroll', function() {
        $('#par_background').css('margin-top', $(window).scrollTop() * -.3);
    });
});

 $(document).ready(function () {
    $(window).bind('scroll', function () {
        var distance = 50;
        if ($(window).scrollTop() > distance) {
            $('nav').addClass('scrolled');
        } else {
            $('nav').removeClass('scrolled');
        }
    });
});

    And here’s the modified content of test.js file, formatted to load with wp_enqueue (but I am not confident at all if this is the correct formatting, not an expert with JS):

    jQuery(function() {
    $(window).on('scroll', function() {
        $('#par_background').css('margin-top', $(window).scrollTop() * -.3);
    });
});

jQuery(function () {
    $(window).bind('scroll', function () {
        var distance = 50;
        if ($(window).scrollTop() > distance) {
            $('nav').addClass('scrolled');
        } else {
            $('nav').removeClass('scrolled');
        }
    });
});

    Any help would be appreciated!

Viewing 6 replies - 1 through 6 (of 6 total)
  • ancawonka

    (@ancawonka)

    10 years, 5 months ago

    When you say it “doesn’t work”, do you mean that the script is not called?

    Are you seeing any js errors in the console? Is it loading in the same order in which it would load if you were to hard-code it? In other words, it’s possible that some other script is loaded later or earlier, and messes with your JS.

    Take a careful look at the source code – you can even try putting some breakpoints in your web inspector so you can see how much loads, or whether there’s an error.

    Robin

    (@cinghaman)

    10 years, 5 months ago

    most likely if u do inspect element your console might be showing a $ undefined error (but still want to be sure so either if u can provide link to ur site or check ur console – > inspect element > console)
    and not really sure what your are doing but in your original script scroll to top section is being called on document ready where as in ur test.js it is just a normal function so it actually is not being fired on document ready

    Thread Starter laonikoss

    (@laonikoss)

    10 years, 5 months ago

    Thanks for your comments:

    I corrected the content of the JS file.

    I have enqueued it successfully, and it DOES load. (It shows up in the HTML code of the page once loaded, and it works.)

    However, ONLY because I am hard-coding this onto <head>: 

    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

    (This is the jQuery link that came with some of the code I am using.)

    As long as I have that in <head> it works fine. If I remove it, it breaks. Here’s the code I have in scroll.js again:

    jQuery(function() {
	$('#nav').removeClass('scrolled');
    $(window).on('scroll', function() {
    	var viewportHeight = $(window).height();
    	if ($(window).scrollTop() < 0.8 * viewportHeight) {
	        $('#par_background').css('margin-top', $(window).scrollTop() * -.3).css('opacity', 1 - ($(window).scrollTop() / (viewportHeight * 0.8)));
    	    $('#abs').text($(window).scrollTop() + '+' + viewportHeight + '+' + ($(window).scrollTop() / (viewportHeight * 0.8)));
    	}
    	else {
    		$('#par_background').css('opacity', '0');
    	}
    });

});

jQuery(document).ready(function () {
    $(window).bind('scroll', function () {
        var distance = 0.2 * $(window).height();
        if ($(window).scrollTop() > distance) {
            $('#nav').addClass('scrolled');
        } else {
            $('#nav').removeClass('scrolled');
        }
    });
});

    I get an error in the console:

    Uncaught TypeError: $ is not a function

    Do I have to replace every instance of $ with jQuery in my JS file? Or just the one in the beginning of each function?

    Thanks!

    Thread Starter laonikoss

    (@laonikoss)

    10 years, 5 months ago

    I’m sorry, I’m an idiot.

    The answer to my question is Yes, I just did a search+replace, and it now works flawlessly.

    Thanks for your answers and patience – I am not too familiar with the ways of javascript, and learning it at the same time as getting used to the idiosyncracies of making it work within WordPress is a bit confusing!

    Robin

    (@cinghaman)

    10 years, 5 months ago

    glad it worked out
    Cheers

    ancawonka

    (@ancawonka)

    10 years, 5 months ago

    Glad it worked out. You’re in good company here in the hacks forum. I know I’ve run afoul of this exact thing when I started w/ JavaScript in WordPress.

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘JS script loads through wp_enqueue but does not work.’ is closed to new replies.