Couple of Questions
Hello Everyone, I seem to be having tons of trouble working on porting my site to jQuery mobile... Here are the three major problems I have ran into. 1. How do you size form objects/prevent defaults. I would like to make my own "buttons" using the <button> tags without having jQuery mobile make a huge button. 2. I have a few forms that I want to be submitted via AJAX requests. When I submit the form it posts it actually submits the form (my variables go up to the nav bar) instead of run through
Ajax error in desktop browser
Hi, Since alpha 4 update, the ajax navigation in a desktop browser always shows the error message, then the page is loaded through a normal non-ajax request. This doesn't happen when I uso the demo site, but I have not found the difference between the demo and my app. Anyone has been through something like that? Thanks
Styling of a select list box as a navbar item
I'm using a navbar that contains multiple links. The navbar always has three links but could potentially have 2 to 3 additional links in certain scenarios. Instead of cluttering up the navbar with too many options I would like to add a select list box as an additional navbar item as a "More" option to display additional navbar options. I can add the list box without a problem as a fourth element of the navbar and it works as expected. However, the listbox ends up with the standard rounded corners
Odd Behavior With Header Div only on Some Pages
I'm struggling with formatting in the: <div data-role="header"></div> Section of my page. I'd like all pages except the landing page (/) to have a header bar, and simply leaving out the header div seems to work fine for that page. When other pages load, they also look fine. But if I go "back" to the home page, the content <li> floats over the image I'd like to display. My front page looks something like: <div data-role="content"> <img src="/some/image/path/image.jpg" style="width: 100%;" /> <ul data-role="listview">
A bunch of JQuery Mobile tutorials and articles
I've kept myself busy on my blog keeping up with JQuery Mobile and have several tutorials/articles that might be of use for some people on this forum: Submit a JQuery Mobile form via AJAX with PHP Build a simple chat web app with JQuery Mobile and NowJS (a module for NodeJS) Create a blog with JQuery Mobile and ASP.NET MVC 3 with C# Create a basic project layout using JQuery Mobile, ASP.NET MVC 2 and HTML5 Using AJAX with JQuery Mobile Using the HTML 5 Canvas with JQuery Mobile Create a blog with
iPad Home Screen version not rendering
We're using jQuery Mobile for an iPad web app. We're having problems running the app in "full screen" mode, namely, full screen mode doesn't work. Running it in Safari results in the address bar being visible, and using the "add to home screen" functionality causes further problems. When using the HTML5 doctype, the page simply seems to render as plain text (none of the stylesheets or javascript files are loaded). Instead, using the XHTML 1.0 Transitional Doctype causes the page to render correctly,
Alpha 4...Error in Internet Explorer after upgrade...using jQueryMobile and ASP.Net.
Hi... Anyone using jQueryMobile and ASP.Net. I am getting an error after the upgrade to Alpha 4. Getting a JS error, "Error: Exception thrown and not caught". I do not have this issue with an iPhone or Android based phones. Only on Windows Mobile 7 and also Internet Explorer 8 on desktop Here's my simple ASP.NET page below. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>
Forms on Windows Mobile 7
Has anyone managed to implement a form successfully on Windows Mobile 7? I'm using an HTC Spark / Trophy and whenever the phone sees an input tag, a blank page is returned. Strangely the code works on the jQM site, but when I place the code from the forms test page on either my own machine or my server, it has the same problem - input tag results in blank screen. The response is coming back the same but even if I set: $.mobile.page.prototype.options.keepNative = "input"; - to override the jQM element
A4 problem with ui-li-aside
I'm having a problem with the list ui-li-aside style in A4. It worked pretty good in A3, but after switching to A4 it leaves a noticeable gap on the right side, which leaves less room for text and makes the display harder to read. Here's a simple example, with the screen shot below comparing the same layout in A3 vs A4. Is anybody else having this issue? Is there a work around? <div data-role="content"> <ul data-role="listview" data-theme="d" data-inset="true" id="Details"> <li
horizontal and vertical orientation event
After I posted a fix suggestion I implemented a event to facilitate my work. When the orientation is horizontal or vertical. Should be nice if these events come implemented in jquery mobile My implementations to this: after including the jquery script, I added.. $(function() { var setOrientation = function() { if (window.orientation === undefined) { // desktop return; } if (Math.abs(window.orientation) == 90) { // horizontal $(document).triggerHandler('onHorizontalOrientation');
Refreshing datepicker
I am setting the date of the datepicker programmatically under certain conditions. For example, I have an "arrival" and a "departure" input (type=hidden), each with their own datepicker. If the arrival is later in time than the departure, my code is automatically updating the departure to 1 day after the arrival that was just set. My issue is that my datepicker for departure does not highlight the selected date. It works fine if I *use* the departure datepicker to manually set the date, but when
Alpha 4 - orientation change CSS don't work in android [FIXED]
in my phone (Motorola Defy - android 2.1-update1) don't work the change class (portrait landscape) in orientation change. To fix it I added after the jquery.mobile-1.0a4.js the code: $(function() { onChangeOrientationResize = function() { $('body').removeClass('portrait landscape').addClass(window.orientation ? 'landscape' : 'portrait'); }; if ("onorientationchange" in window === false) { window.addEventListener("resize", onChangeOrientationResize, false);
checkbox toggle (mobile)
I'm trying to trigger a toggle event from a checkbox using jQuery mobile. Here's a simple version of the html: <input type="checkbox" name="someName" id="someName" checked="checked" /> <label for="someName">Some Named Label</label> <div class="hiddenByDefault"> -- content that's hidden by default and displayed when the checkbox is unchecked -- </div> Here's the JS in it's simplest form (not working): $(".hiddenByDefault").hide(); $("[name=someName]").change(function () { $(".hiddenByDefault").toggle();
soundcloud jquery plugin clash
Hi all this is my first post and I only stumbled upon jQuery mobile last night. here's what i'm working on: ctek.dj I got everything up and running fine on a basic wordpress multisite installation and I really ilke jQuery mobile, I have absolutely no jQuery knowledge but was able to get this up and running very quickly. My problem is with the soundcloud jquery players, you can see one on my site here. When you click 'play' jQuery mobile tries to open #play which results in an "Error Loading Page"
jQuery Mobile Core?
When comparing the standard jQuery to jQuery Mobile the mobile version is half the size. The mobile version also includes "plugins" for UI stuff like navigation, fields, buttons, etc... Is there or will there be a "core" version of jQuery mobile without the UI stuff? I've heard that you can just use the regular jQuery and it'll work for both desktop and mobile (or it will), but what if you're developing a web application just for mobile? You wouldn't need support for IE or FireFox. In my situation
Chained select box like state and city in jqm....
Hi ... i have a form where i need user to fill out state and city. State and city are related to each other by foreign key in database... So i have put state select box like this.. <div data-role="fieldcontain"> <label for="state_id" class="select">State:</label> <select name="state_id" id="state_id"> <option value="" data-placeholder="true" >Choose</option> <?php foreach ($states as $states):?> <option value="<?php echo $states->id?>" ><?php echo $states->states;?></option>
Catching events from selectboxes popups
It would be nice to add events for marking/unmarking checkboxes in the popups. Currently only selecting option can be caught via 'change' event and then processing value of the input. It can be overriden by grabbing the popup itself but that's not a sleek solution .
A4:Scrollview+Select LOV
Hi All, Alpha 4 make Select LOV not functional when used together with scrollview plugin. One can be reproduced directly in "Form element Gallery" of /experiments/scrollview/. Select options either do not appear or for some of them it takes upto 5 seconds to be presented to the user. Please advice
iOS-ready slider with range?
I've seen that there's very nice slider implementation, though what I need is one that would allow me to create a slider that can select a range between values. Like... Select 5 - 7 where total slider range is 1-10 It'd have two pickable points and color filled only in range between them. How to set it up? Or create? Thank you very much for any help or hints!
Trigger an event at the bottom of screen with scrollview plugin for jquerymobile
Hi: I would like to trigger an event when the user scrolls to the bottom of the page when using the scrollview plugin for jquerymobile. This will be handy for "infinite scroll" functionality: as you get to the end of content items are added to the end of a list. The scroll (and therefore the fun ;-) ) never ends. I got it to work with a hack but I'd like to see if there was a cleaner way to do this. At the bottom of the _stopMScroll function I added: var c = this._$clip; var v =
Where's vmouseclick?
Testing out the new A4 release and the new vmouseclick virtual event doesn't seem to be firing. If I bind a regular click event to the element everything works as it should, but if I change it to vmouseclick nothing happens.
jQueryMobile forum - shows empty forum page on page 2 of errors
http://forum.jquery.com/jquery-mobile/filter/problems/2 This page shows a blank-ish page for me: http://img6.imagebanana.com/img/4z7qzd78/jqueryforum.png
thumbnails listview
I have a listview with thumbnails, and updated my code to cope with alpha 4 requirements on the anchor to cover all the contents of a list item, including the thumbnails. So, my code ended like this: <li class="ui-li-has-thumb ui-btn ui-btn-icon-right ui-li ui-btn-up-c" data-theme="c"> <div class="ui-btn-inner ui-li"> <div class="ui-btn-text"> <a href="javascript:conectar('10482');" class="ui-link-inherit"> <img src="http://www.e-xis.com.br/ftpbahia/galeria/g/{40F5E5E2-CE47-49B0-8AE8-4E4195189C6E}_colo.jpg"
Large Select option cropping title/header
Example: http://jsfiddle.net/Y6WfL/7/ In the example I have taken the code from the JQM site ( http://jquerymobile.com/demos/1.0a4/docs/forms/forms-selects.html ) The documentation says that if a option has no value it will be used for the header, but in the example the header is broken as I don't see the text and the close button is only half visible. Any thoughts on how to fix this?
bug: tapping listview item multiple times
It seems there's a strange behaviour happening when you tap a list view item multiple times before it finishes loading the target content (in this case, a static html file on the device). It will continue to load the content in the new page, but when you go back to the list view, it will then fire off one of the other taps and load the content page again. This is when i'm in a nested list, and I can even reproduce it in a desktop browser from the demo page, but you have to try and spam click the
A4: right arrows not visible in list items on HTC Desire
Can someone explain to me why with JQM A4 on Android the right arrows are not visible in list items in this application: http://www.certeza.nl/politicos/ ? They are visible in Chrome and Iphone Simulator.
A4 nested listview with image causes layout problem
Hi, Thanks for the great work on JQuery mobile! In a3 I had a nested split button list view with image thunmbnails. There appears to be some issues with that in a4. To narrow it down I tried a nested list view with image thumbnails. On the nested list the back button is cut off. It seems to make no difference if the image exists or not. If I remove the img the sub page lays out fine. Here is a repro: <html> <head> <title>Page Title</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.css"
Custom 500 pages?
I've got a custom 500 page, e.g. if the user goes to say this url using their browser: http://mysite.com/foo and foo causes a server error, then it sends back a custom error page. If I access the custom error page directly, e.g. http://mysite.com/500 then it renders as expected using jQueryMobile. But if I access http://mysite.com/foo then the page gets rendered as plain text basically. Is it possible that jQueryMobile is detecting that the response code is 500 and not 200 and therefore deciding
Alpha 4 problems
Hi guys, I'm working on a mobile application and I use PhoneGap & jquery mobile A4 and I use a WEB SQL database (to reduce network usage). Here is a list of issues: 1) Footer: I'd like to keep the same footer and I use the data-id to replicate it in every page. It worked in alpha 3 but now the footer isn't replicated automatically anymore. 2) GET parameters: I tried to use $.mobile.changePage specified at http://jquerymobile.com/demos/1.0a4/#docs/api/methods.html to pass GET parameters to the new
Dynamic List, returning the ID, Text or Unique value.
Hi, I have populated a list via XML but what I would like to have is the end user click on the list item so I can extract the content - but I do not know how to do this. The list is populated through a for/next loop that builds the list - see below. $(xml).find('club').each(function() { $('#clubs').append('<li><a href="#">'+$(this).find('team').text()+'</a></li>'); }); This outputs a list of 5 items in but obviously will vary over time. How would I be able to extract the content of each item? i.e,
Alpha 4 - Getting error on changing page.
Hi folks, great job the release of A4! I've updated my webapp today but i'm getting some errors while changing pages. Some of my pages wont load and the loading screen with spinner keeps spinning, nothing is happening. I've listed the error below, any idea? Uncaught TypeError: Cannot call method 'replace' of undefined a.mobile.changePage.a.ajax.success jquery.mobile-1.0a4.min.js:59 d.d.extend.each jquery-1.5.2.min.js:16 d.d.fn.d.each jquery-1.5.2.min.js:16 a.mobile.changePage.a.ajax.success jquery-1.5.2.min.js
Variables, Passing Parameters, and Functions
Hey guys, I am working on an app and have reached a standstill on somthing I thought would be simple. I need to access a variable that I am setting from a click/tap event in a pagebeforehide event. Am I insane? Is this impossible?? See below: $('.list_title').live('tap click', function(event) { listID = $(this).attr('id').replace('list-', ''); //setting the listID here when a user clicks. want to use it later. }); $('#add_list, #erase_all').live('pagebeforehide',function(event, ui){ alert(listID);
Submit buttons on Nexus S Android
Hello all, Happily migrated to Alpha 4 now and everything seems to be working quite nicely. However, I have 2 android devices a HTC Desire HD running Android 2.2.1 and a Nexus S running Android 2.3.1. I have a form which includes my button which has following markup like so: <div data-role="fieldcontain"> <input data-role="button" onclick="$('#logonForm').submit();" type="submit" data-theme="b" id="logonButton" value="Logon" rel="external" /> </div>Now we've tested this on iPhone
Listviews
I think it's great jQuery uses text-overflow:ellipsis; in order to keep layout issues out, but in my case i want titles to be as large as possible. I've attached a screenshot to this post to show what i mean. I want my listview titles to be as long as possible and use linebreaks and it needs to be vertical-centered. I don't want to set line-height to 80px since i want linebreaks. Margin or padding doesn't seem to be a solution too, since some lists may have a short title on one line and some of them
How to bind a click event to a radio button?
I am trying to bind a click event on a radio button. The click event is not working but mouseup and mousedown is working. Mousedown and mouseup work on a desktop browser but doesn't work on the iPad. I am binding the event with the following selector right now on a radio button list: $('#list .ui-radio').live('mousedown', ...); What should I use in this case? Thanks,
listview A4
I just switched my project from A3 to A4 and noticed a change in style and behavior. Why don't list elements become active buttons anymore? <ul class="" data-role="listview" data-inset="true" > <li> <div class="ui-grid-a"> <div class="ui-block-a"> <a href="#">Inhalt</a> <p>Text</p> </div>
Disable "tap to toggle" fixed header and footer
Hi everybody, Is there a way to disable the fade in / fade out effect on tap with fixed toolbar ? http://jquerymobile.com/demos/1.0a3/#docs/toolbars/../../docs/toolbars/bars-fixed.html Because when users scroll down or want to tap an element, footer and header disapear, and looks like it is bugged... Thanks for your help, Tom
How to activate ajax-get injected html in jqm?
Hi, in my jqm webapp i have the following problem: i want to refresh my data-role page very x seconds. the refresh itself works fine, but its not in jqm-style. here my index.php: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Test App</title> <link rel="stylesheet" href="css/jquery.mobile-1.0a4.min.css" /> <link rel="stylesheet" href="css/mymobile.css" /> <script src="js/jquery-1.5.1.min.js"></script> <script type="text/javascript" src="js/mymobile.js"></script> <script type="text/javascript"
Transition between different versions of same dynamic page
Hi all, I needed to render a complex and variable path hierarchy within JQM so the only viable solution was to use the same page and constantly re-render the html as the user navigates forwards and back through the hierarchy. After some fiddling, the dynamic page is behaving nicely - but with one small problem... When a new path in the hierarchy is selected, the script deletes the old html and appends the html relevant to the new path to the same anchor in the page - but this means there is no (semblance
Documentation: Navigation in jQuery Mobile
I volunteered to work on documentation for jQuery Mobile -- I'm doing Navigation. Here's a link to that documentation, which is a work-in-progress until the beta release. http://jqx.ca/nav/ This aspect of documentation has its own GitHub repo here: https://github.com/StevenBlack/jQuery-Mobile-Navigation-Docs Feel free to contribute! Please post any concerns, comments, suggestions, and omissions in the issues page of that GitHub repo. https://github.com/StevenBlack/jQuery-Mobile-Navigation-Docs/issues
Next Page