jqm 1.1.0 closing dialogs when hashListeningEnabled=false - jquery-mobile

i've got a page that displays a dialog on an href. am setting hashListeningEnabled=false because if someone refreshes the page, they need to be greeted with the first 'page' again. when the dialog is clicked it comes up fine, clicking the close button however does nothing - it changes the href (via history.back()), but as listening is disabled, it doesn't actually close the dialog.
anyone think of a workaround?

that'd be right - as soon as i post the question on SO, i work it out myself. you simply turn hashListeningEnabled on when the dialog is shown, then you can turn it back off.

Related

The infamous "sticky" :hover on iPad - how does Google fix it?

I have unfortunately stumbled on the issue where, on iPad, a pop-up menu summoned by way of :hover does not disappear from the screen when the user touches an empty area of the page.
The problem is the same described here:
Hover Behavior on Desktop vs iPad
The menu is part of a template I bought, namely:
http://html.realia.byaviators.com/
But... wait a minute... it WORKS on the template's home page? And only on that page -- it doesn't work on any other page of that same template.
I was able to track the behavior down to the point where I found that the reason why it works is the following: initializing a Google map makes the menu behave properly. Just the simplest of maps, with the default options.
Now my question to the experts is: what is that Google does in the map initialization code in order to fix the :hover behavior?
Thank you very much in advance for your help!
Well, can't tell what is that Google does, however the solution is documented in mobile Safari developer's reference.
For a click event to be generated on an area of the document, there must be a click handler attached. For example, clicking on a div will generate a click event only if an onclick="void(0)" handle is presente:
Clicking here triggers event in mobile Safari

JQM Popup doesn't popup when url has GET details in it

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.

jQuery Mobile popup that doesn't move when scrolling the page

I am using jQuery Mobile 1.3.0 RC1. I have a popup that I create programmatically at the bottom of my page and close after a few seconds using setTimeout (toast notification). It works very well, however if I happen to scroll the page while the popup is displayed, the popup gets scrolled too. I would like the popup not to move, i.e. stay in its position relative to the screen, not relative to the page. Is there a way to do that ?
I have tried playing with the data-position-to attribute in the HTML element, with the positionTo option of the "open" method, and tried placing the popup element inside a fixed transparent footer, none of these resulted in the desired behavior.
I had a similar problem last week. Finally solved it using modal dialog instead of popups.
For popups, I could find following.
$("#myPopup").on({
popupbeforeposition: function () {
$('.ui-popup-screen').off();
}
});
Which helped me in prevention of closing the dialog while user touched outside of popup. But scrolling issue was still there. So I changed all popups to modal dialogs. Hope it helps someone.

jQuery Mobile app not not displaying elements correctly

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.

Why using select boxes with data-native-menu="false" in chained dialogs generates url hashes that leads to closing the current dialog?

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;

Resources