• Resolved jasonTakesManhattan

    (@jasontakesmanhattan)


    I’m having a problem getting a javascript function to execute. I’m using this store locator script. It works perfectly fine in a non-wordpress site, but once I bring it into WordPress, it doesn’t work. The following is in my functions.php page:

    function my_map_scripts() {
        if ( is_page_template( 'template-project-map.php' ) ) {
            wp_enqueue_script(
                'jplist-custom-script',
                get_stylesheet_directory_uri() . '/js/jplist.min.js',
                array( 'jquery' )
            );
            wp_enqueue_script(
                'jlocator-custom-script',
                get_stylesheet_directory_uri() . '/js/jlocator.min.js',
                array( 'jquery' )
            );
            wp_enqueue_script(
                'jlocator-activate-script',
                get_stylesheet_directory_uri() . '/js/jlocator.activate.js',
                array( 'jquery' )
            );
            wp_enqueue_script(
                    'google-maps',
                    'https://maps.googleapis.com/maps/api/js'
                );
        }
    }
    
    add_action( 'wp_enqueue_scripts', 'my_map_scripts' );

    The jlocator.activate.js file contains the following:

    jQuery(document).ready(function(){
        jQuery('#jlocator').jlocator();
    });

    This code will not execute. I feel like there is some type of problem with jlocator(), as this line simply won’t execute. Also, if I put an alert in the ready function, it doesn’t execute either, unless I remove jQuery(‘#jlocator’).jlocator();

    I checked the error console, and I am getting TypeError: jQuery(…) is not a function, and that is referring to each of my js files. Each one goes to a line that has something like this (function(k){var……….

    Am I missing something simple here?

Viewing 6 replies - 1 through 6 (of 6 total)
  • for some reason jquery is not loaded, where is your script being executed? usually javascript is loaded on the footer, so your script should be after the rest of the JS is being loaded

    can you share an url so i can take a look?

    Thread Starter jasonTakesManhattan

    (@jasontakesmanhattan)

    Here is the link: Development site

    I agree with you that it seems like jQuery isn’t loading, but I’ve even tested to make sure jQuery is loading, in order to execute the function (in the functions.php file), and it still ran. I’ve never had a problem like this with jQuery and WordPress.

    If you can take a look, I would appreciate it.

    Thread Starter jasonTakesManhattan

    (@jasontakesmanhattan)

    Right now you’ll see the list of locations on the left, and a blank map on the right. Once I get the jQuery functioning properly, the list on the left will become paginated, and the map will kick in with markers.

    i see some 404 errors, this can cause execution time issues, so basically
    jquery starts loading
    404 error – time issue
    your code executes but because of the others 404 issues, jquery probably won’t be completely loaded

    try fixing your 404 errors, if this doesn’t work let me know i can dig more into

    Thread Starter jasonTakesManhattan

    (@jasontakesmanhattan)

    Can you tell me where you are viewing those 404 errors? In the browser console, I am seeing that the Google Maps API may be loading multiple times, but I’m not sure how. I’ve only called it once, and there are no active google maps plugins. And then, of course, it’s telling me that $ is not a function in my jlocator.min.js file.

    Thread Starter jasonTakesManhattan

    (@jasontakesmanhattan)

    It appears to be working now. You were correct in that jQuery was not loading. This didn’t make sense, though, because the function requires a dependency on jQuery being loaded first. I ended up getting it to work by adding a call to enqueue jquery in my main function. This was the final function:

    function my_map_scripts() {
    	if ( is_page_template( 'template-project-map.php' ) ) {
    			// Load jQuery
    		if ( !is_admin() ) {
    		   wp_deregister_script('jquery');
    		   wp_register_script('jquery', ("https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"), false);
    		   wp_enqueue_script('jquery');
    		}
    		wp_enqueue_script(
    			'jplist-custom-script',
    			get_stylesheet_directory_uri() . '/js/jplist.min.js',
    			array( 'jquery' )
    		);
    		wp_enqueue_script(
    			'jlocator-custom-script',
    			get_stylesheet_directory_uri() . '/js/jlocator.min.js',
    			array( 'jquery' )
    		);
    		wp_enqueue_script(
    				'google-maps',
    				'https://maps.googleapis.com/maps/api/js'
    			);
    		wp_enqueue_script(
    			'jlocator-activate-script',
    			get_stylesheet_directory_uri() . '/js/jlocator.activate.js',
    			array( 'jquery' )
    		);
    
    	}
    }
    
    add_action( 'wp_enqueue_scripts', 'my_map_scripts' );
Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Javascript function won't execute’ is closed to new replies.