So this is kind of a weird issue... I'm using JQuery mobile 1.4 and I am getting some unusual behavior. Here's what I have...
On my main page is a selectmenu with the data-native-menu set to false. The selectmenu (which is dynamically set) can sometimes have a lot of elements. When it does, the menu becomes a popup. I have another page that is accessed from a button using
$.mobile.changePage('#lbsPage', {transition:'flip'} );
Here's the strange part. When I go to the lbsPage from the main page, go back, then access the selectmenu (with the popup values), after selecting an option it goes back to the previous page.
Now in case this explanation sucks, here's a link to my site where you can see it for yourself. Here's what you can do... Go to Menu -> Import BeerXML -> Back. Then go to The Fermentables -> Select 'Grain' from the Type menu -> Then open and select anything from the Fermentable menu. You'll notice that it goes back to the Import BeerXML page. What causes this to happen?
So I was able to find the solution to my problem. For some reason that I don't remember, I set the configuration option hashListeningEnabled to false. After removing that option (which defaults to true), my page is reacting as it should.
Related
I have a page which displays a calendar/diary and lets you navigate back and forth using a form so the URL often looks like:
calendar.php?&month=6&year=2014
The popup works fine initially before there is any string after the .php. However, once the "&month=" etc is there the popup doesn't work. I note as soon as the popup loads it shows up #&ui-state=dialog in the url.
Is there a simple solution for this? (Other than changing the form to method=post, which I haven't yet tried).
Many thanks.
The simplest solution is to add:
data-history="false"
to your popup <div>. That will avoid URL modification when the popup is open.
When I use this setting I have one in a form in a dialog, and one in a form that is in a popup. The dropdowns look different.
When data-native-menu="false" the dropdown in the dialog appears in another dialog, which actually looks quite nice. I assume this will allow a more consistent look and feel accross devices.
However when I use this setting data-native-menu="false" on a Select in a popup it does not show the standard select, not the dialog.
Thanks
There's a good reason for this.
As you can see there are 2 kinds of select widget. First one uses native looking select box (one showed with data-native-menu="true"). Other one still uses native select box but it hides it and shows custom jQuery Mobile select box widget (one showed with data-native-menu="false"). This jQuery Mobile widget is shown as popup. This is important point.
Second, mentioned problem is unsolvable, at least from the point of current jQuery Mobile framework, and here's why. In few words, when working with jQuery Mobile popups, one popup can't open another popup. Two popups can exist in the same time. Thou you can always close one popup before opening another one, but this is not usable in your case. Because jQuery Mobile select widget is popup it can't be used inside classic popup widget.
If you don' believe me you can find it in official documentation here, just search for text: "Chaining of popups not allowed". And you will see this text:
The framework does not currently support chaining of popups so it's not possible to embed a link from one popup to another popup. All links with a data-rel="popup" inside a popup will not do anything at all.
On the other hand, dialog is a variation of a classic jQuery Mobile page, just with large margin and semi transparent overlay. It can be used to show popup, just like normal jQUery Mobile page.
SO...my app has a few issues, but I am DESPERATE to solve this one first. Any thoughts and suggestions are welcomed. Here is the app:
http://pocketfacilitator.com
Here's the issue - (NOTE, Firefox doesn't even allow this issue to fire, so maybe try Chrome or Safari, or a mobile browser):
From the home page, click on Portables > List All Portables. Now, click on any of the PLUS signs on the right (or two or three, doesn't matter). Now, check the "TODAY" page (in the very bottom nav bar). It will display the list of games you clicked on, but the way they are displayed is totally jacked. BUT...if you RELOAD the page (or just click the red CLEAR button), and repeat the process, it looks normal. What have I done wrong?
If you dare: in Firefox, it won't even let me add an activity -- clicking on the "+" button yield NO effect.
I appreciate any help. Cheers!
Try to call refresh() method on your listview after you dynamically add items
$(this).parent().appendTo('#todaylist');
$('#todaylist').listview('refresh');
See Updating lists
If you add items to a listview, you'll need to call the refresh()
method on it to update the styles and create any nested lists that are
added.
I'm using phonegap and jquery mobile to build an app.
Until now the "all pages in one html file" was being used, but the project is going to be really big and will be bad to have all in one file.
All the pages are in the file index.html
Only one called mentions in mentions.html.
When going from the page "dashboard" from index.html to "mentions" on mentions.html is ok, the transiction go well.
But when the back button is clickd, it goes to the dashboard page with No transiction .
here's my button:
Dashboard
Use jQuery Mobile's back button link.
Dashboard
"Back" button links If you use the attribute data-rel="back" on an
anchor, any clicks on that anchor will mimic the back button, going
back one history entry and ignoring the anchor's default href. This is
particularly useful when generating "back" buttons with JavaScript,
such as a button to close a dialog. When using this feature in your
source markup, although browsers that support this feature will not
use the specified href attribute, be sure to still provide a
meaningful value that actually points to the URL of the referring page
to allow the feature to work for users in C-Grade browsers. If users
can reach this page from more than one referring pages, specify a
sensible href so that the navigation remains logical for all users.
Also, please keep in mind that if you just want a reverse transition
without actually going back in history, you should use the
data-direction="reverse" attribute instead. Note:
data-direction="reverse" is meant to simply run the backwards version
of the transition that will run on that page change, while
data-rel="back" makes the link functionally equivalent to the
browser's back button and all the standard back button logic applies.
Adding data-direction="reverse" to a link with data-rel="back" will
not reverse the reversed page transition and produce the "normal"
version of the transition.
I use chained dialog boxes to collect some input data. Every dialog has a select box, a next button and a popup menu that enables the user to jump back to every dialog in the chain before the current one.
On a startpage a button opens the first dialog box. When you select an entry from the select box and go over to the next dialog by clicking the next-button everything works fine. Jumping back to the first dialog by selecting the entry in the popup-menu also works fine. But after clicking again on the next-button to get back to the second dialog, selecting an entry in its select-box leads to closing the dialog and showing the startpage again.
Why is that? I think it has something to do with the ui-state=dialog-URL-adds in the hash (issue 949), issue 1030)
I use data-native-menu="false" in my select boxes. When I use the default data-native-menu="true" everything works fine.
JQ V1.8.2
JQM V1.2.0
Tested in FF, Safari
I also started an issue ticket on the JQM githup page.
The mentioned ticket brought the solution. This behaviour will be fixed in the next release. Here you can test my problem and here you can try the solution that brings the next release.
By the way: In the meantime you can use this piece of code to make the current release work:
$.mobile.pushStateEnabled = false;