Page changes not working in JqueryMobile on android using Phonegap Build - javascript

Got a strange one, the app runs fine in the browser, but when on an android device none of the page transitions work. I have checked in logcat and I can see the address changing to include the hashtag however the other page never loads.
I am using multipages so I have like 3-4 jqm pages within 1 html page and depending on button presses it moves to another one. I have tried disabling ajaxEnabled, I have tried using javascript to changePage($("#some-page")); none of it seems to work.
The crazy thing is it works fine in the browser, I have tried in FF, Chrome, Chrome with Ripple Emulator and there are no problems changing pages via href="#some-page" data-ajax="false" or using the changePage method, both work fine.
There are also no errors, as I have tried using the Weinre debugger (which rarely tells me of errors) and the adb logcat and both are clear, no problems from what I can tell. (I had to use adb logcat to debug initial JS errors as the Weinre one didnt list them).
I am using:
JQM 1.4.0 RC 1
Phonegap build (profile 2.9.0)
Android 2.3
Anyway I have googled and checked over and everything that has been suggested I have tried... so any new suggestions? :)
I have had a friend try it on his tablet which is running 4.* and it works as expected on his... not sure what that proves...

As no one else has answered I could not get to the bottom of the issue, it seems to be something to do with android 2.3 as it works fine in all 4.* versions.
I will relinquish the answer to someone who can give a technical reason as to why it does not work but for the moment I will mark this as complete.

Related

How does IOS devices read javascript in browser?

I had previously asked a question about my test project.
The dropdown which is most likely using boostrap.min.js works only in Android currently. We've changed the location of the folders so that the linked boostrap js is now like this: <script type="text/javascript" src="../js/bootstrap.min.js"></script>. Notice the ../ part was added. There are no problems reading the file on non-IOS based devices. When we check on the Iphone, the dropdown doesn't work. So I thought maybe its how Safari reads the CSS or Javascript?
Here is the site btw: http://star-allianz.com/en/en/index.html
I don't own an Iphone5 or Iphone6+ so its hard for me to test things.
Note: The missing files aren't a problem because the dropdowns still work in my Android phone.
PS: I've tried using online IOS device simulators and the built-in Google Chrome simulator. The dropdowns work even when I load the site. However, when using a real IOS device, they don't. Keep in mind, it works in Android. Also, I've never made any changes to bootstrap.min.js.

Typing in text field in iOS version of trigger.io app causes everything except background to disappear

UPDATE #2
So we found out how to debug our application utilizing the safari debugger. For those of you interested, here's the link on how to do this:
http://appletoolbox.com/2014/05/use-web-inspector-debug-mobile-safari/
Using this, we figured out that our issue was actually related to CSS that we were using in our code. In our body class, we had the attribute "overflow-y: auto". Upon deletion of this line of code, everything worked again in mobile safari.
~~~~~~~~~~~~~~~~
UPDATE: Upon further testing. It looks like if I go to the web version of this application (hosted on our server) from the safari app on our iPad, this bug still happens. If I do the same on the mac version of safari though, then this bug does NOT happen. Hopefully this information might be helpful.
~~~~~~~~~~~~~~~~
So we have a javascript hybrid application that's compiled using the trigger.io toolkit. Jquery, backbone.js, and marionette.js are use in this project. We just started testing on iOS devices.
Everything works fine on both the web / android versions of this app, but on iOS (both simulator and device), the following bug is occurring:
Upon loading up the application, on the first view, when you first tap into a text field the application freezes briefly. After the application unfreezes, the following error code is output into the trigger.io console:
_BSMachError: (os/kern) invalid capability (20)
_BSMachError: (os/kern) invalid name (15)
Everything looks fine, but then if you type more than one letter into the textfield, the entire application disappears except for the background view. You can tap out of the text field, and everything returns into view, but obviously this is something customers shouldn't be experiencing.
I've researched a bit, and some suggestions have said to try and edit the info.plist file. I've looked everywhere, but I can't seem to find this file. It's seeming like trigger.io hides this from the developer somehow.
Does anybody have any ideas as to what might be causing this issue or how to fix it?
Thanks!
So we found out how to debug our application utilizing the safari debugger. For those of you interested, here's the link on how to do this:
http://appletoolbox.com/2014/05/use-web-inspector-debug-mobile-safari/
Using this, we figured out that our issue was actually related to CSS that we were using in our code. In our body class, we had the attribute "overflow-y: auto". Upon deletion of this line of code, everything worked again in mobile safari.

Elements dissappearing in safari on ipad

Ive made a simple project with html and jquery. It works great in all browsers except for safari on ipads. Since apple doesnt have a windows version of safari i cannot check if the error is explicitly for ipad but i think so.
The problem is the photoboxes wich get their width from the jquery, they dont appear at all on the ipad. Chromes developer tools device mode shows everything correctly and i have css queries that take care of smaller screens so its only the ipad thats the problem. I havent found any way to do a web debug on the ipad either. Its hard to give a code example due to i dont really know what the error is but i have a live demo you can check out. For you on ipads, its supposed to be photos before the winter background.
http://www.mj-bygg.se/ipad/default.aspx
I am also getting the same error on desktop Chrome on the first load. If I refresh, then the pictures load fine but on first visit to the link I only get the footer image (trees.)
On the first load, none of your jQuery heights/widths are being applied. No errors in the console and if I rerun the function it works as it should (without reloading the page.)
I suggest either pushing the script further down the page or using $(window).load(function() {}
instead of
$(document).ready(function() {}
That is the only thing I can assume is wrong if it fails first time but works with the page being cached.

Custom jQuery Slider does not work on iOS 7 Safari

I am working on a mobile site, my first, and I am facing strange problems. I have created a custom jQuery slider with left and right buttons. I have tried it on my Android's own browser, Firefox and Chrome for Android. It works fine, as it is supposed to.
When I gave the work to my client he said it doesn't work on iPhone for which it is originaly intended. I was confused as how this is possible, as it worked flawlessly on my Android. So I asked my friend for his iPhone 4S with iOS7 and opened up the site. To my surprise, the slider did not work. I took out my phone and opened it on my Firefox, it worked!
Why is this so? If it is working on Android, shouldn't it be working on iOS too? And how can I solve it?
Regards
I came to know why this happens. By default, iOS Safari doesn't allow everything to be "clickable". This means you need to make it cursor: pointer via CSS to make it "clickable".
I have got my answer from here: This link tell is why this happens. Read it!
Regards

Javascript failing in Firefox/Firebug?

I'm using Firebug to develop a JS app. All of a sudden, when I got to the page, it appears that I do not have JS enabled - the <noscript> warnings are rendered, and nothing works. When I go to the same page in Chrome, everything works fine.
What could be happening? I reverted recent changes back to a point where it worked, but it's still failing.
UPDATE: I just went back to the page in question, and now it works fine. I had been working on it in Chrome. Odd.
Honestly, I've had to disable Firebug entirely. Way too many errors and bung-eyes there.
Worked wonders for a long time, but recently... not so.
I've switched to Chrome + Developer extension - which does fall short, but it does the trick.

Categories