As good practice, I usually scan already asked questions to find a solution to my issues but I have exhausted all search on this one.
In a nutshell:
I have developed my web site from scratch and then converted to a WordPress theme. Everything works fine on desktop, resized browser shows website responds and adjusts style to be mobile friendly (have also tested on mobile devices and so there's nothing wrong with the style). There are no errors that I could find on a console, not on desktop nor on mobile.
However none of the JavaScript functions work on the following devices I have and tested my web site on:
Funnily enough, on my Samsung Galaxy, I downloaded a couple of other browsers just to check:
I have uploaded my web site for testing and you can see it at: http://efcotest.web-merchant.co.nz/
Yes, I know having a slideshow on mobile view isn't great practice, but I intend to remove it, just that when I started testing for basic functionality (mainly the site menu) I discovered that JavaScript isn't working at all as per above brief.
Any help people?
EDIT: Alright so I remotely debugged with jsconsole.com and found that my JavaScript functions are called with unresolved reference errors. I've checked this both on my Galaxy Note's native browser and on the iPad. The same reference errors.
This was my suspicion, and now here's confirmation that my script file isn't loading on these specific devices ad browsers.
I really can use some help here as I am absolutely at a loss to understand why the script doesn't load, I have properly registered and enqueued the script in functions.php as per wordpress requirements so I can't see what the problem is. Help anyone?
Note: I should add that they are as per jsconsole, for example ->
Uncaught ReferenceError: ShowMobileMenu is not defined
Hi Esha, thanks for your response. Here is my functions.php, as you'll see I am enqueuing my script:
<?php
wp_enqueue_style( 'EFCOstyle', get_stylesheet_uri() );
wp_enqueue_scripts('jquery');
wp_register_script( 'Gf', 'http://efcotest.web-merchant.co.nz/wp-content/themes/EFCO/js/Generalfunctions.js', array('jquery'), false, false);
wp_enqueue_scripts('Gf');
remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );
?>
I just checked it on the Chrome desktop browser and yes, there's the exact same issue again (IIRC the Android native browser is also based on Chrome?)
UPDATE: I have managed to resolve errors in Chrome (desktop) by modifying my functions.php to:
<?php
function AddStyle() {
wp_enqueue_style( 'style', get_stylesheet_uri() );
}
function Addscripts() {
wp_register_script('jquery310', 'https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js');
wp_register_script('Generalfunctions', get_template_directory_uri() . '/js/Generalfunctions.js', array( 'jquery' ));
wp_enqueue_script('jquery310');
wp_enqueue_script('Generalfunctions');
}
add_action( 'wp_enqueue_scripts', 'AddStyle' );
add_action( 'wp_enqueue_scripts', 'Addscripts' );
remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );
?>
However the problem still persists on mobile, and I completely fail to comprehend why the script file is unable to be referenced.
Alright so after several hours of trial and error, I finally managed to track and trace the problem and debugged it - good riddance.
The problem was a fairly simple one: invalid syntax. This came to light when I luckily got the brainwave to summon my script from within my html:
jQuery.getScript("http://efcotest.web-merchant.co.nz/wp-content/themes/efco/js/generalfunctions.js", function(){
alert("script loaded if you see this message, executed? Look around, observe!");
});
As I was expecting, the message never popped up on my android native browser and so I went ahead and started remotely debugging using jsconsole. The above method fortunately caused jsconsole to return a more meaningful error, this time actually specifying the line where it occurred:
.../js/generalfunctions.js?ver=4.7.5:736
Uncaught SyntaxError: Unexpected token >
Turns out I was doing this:
if((Target => 0)...
instead of:
if((Target >= 0)...
But even the correct syntax above did not work, i.e. the script failed to load on the troublesome browsers and so I tried this instead:
if(((Target == 0) || (Target > 0)) && (Target ==(MaxSlides-1) || (Target < (MaxSlides-1))))
And this did work. Perhaps it's just an interpretation issue on part of the browser with regards to the greater than equal to operator as was clear from testing on other browsers which did not return any errors even with the => usage (which I know is not correct).
Anyhow, works now. Hopefully this post will help - should someone run into a similar issue. I've logged progress for this reason.