While Mozilla has an easy to understand documentation on history.pushState and history.replaceState it doesn't show me how to deal with the content when the back button is pressed and content is changed dynamically.
Suppose foo.html has a form and executes an AJAX call to replace its content on submit, then pushState looks like below:
history.pushState({content:$('#content').html()}, '', 'bar.html');
When the user clicks on the back button the URL changes back to foo.html but the page doesn't display the form. How can I display the form? I had a look at popState but couldn't get it to work properly.
so this is what I have done to solve it:
When foo.html loads, I execute history.replaceState({container:$(#container').html()},'', window.location);
Then after ajax call to replace content, I execute this: history.pushState({container:$(#container').html()},'', 'bar.html');
On page load, I bind the popstate to check if event has state object which contains the container like this:
$(window).bind("popstate", function(event) {
if (event.state != null){
if ('container' in event.state){
$(#container').html(event.state.container);
}
}
});
You need to store all of the state you need to re-render the old content, then use that state to re-create the previous page on popstate.
Model-binding techniques such as Knockout.js (or full MVC frameworks) can make this much easier.
Related
I have a 3 step signup process where each step is shown on the page using javascript without a page refresh. What I am trying to do now is add a back reference to what step the user was on so if they click the browser back button they will not lose all of their progress.
So for example, as the user navigates from Step 2 to Step 3 the URL stays at www.example.com. The user then clicks the browser back button. The URL should now be www.example.com?step-2.
I'm thinking that I will somehow need to use the History API to accomplish this but if I use window.history.pushState(null, null, 'www.example.com?step-2'), the current URL would be changed as well.
How would I accomplish adding to the history without changing the current URL?
If your objective is to not change the URL, but to still allow back and forth history state changes, your best bet would be to utilize the window's hashchange event listener. This would of course utilize hash references within the URL, but the base URL won't change:
function locationHashChanged() {
if (location.hash === '#step-2') {
// Do something here
}
}
window.onhashchange = locationHashChanged;
For further info on this, refer to official documentation:
https://developer.mozilla.org/en-US/docs/Web/API/Window/hashchange_event
I have a page where there is a form which is used to Add / Edit Addresses.
In the right section of the page, there is a saved address Which has Edit link and it gives call to the same page URL with adding a new parameter say "billingID.XXXXX".
After clicking on this link, page is re loaded with the default address data auto filled.
I need this to happen on the first time load. I tried triggering click event on this Edit link on load, but I suppose it is not allowed by jQuery.
What are the other options I have with jQuery / javascript to add this URL parameter on load of page.?
You could try the Javascript History API.
https://developer.mozilla.org/en-US/docs/Web/API/History_API
It depends on what you want to do, I didn't understand you quite clear.
If you need the page to be reloaded and show the page by url, you can get 'href' value by jquery and then call window.location = $('.mylink').attr('href') + '?billingID.XXXXX';.
If you just want to replace url in browser panel, you can use History API as Kahuna suggested. E.g. you can call
window.history.replaceState(null, document.title, window.location.path + '?helloworld=1');
but then you have to update the page contents by yourself, using JS and jQuery.
you can try this:
if(window.location.href == 'requestd page href'){//http://localhost/test/test.php
window.location.href += "?billingID.XXXXX";
}
I'm using
var integer = window.location.hash.match(/\d+/) | 0;
alert(integer);
to get id from the hash url but when i use back button after changing the url after ajax call.
It doesn't reflect any change, basically page remains in same state and only the url changes.
so, what i want to know is that how to change the content when i use back button.
Or simply show the integer in alert box when i use back button that's it.
e.g.
http://test.php/#1
show 1 when i get to that page using back button
http://test.php#2
show 2 when i get to that page using back button
http://test.php
show 0 when i get to that page using back button
You need to catch the window.onhashchange event, or use HTML5's history.pushState() methods.
Or just use the jQuery history plugin.
You need to handle the hashchange event of window. Something like:
window.onhashchange = function() {
// Update the page
};
Or you can use addEventListener and attachEvent. Be warned, though, it doesn't work in IE7 or earlier! For earlier IE compatibility, you need a hack like this one.
I have a link in my app that when clicked, leads to another page. I want to execute some JQuery on this new page after it loads, but only if that specific link is clicked to get to the page.
I have this JQuery:
$('#new_to_topics').click(function(){
$(document).ready(function() {
$('#topic_guidelines').slideDown('normal');
$('#topic_guidelines').addClass('on');
});
});
where #new_to_topics is the id of the link that leads to the new page and
$('#topic_guidelines').slideDown('normal');
$('#topic_guidelines').addClass('on');
is the JQuery code I want to execute on that new page. However, this does not work. How should I do this?
You could pass a location hash to the new page, and then conditionally run some javascript based on that hash.
If my link was to mynewpage.html#fromXlink (this would show in the address bar)
My javascript on mynewpage.html could be:
$(document).ready(function() {
if (location.hash == '#fromXlink') {
$('#topic_guidelines').slideDown('normal');
$('#topic_guidelines').addClass('on');
}
});
You could add a variable to the query string i.e. somepage.aspx?fromthislink=true
and then pick that up in jquery.
This shows how
If it cam from that link then fire off your jquery.
You can use window.name to pass data to the target page (although I would prefer passing data in the hash, if possible).
Is there a way to make the user's back button on their browser, call a javascript function instead of going back a page?
You can't override the behaviour that if a user follows a link to your page, clicking Back will take them off it again.
But you can make JavaScript actions on your page add entries into the history as though they were clicks to new pages, and control what happens with Back and Forward in the context of those clicks.
There are JavaScript libraries to help with this, with Really Simple History being a popular example.
yes, you can. Use this js:
(function(window, location) {
history.replaceState(null, document.title, location.pathname+"#!/stealingyourhistory");
history.pushState(null, document.title, location.pathname);
window.addEventListener("popstate", function() {
if(location.hash === "#!/stealingyourhistory") {
history.replaceState(null, document.title, location.pathname);
setTimeout(function(){
location.replace("http://www.programadoresweb.net/");
},0);
}
}, false);
}(window, location));
That will redirect your back button to the location.replace you specify
I think this will do the trick.
you can write your custom code to execute on browser back button click inside onpopstate function.
This works in HTML5.
window.onpopstate = function() {
alert("clicked back button");
}; history.pushState({}, '');
I assume you wish to create a one-page application that doesn't reload the website as the user navigates, and hence you want to negate the back button's native functionality and replace it with your own. This can also be useful in mobile web-apps where using the back button inside apps is common to close an in-app window for example. To achieve this without a library, you need to:
1st. Throughout your application modify the window's location.hash instead of the location.href (which is what tags will do by default). For example, your buttons could fire on click events that modify the location.hash like this:
button.addEventListener('click', function (event) {
// Prevent default behavior on <a> tags
event.preventDefault()
// Update how the application looks like
someFunction()
// Update the page's address without causing a reload
window.location.hash = '#page2'
})
Do this with every button or tag you have that would otherwise redirect to a different page and cause a reload.
2nd. Load this code so that you can run a function every time the page history changes (both back and forward). Instead of the switch that I used in this example, you can use an if and check for other states, even states and variables not related to location.hash. You can also replace any conditional altogether and just run a function every time the history changes.
window.onpopstate = function() {
switch(location.hash) {
case '#home':
backFromHome()
break
case '#login':
backFromLogin()
break
default:
defaultBackAnimation()
}
}
This will work until the user reaches the first page they opened from your website, then it will go back to new tab, or whatever website they were in before. This can't be prevented and the teams that develop browsers are patching hacks that allow this, if a user wants to exit your website by going back, they expect the browser to do that.
If you are creating a one-page web application, where your html body has different sections and you want to nevigate through back button to the previous section you were. This answer will help you.
Where your website sections are differentiated by #. Such as:
your-web-address.com/#section-name
Just follow a few steps:
Add a class and a id in every section in you html body. Here it is ".section"
<section class="section" id="section-name">...</section>
Add two CSS class in your linked css (e.g., style.css) file to your html (e.g., index.html) file such:
.section .hide {
display: none;
}
.section .active{
dislplay: block;
}
Add this JavaScript function in you linked .js (e.g., main.js) file to your html file.
window.onpopstate = function () {
if (location.hash !== "") {
const hash = location.hash;
// Deactivating existing active 'section'
document.querySelector(".section.active").classList.add("hide");
document.querySelector(".section.active").classList.remove("active");
// Activating new 'section'
document.querySelector(hash).classList.add("active");
document.querySelector(hash).classList.remove("hide");
}
}