Jquery mobile with Android not displaying correctly - javascript

I am using jquery mobile 1.1.1 with android 4.0.3 and phonegap. Everything seems to be running smoothly and on iOS and the earlier android versions however, on this version of android stuff is displaying incorrectly. I am dynamically creating an unordered list and then calling $('#myList ul').listview('refresh'); on it. However when it displays it looks like this:
Then I click the screen and it flickers and displays as this(notice how I lose the footer):
Is this a bug with android 4.0.3? Is there a way to get this to display correctly off the bat?

I had it today. I don't know if you're in the same case as me, but I used -webkit-backface-visibility:hidden css attribute to "correct" the white flash with previous version of jQuery Mobile. But in the 1.1.1 with PhoneGap, I had the same thing than you.
So if you use it, just remove it ! If not, I'm sorry for you...

Related

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.

Page changes not working in JqueryMobile on android using Phonegap Build

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.

How to make UI in PhoneGap, jQuery Mobile good?

I'm new to PhoneGap. I created a sample application using ponegap and jquery mobile which contain some button and few other form elements. While I installed in my mobile(Samsung Ace), i feel the UI of button and few other form elements are not looking good. Cornering in button is not perfect.
I'm using the following
cordova-2.9.0.jar
jquery-2.0.3.min.js
jquery.mobile-1.3.2.min.js
jquery.mobile-1.3.2.min.css
Am i missing anything? Please help me.How to make the UI look and feel good?
Thanks
To make UI in Phonegap, jQuery Mobile is good, but not the best. If You want the best result in performance and UI then you'll have to use Sencha Touch. Please visit this Link it may be helpful to you.
I would suggest to use ThemeRoller to get your UI in jQuerymobile framework
Check the following link
http://jquerymobile.com/themeroller/index.php
Speaking for myself, I've used jQuery Mobile with Phonegap, and I'm fairly happy with it. I don't think the problem you're having with the corners is jquery mobile, but rather related to whatever emulator program you're using; they work fine for me on various resolutions on my laptop, tablet, s3 & iphone, even when I zoom out/in between 25% and 500% on chrome using ripple.
To make a nicer interface, you can use jQuery Mobile's ThemeRoller.
jQuery Mobile framework is not important for phonegap app, you can customize your own styles using normal HTML and CSS (CSS3 also).

open native select pop-up in android with js

I'm developing android and ios app with phonegap, so i have a select and i want to open it with js, on ios simply focusing element works nice, but in android it does nothing, simulating click on select also gave no result, maybe there are some plugin for that?
finaly i found a plugin for this issue, you can download it from here

Jquery Mobile back button won't work

I'm making an PhoneGap app using Jquery Mobile, but I have a little problem with the navigation. I've added a back button on the header of every page using this code:
Atras
The problem is that it works fine on my PC browser, but when I install it on the phone it just won't work.
Any ideas?
did you look at the PhoneGap jQM Docs?
http://jquerymobile.com/demos/1.0/docs/pages/phonegap.html
since it's a navigation problem maybe
disabling the pushState feature
as suggested. Also what version of jQM and PhoneGap are you using?
Could be related:
http://encosia.com/why-phonegap-1-1-0-broke-jquery-mobiles-back-button/
Did you try the Ripple emulator (Chrome version) to check if there's any JavaScript error?

Categories