JQuery Mobile 1.4.5 does not seem to invoke javascript on ipad

Question

Using JQuery mobile 1.4.5 ( https://jquerymobile.com/ )

Ironically, everything works on desktop browsers, but I cannot seem to get anything to work when testing on an iPad ...

My stripped down page (HTML) contains the following:

<div data-role="content">
 <script src="test.js"></script>    
 <script>
  $( document ).on( 'pagecreate', function( event ) { do_something(); });
 </script>
</div>

The file "test.js", contains the following code:

function do_something() {

   alert('here in do_something()');

}

When testing on an iPad, all I get is a grey circle with a "spinning comet" rotating around in the circle and the page never even renders (Yes, I tried rebooting the iPad, clearing browser history/data, etc).

On all other browsers, I get the alert.

Ultimately, I am trying to load google maps into the page along with the javascript I need to manipulate various DOM elements as well as manipulate the map -- which I CAN do and is working on all other browsers -- just can't seem to get anything to work when testing on an iPad (I do not know how to view source or console messages via iPad Safari, which makes debugging a nightmare).

ANY suggestions would be helpful.

Thanks in advance.

Answer 1

First of all, you missed some important information like, were "all other browsers" running on your desktop machine or are we talking about other mobile devices? This is extremely important.

As you can see spinner that would mean jQuery Mobile and jQuery are loaded.

If they were successfully running on your desktop computer then you may check these:

• Make sure none of your content is running on or from localhost. This will work just fine on desktop computers, but if you try to test it on any other device it will fail.
• Make sure you are not using an absolute path in your jQM application, this will also fail on any remote device. I presume something similar may be the case as jQM is not able to show the first page
• You will need to use a remote debugging feature. As you are using an iPad I again presume you own a Mac. Follow this tutorial: https://appletoolbox.com/2014/05/use-web-inspector-debug-mobile-safari/ as it is the only fool-proof method where you will find what was wrong. Unfortunately, if you are using Windows machine then you would need to use Chrome and Android device.
• There's also a chance, some of your *.js content is loading from localhost or other sources not available to your iPad. This also may be the case as you stated above alert is not triggering on iPad. Which would mean that some major JavaScript has occurred thus blocking the load of other JavaScript content.
• And there's one other foolproof method you can use that always helped me in this case. Trim your code to the bare minimum, even if that means you need to remove most of your HTML content and JavaScript. Test it, if it works, start including removed content. First include remote JavaScript content, CSS and similar. Then if it still works, start including actual HTML and code. Sooner or later you will stumble on the problematic code, missing content, or content that was not loaded into your iPad.

Answer 2

Thanks to all who provided some insight...

Turned out it was an external javascript file that contained a try/catch block as:

try {
   // code
}
catch {
   // code
}

When changed to:

try {
   // code
}
catch(err) {
   // code
}

... after the change was made, all tests passed !!