WordPress.org

Make WordPress Core

Opened 17 months ago

Closed 16 months ago

Last modified 6 months ago

#23658 closed defect (bug) (invalid)

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

Reported by: eliddon Owned by:
Milestone: Priority: normal
Severity: normal Version: 3.5.1
Component: External Libraries Keywords:
Focuses: Cc:

Description

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.

Change History (6)

comment:1 eliddon17 months ago

  • Summary changed from wp_deregister_script('jquery') and wp_enqueue('jquery-ui-dialog') dependancy Issue (using child theme) to wp_deregister_script('jquery') and wp_enqueue('jquery-ui-dialog') dependancy Issue

comment:2 SergeyBiryukov17 months ago

  • Keywords reporter-feedback added; needs-patch removed

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.

comment:3 TobiasBg17 months ago

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.

comment:4 eliddon16 months ago

  • Resolution set to invalid
  • Status changed from new to closed

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.

comment:5 helen16 months ago

  • Keywords reporter-feedback removed
  • Milestone Awaiting Review deleted
Note: See TracTickets for help on using tickets.