Problem with jQuery on android browsers


#1

Hello,

I’ve tried my theme with the standard browser of my android mobile phone (I couldn’t check out a name. It’s just called “Browser”) and my whole jquery Code doesn’t work, even my list menu, which I use for mobile devices instead of the navigation bar.

I also tried Dolphin Browser and Boat Browser where it also doesn’t work.
But it works with Opera Mobile Browser and Firefox Mobile Browser.

Does anyone have similar experiences?

I load jquery + my jquery file (functions.js) in the functions.php with this code

wp_deregister_script('jquery');
wp_register_script('jquery','http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', '1.7.1', FALSE); 
wp_register_script('functionsJS', get_template_directory_uri() . '/js/functions.js', array('jquery'), '1.0', TRUE );
wp_enqueue_script('jquery');
wp_enqueue_script('functionsJS');

The functions.js starts with

$(window).load(function () {

I also tried things like

jQuery(document).ready(function($){

#2

hi,

you say wp_enqueue_script(‘jquery’); Why not name your jquery version “query_custom”. I’m just saying, you could try that.

jayc


#3

yeah, and if you use a custom version of jQuery ain’t you suppose to use $(document).ready(function(){} ?


#4

thanks for help.

I already figured out the problem but haven’t solved it yet.

In the theme options the user can set some options for Nivoslider which I give from PHP to Javascript in the footer.php:

echo "";   ?>

In my JS file I call this variables

	if ( nivoslider_speed == '' ) { nivoslider_speed=4000; }	
	$('#slider').nivoSlider({ 
		effect: nivoslider_effect,
		pauseOnHover: false,
		controlNav: false,
		pauseTime: nivoslider_speed
	});

But the variables don’t have a value with my mobile browser (I tried it with alert).

Any Ideas how I could fix it?
I already had problems with that PHP code in the footer.php before with IE when it was located in the header.php: The whole page was empty. That’s why I put it in the footer


#5

hi,

I dont think you are sending the variable properly, @see documentation around wp_localize_script function.

jayc


#6

I ‘Think’ you should have something like this:

wp_enqueue_script( 'portfolio_js' ); $js_data = array('POST_TYPE'=>$portfolioScreen['post_type']); wp_localize_script( 'portfolio_js', 'portfolioPHPObj', $js_data );

now you can access the variable in JS like this:

var post_type_name = portfolioPHPObj['POST_TYPE'];

cheers!
jayc


#7

^ +1

Also, don’t deregister the WP copy of jQuery if building a commercial theme. I believe that is a rejection reason here, just as it is on WordPress.org.


#8

That’s right. Always use jQuery version that is part of WordPress package or else you can cause incompatibilities with plugins. Also use wp_localize_script() for sending variables to your scripts. This way your code stays clean and you ensure that variables are placed before your script.


#9
digitalimpact said

^ +1

Also, don’t deregister the WP copy of jQuery if building a commercial theme. I believe that is a rejection reason here, just as it is on WordPress.org.

+50000 that’s what I was about to say


#10

thanks a lot. solved my problem


#11

Hm I can’t get jquery to work without deregistering + registering it.

I tried building in the following code before wp_head();. Also tried it in functions.php

<?php wp_enqueue_script('jquery'); ?>

#12

You don’t have to enqueue jQuery manually. Just mention it in the array of scripts required for your script file, WordPress will load it automatically. Also make sure that you have deleted all the code that deregisters and registers new version of jQuery.


#13

What do you mean by
"Just mention it in the array of scripts required for your script file"
Could you give some example code please

I have removed every code that deregisters and registers jQuery


#14

hi,

make sure you add the proper hooks when to enqueue scripts, I have like this:

add_action('admin_enqueue_scripts', array($this, 'adminEnqueueScriptsHandler'));
	add_action("wp_enqueue_scripts", array($this, 'WPEnqueueScriptsHandler'));

basically first is for the admin, second is for the front-end (the $this is because mine is within a php class)
jayc


#15

I’ve included my scripts like so:

function lld_enqueue_scripts() {
	if(!is_admin()) {

		wp_register_script('CssBrowserSelector', get_template_directory_uri() . '/js/css_browser_selector.js', array('jquery'), '1', FALSE ); 
		wp_register_script('superfish', get_template_directory_uri() . '/js/superfish.js', array('jquery'), '1', FALSE ); 
		...
		wp_register_script('functionsJS', get_template_directory_uri() . '/js/functions.js', array('jquery'), '1.0', TRUE );

		wp_enqueue_script('jquery');
		wp_enqueue_script('CssBrowserSelector');
		wp_enqueue_script('superfish');
		...
		wp_enqueue_script('functionsJS');	
	}
}  
add_action('wp_enqueue_scripts', 'lld_enqueue_scripts');  	

Is there anything missing?
I removed the deregistering and registering of jquery and jquery doesn’t work anymore.


#16

Why if(!is_admin()) { ?! :slight_smile:


#17

Because it’s not needed in the dashboard.
Many themes use this. But even if I remove it, it doesn’t work :wink:


#18

Even if I just type

$(window).load(function () {
	alert("s");
}

in my functions.js it’s not loaded.

BUT it works when deregistering and registering jquery.


#19
LovelessDesign said

Because it’s not needed in the dashboard.
Many themes use this. But even if I remove it, it doesn’t work :wink:

Whenever you enqueue a plugin in the functions.php, it will be outputted only in the front end. So that function is really useless…

Do you have wp_head() & wp_footer() in your theme? If WordPress is loading jQuery, it loads it in one of these two hooks and if you’re missing them you’re error is obvious…


#20

Have you tried noConflict mode of jQuery?