Jquery WP issue

[Jeager]

Working locally, I call jquery from my functions.php file via:

if (!is_admin()) add_action(“wp_enqueue_scripts”, “my_jquery_enqueue”, 11);
function my_jquery_enqueue() {
wp_deregister_script(‘jquery’);
wp_register_script(‘jquery’, “http” . ($_SERVER == 443 ? “s” : “”) . “://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js”, false, null);
wp_enqueue_script(‘jquery’);
}

I then add the scripts I want to use into the header:

However it is not working, so I’m guessing the problem is simple and I am overlooking something. Any help would be appreciated.

[SgtLegend]

Well the first thing I would change is the URL for jQuery, you don’t need to detect if the server is using SSL as browsers can handle that for you. See the below:

// Using 2 forward slashes will let the browser know it has to pick the protocol, works in every browser
wp_register_script(‘jquery’, “//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js”, false, null);

The question I would have though is in your page source what comes first? jQuery or the plugins?

[Jeager]

When doing a “view page source” the two scripts I am doing are first. However its just showing the header/index/footer in the correct order. I am calling the jquery library through the functions file. When looking at the resources through chrome tools, it shows the main jquery library along with the other scripts.

[Jeager]

I hate to just ask for the answer, but how would I? I found that script on digging into WP. I would imagine I would have to enqueue the other 2 scripts after? so like…

wp_enqueue_script(‘js/myscript’);

?

[Jeager]

So I tried both of these ways. They both worked in the fact that the js files are being loaded into the resources but won’t do as intended. Do I have to somehow hook them into the page again? I’m using a custom scroll bar and while it works on my mock build outside of WP, no go here.

Edit: Actually I think I can get this working. There was a piece of script I was missing that tells the bar what object to attach to.

[Jeager]

/*
* Calls Jquery
*/
if (!is_admin()) add_action(“wp_enqueue_scripts”, “my_jquery_enqueue”, 11);
function my_jquery_enqueue() {
wp_deregister_script(‘jquery’);
wp_register_script(‘jquery’, “//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js”, false, null);
wp_enqueue_script(‘jquery’);
}

if (!is_admin()) add_action(“wp_enqueue_scripts”, “my_jquery_ui_enqueue”, 11);
function my_jquery_ui_enqueue() {
wp_deregister_script(‘jqueryui’);
wp_register_script(‘jqueryui’, “//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js”, false, null);
wp_enqueue_script(‘jqueryui’);
}
// Let’s hook in our function with the javascript files with the wp_enqueue_scripts hook

add_action( ‘wp_enqueue_scripts’, ‘load_javascript_files’ );

// Register some javascript files, because we love javascript files. Enqueue a couple as well

function load_javascript_files() {

wp_register_script( ‘scroll-bar’, get_template_directory_uri() . ‘/js/jquery.mCustomScrollbar.js’, array(‘jquery’), true );
wp_register_script( ‘mouse-scroll’, get_template_directory_uri() . ‘/js/jquery.mousewheel.min.js’, array(‘jquery’), true );

wp_enqueue_script( ‘scroll-bar’ );
wp_enqueue_script(‘mouse-scroll’);

}

That is all in the functions file. Figured I would just do a follow through incase anyone else may of searched for this same issue. All is now working correctly. Thank you guys for the help!

[Jeager]

Went through looking for the best ways to load it and this seemed to be it. Not sure what else you would do.

[Jeager]

Okay sorry it took so long to get back to you. Been a rough week. You enqueue the jquery ui, but I dont see the command to load normal jquery. This is what I have right now.

function portfolio_script_manager() {

// wp_register_script template ( $handle, $src, $deps, $ver, $in_footer );
wp_register_script(‘portfolio-scroll-bar’, get_template_directory_uri() . ‘/js/jquery.mCustomScrollbar.js’, array(‘jquery’), true, true);
wp_register_script(‘portfolio-mouse-scroll’, get_template_directory_uri() . ‘/js/jquery.mousewheel.min.js’, array(‘jquery’), true, true);
wp_register_script(‘portfolio-sticky’, get_template_directory_uri() . ‘/js/jquery.sticky.js’, array(‘jquery’), true, true);

// enqueue the scripts/styles for use in theme

// built in scripts (loaded in WP)
wp_enqueue_script (‘jquery’);
wp_enqueue_script (‘jquery-ui-core’); // UI base core, you need to load needed components individually
wp_enqueue_script (‘jquery-ui-mouse’); // UI core component – codex.wordpress.org/Function_Reference/wp_enqueue_script#Default_scripts_included_with_WordPress
wp_enqueue_script (‘jquery-ui-draggable’);

// custom scripts (added)
wp_enqueue_script(‘portfolio-scroll-bar’);
wp_enqueue_script(‘portfolio-mouse-scroll’);
wp_enqueue_script(‘portfolio-sticky’);

} add_action(‘wp_enqueue_scripts’, ‘portfolio_script_manager’);

Edited: Sorry so many edits if anyone is seeing this thread. It is working now! I had an issue in the header that used a different method of calling the jquery that caused them. Reworked it to work. Thanks a lot man.

I guess the only other question I have would be, is it better to just use the wp jquery/ui or would it be better to first try google cdn, and if it is not already loaded then use them.

Edit 2:

Okay. So after I signed out of wp-admin area, the sticky started working. However anytime I roll over my custom scrollbars, The error ” Uncaught TypeError: Object # has no method ‘easeOutCirc’ ” comes up.

Also, if I reload the page, everything stops working. I have to exit it and re enter the url. Is this a issue being on a local host?

[Jeager]

I can not get it working with your method. It only happens every other reload or clearing of the cache. With the following code, it works perfect the first try and every try after… So Not sure whats going on.

if (!is_admin()) add_action(“wp_enqueue_scripts”, “my_jquery_enqueue”, 11);
function my_jquery_enqueue() {
wp_deregister_script(‘jquery’);
wp_register_script(‘jquery’, “//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js”, false, null);
wp_enqueue_script(‘jquery’);
}

if (!is_admin()) add_action(“wp_enqueue_scripts”, “my_jquery_ui_enqueue”, 11);
function my_jquery_ui_enqueue() {
wp_deregister_script(‘jqueryui’);
wp_register_script(‘jqueryui’, “//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js”, false, null);
wp_enqueue_script(‘jqueryui’);
}

function portfolio_script_manager() {

// wp_register_script template ( $handle, $src, $deps, $ver, $in_footer );
wp_register_script(‘portfolio-scroll-bar’, get_template_directory_uri() . ‘/js/jquery.mCustomScrollbar.js’, array(‘jquery’), true, true);
wp_register_script(‘portfolio-mouse-scroll’, get_template_directory_uri() . ‘/js/jquery.mousewheel.min.js’, array(‘jquery’), true, true);
wp_register_script(‘portfolio-sticky’, get_template_directory_uri() . ‘/js/jquery.sticky.js’, array(‘jquery’), true, true);

// custom scripts (added)
wp_enqueue_script(‘portfolio-scroll-bar’);
wp_enqueue_script(‘portfolio-mouse-scroll’);
wp_enqueue_script(‘portfolio-sticky’);

}
add_action(‘wp_enqueue_scripts’, ‘portfolio_script_manager’);

It’s just every time I try to enqueue jquery and the UI from inside the function using the other method, nothing really works. It will show in my resources that they are loaded, but doesn’t do much past that.

[Author]

Posts