jquery-mobile

Force iOS numeric keyboard with custom / currency pattern

For now, JavaScript is the only solution. Here’s the simplest way to do it (using jQuery): HTML <input type=”text”> JavaScript $(‘input[type=”text”]’).on(‘touchstart’, function() { $(this).attr(‘type’, ‘number’); }); $(‘input[type=”text”]’).on(‘keydown blur’, function() { $(this).attr(‘type’, ‘text’); }); The idea is simple. The input starts off and ends up with type=”text”, but it briefly becomes type=”number” on the touchstart event. … Read more

How do you remove a button’s active state with jQuery Mobile?

You can disable the ‘highlighted blue’-state in the ‘mobileinit’-event before loading jQueryMobile-script: <head> <script> $(document).bind(‘mobileinit’, function () { $.mobile.activeBtnClass=”unused”; }); </script> <script src=”http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js”></script> </head> Now, when you click on a link, no class will be added after the click is performed. You will still have the ‘hoover’ and ‘down’ classes.

How to redirect on another page and pass parameter in url from table?

Set the user name as data-username attribute to the button and also a class: HTML <input type=”button” name=”theButton” value=”Detail” class=”btn” data-username=”{{result[‘username’]}}” /> JS $(document).on(‘click’, ‘.btn’, function() { var name = $(this).data(‘username’); if (name != undefined && name != null) { window.location = ‘/player_detail?username=” + name; } });​ EDIT: Also, you can simply check for undefined … Read more

Dynamically adding to in jquery mobile

Try this: $(‘ul’).append($(‘<li/>’, { //here appending `<li>` ‘data-role’: “list-divider” }).append($(‘<a/>’, { //here appending `<a>` into `<li>` ‘href’: “https://stackoverflow.com/questions/5925810/test.html”, ‘data-transition’: ‘slide’, ‘text’: ‘hello’ }))); $(‘ul’).listview(‘refresh’);

Phonegap Application text and layout too small

I had the same problem and solved it changing the viewport. I also thought the problem was phonegap, but it really was that the devices used for testing had different dpi. My solution was to change the target-densitydpi on the viewport to: <meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi, user-scalable=0″ />

Phonegap Android Back Button – close app with back button on homepage

Update: this has stopped working with a latest Phonegap update (supposedly). Feel free to offer a working solution if you know it. Here’s how I do it: document.addEventListener(“backbutton”, function(e){ if($.mobile.activePage.is(‘#homepage’)){ /* Event preventDefault/stopPropagation not required as adding backbutton listener itself override the default behaviour. Refer below PhoneGap link. */ //e.preventDefault(); navigator.app.exitApp(); } else { navigator.app.backHistory() … Read more

Creating templated/persistant header/footer template in jQuery Mobile and PhoneGap

I’ve been trying to tackle this problem for a few days now and I’ve gotten really close to the solution. I use the following HTML: <body> <div data-role=”page” id=”page”> <div data-role=”header”> <h1 id=”title”>Title</h1> </div><!– /header –> <div data-role=”content” id=”content”> <p>Loading…</p> </div><!– /content –> <div data-role=”footer” id=”footer” data-position=”fixed”> <div data-role=”navbar” id=”navbar”> </div> </div><!– /footer –> </div><!– … Read more

Sencha Touch or jQuery Mobile? [closed]

Sencha Touch is an application framework (you create your interface programmatically through Javascript) while jQuery Mobile is more of a mobile enhancement library (you write regular HTML for your content, then add jQuery mobile for transitions/animations). jQuery Mobile has an easier learning curve, but Sencha Touch can better simulate “native” apps.