I nailed down a weird behavior on JQM.
Since the page is based on JQM Boiler plate, I do not include the full page here. I published the code on jsfiddle.
Here is a summary of the behavior click actions:
Here is the extract of the relevant code:
<div id="oneapart"
data-add-back-btn="true"
data-back-btn-text="List"
data-role="page"
data-title="Home page">
I do not understand why the last click on the List button (a jquery mobile back button) requires 2 click to actually act on the link. In fact, the weird behavior is that a first click highlight the button in blue, but it remains as is without switching to the previous page until a second click happens.
Any help will be appreciated.
Regards.
This issue can be fixed by adding the data-rel="back" to the button in the popup.
The issue posted on Github has been marked as resolved because of that.
The issue happens because data-rel="back" is missing in the link of the large cancel button in #jerone his fiddle. See "Closing dialogs" here: http://jquerymobile.com/test/docs/pages/dialog/index.html
The back button on pageTwo is dynamically created. When you don't use data-rel="back" on the link that brings you back from dialogThree (which is also a page) to pageTwo it adds an item to the history stack. That's why the back button on pageTwo then requires two clicks to actually bring you back to pageOne.
The active state is removed from a (back) button on the pagehide event. On the first click you stay on the same page, so this event doesn't fire and the button keeps the active state.
I added data-rel="back" and then everything works as expected: http://jsfiddle.net/jEesE/6/
Closing as resolved.
The bug you're describing consists of 2 parts;
why does it require two clicks to revert?
why stays the button active (blue)?
The first part of the bug is not a bug; you open a popup, but instead of going back (e.g. data-rel='back' you open a page that is the same as the previous one. So if you press the back button, it reopens the previous page that is actually the same page as you were on right now (if it make sense).
Why the button stays active, I don't know...
EDIT: I cleaned up your code a bit: http://jsfiddle.net/jerone/jEesE/3/
Related
First, I create a link to the url #.
When I hover over the link, I see the browser turns it into http://[current url]/raw#.
Here is the strange part. I click the button to increment the counter. Then I click the link. My browser's back button shows my location has changed. But the counter state is preserved!
This example shows the behavior.
What is going on here?
shown here w3schools This is a bookmark feature of links. It doesn't exactly pull a new page , just navigates within the current page.
Forward and back still preserve the path but the entire page isn't refreshed.
I have a page which contains an iframe. The iframe can take user's input (via button click or menu selection) and display content accordingly.
What I need is, when a user manipulates the iframe, the browser push each set of iframe parameters into history; and when the user click at back button, the iframe will reload its content using the saved parameters from the previous history entry. I have a piece of code doing the reloading as shown below.
The strange thing is, when I make multiple settings on the iframe (hence multiple state entries added to history), and then click at back, it'll work like this,
Say that I have state 4, 3, 2 in history and I'm now at state 5
the first click restore to state 4 (the "----state changed----" logging message is printed
the second click reloads the iframe with default content. The "----state changed----" is not printed; the reloading code is not called.
the third click restore to state 3
the fourth click is like the 2nd click
the 5th click restore to state 2
So after each click that successfully restore the state, it takes two clicks to trigger the popstate event (I tried statechanged event, too, with same result) and restore to another previous state.
Anyone know what's going on here? Thanks in advance.
History.Adapter.bind(window, "popstate",
function (event) {
console.log("----state changed------", History.getState());
console.log("----state data------",History.getState().data.state);
//code to do reload an iframe to its proper state
});
So I stumbled on this same issue. The situation we had was using history.pushState() to update the URL and then after that changing the src attribute of an <iframe>. By changing the src of the <iframe>, we are implicitly telling the browser to add to its history that the iframe had changed. Thus...
When we pressed back the first time, window.history's popstate is
triggered on the <iframe>'s src attribute and is reverted back to it's previous state.
Pressing back a second time triggers the popstate event for the state you originally pushed onto the stack
Our solution involved that when we decided to update the URL and push the state onto the stack, when we wanted to update the <iframe>, we used jQuery to replace the <iframe> list so...
$("#iFrameID").replaceWith(('<iframe id="iFrameID" src="' + location + '"></iframe>'
By doing this, we removed the side effect of the browser history getting polluted with our update to the <iframe> tag.
I had the same problem.Instead of navigating the user to the previous page on the website, the back button navigated the user to the previous page inside the iframe. This code below will help you to solve your problem:
iframe.contentWindow.location.replace(href)
I have a mx:TabNavigator with 5 tabs. As a secondary navigation option for the user there is a "Next" button on each tab that takes the user to the next tab. Each "Next" button uses click="{ myTabNavigator.selectedIndex=x}" set to move to the next tab where x is the tab number. All of them work except for the one on tab 2 which is supposed to take the user to tab 3. Nothing happens.
I can copy this button to tab 0 and it works fine taking the user to tab 3. It just will not work from tab 2.
I have tried moving myTabNavigator.selectedIndex=3; to an event handler and have confirmed that the click event is calling the event handler, but it doesn't work from there either.
I have cleaned the project, restarted Flash Builder and the browser and cleared the cache in the browser. Cannot get it to work.
Any suggestions?
Thanks,
John
I found the problem. I found that the tab 2 itself had click="{EditDetailsTabNavigator.selectedIndex=2}" in it. Took this out and the button works. Guess every time I clicked in the tab it would fire.
Not exactly sure how it got there, but I have found when pasting into a property in Design mode that occasionally the paste goes some place else in addition to where I have the cursor. I think that is how it might have gotten there.
I created a Button in MXMXL. On button click, I create a Menu as a child of the Button. I am using an XML datasource. The reason for creating it this way, was due to the amount of custom skinning involved. A popupmenubutton was not an option. Anyway, so my question is this: when clicking the button, the menu is displayed. However, if you click the button again, the menu reopens. I want the menu to close if the user clicks the button a second time. Now, I got it to work by setting a var after opening the menu, and then I check that var on each click to make sure that the menu isn't already open. If true, then it will close the menu, instead of reopening it. This works, until the user clicks away, in which the HIDE event gets dispatched and the menu closes. My hack no longer works.
Any suggestions? I spent hours trying different things. The hardest part is trying to destinguish from that second button click when the menu is open, and when the user clicks away from the menu. They both dispatch the HIDE event.
Help!!!
Have you tried adding another eventlistener to the button...FlexMouseEvent.MOUSE_DOWN_OUTSIDE ? You should then be able to set the preventDefault event to true to stop the event from firing anything else and stop the menu from closing.
i am using icefaces 1.8.2. For some command buttons, sometimes i need to click the button twice. previously whole applivcation was working fine with single click. after upgrade to 1.8.2,i am facing this problem......Any suggestion,what could be the reason???
Thanks
Maybe some component loses the focus when you click the button. That could cause a partialSubmit and the server sends an update. This update replaces the part of your page containing the button.
But that a total wild guess into the blue.