Support » Fixing WordPress » Can't get jquery to work.

  • Resolved TMNR

    (@tmnr)


    Hi,

    I’m trying to make a “Back to Top” jquery script in my own theme based on “_s”.
    It works in jsfiddle, but I can’t get it to work on live website.

    I have added the following line in functions.php, and the script itself to the js folder.

    function pmtau_scripts() {
    	wp_enqueue_style( 'pmtau-style', get_stylesheet_uri() );
    
    	wp_enqueue_script( 'pmtau-navigation'...);
    
    	wp_enqueue_script( 'pmtau-skip-link-focus-fix'...);
    
    	wp_enqueue_script( 'pmtau-go-to-top', get_template_directory_uri() . '/js/go-to-top.js', array( 'jquery' ), '1.0.0',  true );
    
    	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
    		wp_enqueue_script( 'comment-reply' );
    	}
    
    	if ( is_singular() && wp_attachment_is_image() ) {
    		wp_enqueue_script( 'pmtau-keyboard-image-navigation...);
    	}
    }
    add_action( 'wp_enqueue_scripts', 'pmtau_scripts' );

    I can see the script being loaded in <body> section below content.

    My understanding is that somehow jquery library is not loading properly, do I have to do it separately. Maybe it’s not that at all. Please help.

Viewing 6 replies - 1 through 6 (of 6 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    What’s the full code you’re using (instead of …)?

    Thread Starter TMNR

    (@tmnr)

    That code there is by default, I figured it does not matter.

    function pmtau_scripts() {
    	wp_enqueue_style( 'pmtau-style', get_stylesheet_uri() );
    
    	wp_enqueue_script( 'pmtau-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20120206', true );
    
    	wp_enqueue_script( 'pmtau-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20130115', true );
    
    	wp_enqueue_script( 'pmtau-go-to-top', get_template_directory_uri() . '/js/go-to-top.js', array( 'jquery' ), '1.0.0',  true );
    
    	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
    		wp_enqueue_script( 'comment-reply' );
    	}
    
    	if ( is_singular() && wp_attachment_is_image() ) {
    		wp_enqueue_script( 'pmtau-keyboard-image-navigation', get_template_directory_uri() . '/js/keyboard-image-navigation.js', array( 'jquery' ), '20120202' );
    	}
    }
    add_action( 'wp_enqueue_scripts', 'pmtau_scripts' );

    While viewing source (you mentioned you saw them being loaded in the body)
    click on one of the scripts to open it. This will either open a view source on the script, showing that it is, in fact, being loaded, or it will show an “file not found” page, meaning it is calling the wrong file path and it would be a problem with your above function.

    If you click on a script and it is, in fact, loading properly, then maybe check the syntax of the scripts themselves.

    One problem I used to run into with jquery:
    When loading jquery in wordpress you have to alias jquery by doing the following:
    Switch the initial
    $( document ).ready(function() {
    with this.
    jQuery( document ).ready(function( $ ) {

    Thread Starter TMNR

    (@tmnr)

    <script src="http://www.pmtau.lt/wp-content/themes/pmtau/js/go-to-top.js?ver=1.0.0" type="text/javascript">
    jQuery(document).ready( function() {
    // Show or hide the sticky footer button
    $(window).scroll(function() {
    if ($(this).scrollTop() > 200) {
    $('#go-to-top').fadeIn(200);
    } else {
    $('#go-to-top').fadeOut(200);
    }
    });
    // Animate the scroll to top
    $('#go-to-top').click(function(event) {
    event.preventDefault();
    $('html, body').animate({scrollTop: 0}, 300);
    });
    });
    </script>

    This is what I get when <script> is expanded. It does load correctly and it’s written as you say. Still does not work. Looks like I’m genuinely stuck…

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    You’re not using a correct noconflict wrapper – also you ought to be using something like Firebug to get access to your browser’s console log and see more informative errors.

    Thread Starter TMNR

    (@tmnr)

    Andrew,
    Thanks for pointing this out — this solved the issue. I’ve read about this but haven’t understood the importance nor use of safe wrapping.

    I am using Firebug, but I’m new to JS, so i don’t even know what to look for. I’ll go read a little on Firebug features 🙂

    Thank you and have a nice day.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Can't get jquery to work.’ is closed to new replies.