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.
Related
I am using elementor on wordpress. I want it such that went I click a button it should take me to a certain section. I have followed the steps correctly but the issue is, when I click the button it doesnt scroll to any sections
what I did is... I have given my section a ID, and then passed the ID in my link field like so "#ID"
but when I click the button it doesnt jump to the section.
when I copy the link address on that button and paste it in a new tab it takes me to my desired section.
my site is: https://getjoystik.com/
the button is the first button on the page "SCROLL TO PRE-ORDER"
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 little problem. I'm using Oracle Applicarion Express and i'm trying to use some page items in a Link created for a button. I created the Button as region button, and selected in the region" Action when button clicked" "Redirect to URL". In this URL i want to use two pageitems. I tried already to use them mit ":PAGE_ITEM" or "&PAGE_ITEM." but non way works. Can someone help me please?
What does the resulting hyperlink look like? The chance is great that it looks like
f?p=<app_id>:10:<session id>::::P10_ITEM1,P10_ITEM2:,
This is because when using the substitution syntax like &PAGE_ITEM. will put the session state of the referenced item in the string. Since the button is rendered during the loading of the page it will use the session state of the item at that time.
When you then fill in a value for PAGE_ITEM, this will not change the session state of that item - and even if it did it would not matter since the button was already rendered.
If this is the case then you'd better have the button submit the page, and define an on submit before validations/computations branch to act on that button. In the branch you can then safely use the session state of the required items.
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/
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.