wp_deregister_script('jquery') and wp_enqueue('jquery-ui-dialog') dependancy Issue

[eliddon]

I've created a child theme using Twenty Eleven as the parent theme. The only Customization to the parent theme is as follows:

function load_jquery_from_google() {

	$protocol = ( isset($_SERVER['HTTPS']) && ($_SERVER['HTTPS'] == 'on') ) ? 'https' : 'http';
	$url = $protocol . '://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js';
	wp_deregister_script('jquery');
	
	if (get_transient('google_jquery') == true) {	    
		wp_register_script('jquery', $url, array(), '1.9.1', true);
	} 
	else {
		$resp = wp_remote_head($url);
		if (!is_wp_error($resp) && 200 == $resp['response']['code']) {
			set_transient('google_jquery', true, 60 * 5);
			wp_register_script('jquery', $url, array(), '1.9.1', true);
		} 
		else {
			set_transient('google_jquery', false, 60 * 5);
			$url = get_template_directory_uri() . '/js/jquery-1.9.0.min.js';
			
			wp_register_script('jquery', $url, array(), '1.9.0', true);
		}
	}


}

add_action('wp_enqueue_scripts','load_jquery_from_google');

Basically just re-registering jquery to load from the Google CDN. Now in my Child theme, I want to load 'jquery-ui-dialog', so I do so as follows:

function public_load_front_end_user_scripts() {
  wp_enqueue_script('jquery-ui-dialog', false, array('jquery','jquery-ui-core'), true );
}

add_action( 'wp_print_scripts', 'public_load_front_end_user_scripts');

This loads all dependencies, but for some reason it loads jquery after, instead of before (even though it still queues up jquery to be loaded).

I've tried the following with no difference in results:

1) Use a lower priority value in add_action('wp_enqueue_scripts','load_jquery_from_google'); - the results moved the jquery script above the navigation.js twenty eleven theme script but not above the jquery-ui-dialog script.

2) I tried explicitly calling wp_enqueue_script('jquery') before wp_enqueue_script('jquery-ui-dialog') - did not change results

3)Tried setting $deps and leaving them blank on the wp_enqueue_script('jquery-ui-dialog') call - did not change results

4) Tried moving both sets of code to child theme to rule out any issues with order of functions loading - no change

5) Tried running the add_action of load_jquery_from_google in 'init'

6) Only thing that works, is if I set jquery to load from the HEAD.

7) I've tried using wp_deregister('jquery-ui-core') and then register it again with the proper dependancies, while this works, if it tried to load any other jquery-ui-* scripts, I have to manually deregister those and re-register in order for it to entirely work.

I'm assuming if when I run a wp_deregister_script it removes the jquery dependency on the jquery-ui-dialog script.

[SergeyBiryukov]

Related: #22739

Could not reproduce on a clean install neither in 3.5.1 nor in 3.6-alpha. My steps:

1. Made a child theme of Twenty Eleven.
2. Copied your code into functions.php.
3. jQuery UI is properly loaded after jQuery.

In 3.5.1:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js?ver=1.9.1'></script>
<script type='text/javascript' src='http://wordpress/wp-includes/js/jquery/ui/jquery.ui.core.min.js?ver=1.9.2'></script>
<script type='text/javascript' src='http://wordpress/wp-includes/js/jquery/ui/jquery.ui.widget.min.js?ver=1.9.2'></script>
<script type='text/javascript' src='http://wordpress/wp-includes/js/jquery/ui/jquery.ui.mouse.min.js?ver=1.9.2'></script>
<script type='text/javascript' src='http://wordpress/wp-includes/js/jquery/ui/jquery.ui.resizable.min.js?ver=1.9.2'></script>
<script type='text/javascript' src='http://wordpress/wp-includes/js/jquery/ui/jquery.ui.draggable.min.js?ver=1.9.2'></script>
<script type='text/javascript' src='http://wordpress/wp-includes/js/jquery/ui/jquery.ui.button.min.js?ver=1.9.2'></script>
<script type='text/javascript' src='http://wordpress/wp-includes/js/jquery/ui/jquery.ui.position.min.js?ver=1.9.2'></script>
<script type='text/javascript' src='http://wordpress/wp-includes/js/jquery/ui/jquery.ui.dialog.min.js?ver=1.9.2'></script>

In 3.6-alpha-23582:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js?ver=1.9.1'></script>
<script type='text/javascript' src='http://trunk.wordpress/wp-includes/js/jquery/ui/jquery.ui.core.min.js?ver=1.10.1'></script>
<script type='text/javascript' src='http://trunk.wordpress/wp-includes/js/jquery/ui/jquery.ui.widget.min.js?ver=1.10.1'></script>
<script type='text/javascript' src='http://trunk.wordpress/wp-includes/js/jquery/ui/jquery.ui.mouse.min.js?ver=1.10.1'></script>
<script type='text/javascript' src='http://trunk.wordpress/wp-includes/js/jquery/ui/jquery.ui.resizable.min.js?ver=1.10.1'></script>
<script type='text/javascript' src='http://trunk.wordpress/wp-includes/js/jquery/ui/jquery.ui.draggable.min.js?ver=1.10.1'></script>
<script type='text/javascript' src='http://trunk.wordpress/wp-includes/js/jquery/ui/jquery.ui.button.min.js?ver=1.10.1'></script>
<script type='text/javascript' src='http://trunk.wordpress/wp-includes/js/jquery/ui/jquery.ui.position.min.js?ver=1.10.1'></script>
<script type='text/javascript' src='http://trunk.wordpress/wp-includes/js/jquery/ui/jquery.ui.dialog.min.js?ver=1.10.1'></script>

Note that wp_print_scripts is not the correct hook for wp_enqueue_script() on front-end, wp_enqueue_scripts should be used instead.

[TobiasBg]

As a side note:

Please don't ship a custom version of jQuery in your theme (as you are in the else branch of your code). This is bound to break other plugins and create unnecessary support requests for other developers, if people don't update your theme. There's no need to ship such a custom version, just use the version that ships with jQuery.

I can understand that loading jQuery from a CDN can be beneficial, but in your case it won't make much of a difference, as you are loading many other JS files anyway. Also note that your check for whether the Google CDN is reachable every five minutes is not that useful: You are checking whether your server can reach the Google CDN, which will not guarantee that the visitor of your site can reach the Google CDN via his internet connection.

Please also make sure that you are (if at all) only load another version on the frontend, so that you don't break the admin area.

So, in short: Just ditch that code and your problems will be solved.

[eliddon]

Hi Tobias,

Thank you so much for your input. I can't believe I missed that I should have been adding it to wp_enqueue_scripts instead of wp_print_scripts, that's all the issue was (and seems so obvious now). Here I thought I had exhausted all the options.

I appreciate you putting in the work to resolve this.

I agree that adding a custom version of jQuery is not a good idea, I'm only loading it in the front end, and the theme is only for my own use. As far as not using google's CDN, I agree it probably isn't much help, but I run a pretty high traffic site off 1 server and I'm trying to squeeze whatever performance I can out of it.

Again, thanks for you help and input. I've marked ticket as invalid.

[youngchad]

Here are examples how to use dialog in jQuery UI: ​http://basicuse.net/articles/pl/scripting_languages/javascript/jquery_ui_widgets_dialog_windows