I am creating a slideshow which is changing images with jQuery. When i change the image i also change page title and page url without reloading the page. I am changing url with:
window.history.pushState({path:url},'',curentImage[3]);
rightNav.click( function(){
imageArea.append(curentImage[2]);
title.text(curentImage[4]);
window.history.pushState({path:url},'',curentImage[3]);
});
If i click back on browser it changes the url to previous one, but doesn't load that page. How can i load page with previous url when i click browser back button?
I have just figured out the solution that helps in my case. I have added event listener for popstate which is redirecting me to the url i wan, some default url, or can be set to previous url.
window.addEventListener("popstate", function(e) {
window.location.href = defUrl;
});
Related
I have a privacy warning dialog that users can either click accept button, click decline button, click close button or click a link on the page to bypass - working with what Im give here. I need to fire a function if a user clicks a link on the page instead of clicking on any of the warning dialog's buttons.
The native unload handler gets blocked in some cases and also fires on page refresh. The hashchange event doesn't work as Im not using hashed urls. So I'm trying to capture the first page pathname, then on unload compare to the new page pathname and if they aren't equal run a function. Something isn't right here:
var origURL = window.location.pathname.slice(1);
$(window).unload(function(){
var newURL = window.location.pathname.slice(1);
if($(origURL) != (newURL)){
//run function if page changes
} else {
//page hasn't changed - do nothing
}
})
Is there a better way to detect page change? I can't attach to a click event, as some links are done w/JS and not on an anchor.
I am able to redirect/replace the url from the below code
function replceUrl(){
window.location.assign("https://www.example.com");
event.preventDefault();
}
After replacing the url, I want to stop page reload. I have added event.preventDefault(), but the page still reloads.
How to prevent page reload after replacing the url is the challenge
event.preventDefault() won't help you there, its purpose is to prevent the default behavior of the event that fired the function.
You won't be able to change the URL without reloading the page unless you use History API or window.location.hash
History API will let you change the last URL segment without reloading the page with this code: history.pushState({some: 'data'}, "New title", "new-url-segment") while window.location.hash = 'something' will let you change the URL fragment.
Note that the URL fragment's original purpose is to create links that scrolls to a specific id in the page once it's loaded.
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 have a menu that loads a new html file in a div. The loading is done by a click event attached to the menu's <a> tags. The loading works well and I add the new load to the history by constructing a new href with a hash tag.
But when I use the back button, the URL is updated correct in the browsers address field, but the page is never loaded. If I focus the address field and press enter it loads.
This is the javascript located in the mypage.html header.
<script type="text/javascript">
$(document).ready(function() {
// replace menu link click
$(".right-menu a").live('click', function(ev) {
ev.preventDefault();
ev.stopPropagation();
window.location.href = $(this).attr('href');
$("#content-right").load('mypage'+window.location.hash.substring(1)+'.html');
return false;
});
// If page loads, load the content area according to the hash.
var hrtag = window.location.hash.substring(1);
if(hrtag=="")
hrtag='about';
$("#content-right").load('mypage'+hrtag+'.html');
window.location.hash = hrtag;
});
</script>
This is the menu
<ul class="right-menu">
<li>About</li>
<li>Screens</li>
<li>License</li>
<li>Download</li>
<li>Donate</li>
</ul>
If I load the page as mypage.html, the javascript will append the hash #about and load the div id "content-right" with mypageabout.html
If I click the menu, for example download, it will load the div id "content-right" with mypagedownload.html
In both cases, the window.location will be set to the hash version of the page, mypage.html#about and mypage.html#download to register them in the history.
If i click the menu in the following order; license, about, screens and then click the browser's back button, the address field will show; mypage.html#about, mypage.html#license but it will NOT load the pages!?!
The URLs are obviously in the history, but they don't load.
Any clue to what might be wrong here?
// Thanks
EDIT - The solution
Thanks to Andres Gallo's article I came up with this solution:
<script type="text/javascript">
$(document).ready(function() {
// Make sure the page always load #about
LoadIDWithURL('#content-right','myPageAbout.html');
window.addEventListener('hashchange',function() {
if (window.location.hash != "") {
// We have a hash, use it!
LoadIDWithURL('#content-right','MyPage'+window.location.hash.substring(1)+'.html');
} else {
// We do not have a hash, force page reload!
window.history.go(0);
}
});
});
// Load the targetID with the URL loadURL.
function LoadIDWithURL(targetID,loadURL) {
$(targetID).load(loadURL);
}
</script>
I wrote a very detailed article on this exact topic. It explains how to build exactly what you are trying to do.
Furthermore my article also explains how you can pass parameters in your links to have javascript do special things
Here is a link to the article http://andresgallo.com/2012/06/08/ajaxifying-the-web-the-easy-way/
The best method is to attach your functionality to your hashchanges rather than to you click events. This allows any changes in history to take advantage of your javascript functionalities.
This is normal behaviour when navigating between pages which differ only in their hash. You have two options:
Use the hashchange event, or an emulation of it, to detect when the user changes the hash by navigation back or forward and update the page appropriately
Use the HTML5 history API.
you can try with hashchange
$(function(){
$(window).hashchange(function(){
// some event
})
})
jQuery(document).ready(function() {
});
or
window.onload = function () {
}
doesn't triggers when URL contents '#' character at end. Any idea to get through?
example: http://beta.something.com/user.php#
javascript onload never trigger on above url. how can i get it triggered?
Without further information it's hard to be sure, but I suspect you're already on the same page, so going to a "hashed" url won't actually reload the page and the onload function won't fire.
In other words, if on the page user.php you have a link like this: foo, clicking on it won't reload the page but just moves you to the top of the document and no onload event is triggered.
The ready and load events are only triggered when the page is first loaded. When you go to the same page with a bookmark added to the URL, the page is not reloaded, the browser just scrolls to the bookmark in the page.
An URL ending with just a hash character has an empty bookmark, so the browser scrolls to the top of the page.