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.
Related
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.
The id's #switchtopagetwo and #switchtoindex are assigned to buttons that do what you can infer from the id's names. What I want to do is on click of the button, I want to redirect to the new page via window.location = url; and then run a function that renders some data on the page via pagetwoData() or pageoneData(), depending on where I am at the moment.
$('#switchtopagetwo').on('click', function () {
window.location = 'pagetwo.html';
pagetwoData();
});
//pagetwo.html button
$('#switchtoindex').on('click', function () {
window.location = 'index.html';
pageoneData();
});
When I comment out window.location, the functions run and I can see the data on the screen, but there's no page redirect even on clicking the button. When I click on the buttons fast enough, I can see the function's data being rendered for a split second and then disappearing. When I console.log certain items, I can see the console.log's appearing in the console and then disappearing the same way.
Clearly there is an issue with window.location. Is there better code I can use for clicking the button, redirecting the page to load the page-2 data, then clicking the button again to go back to page-1 data?
When you redirect to a new page, the entire page context is abandoned and replaced by the new page. Nothing which happens on the source page after that redirect can be relied upon to still happen. But anything on the target page that's loading will happen.
Instead of trying to get Page1 to tell Page2 to do something when it loads, just have that something happen on Page2. For example:
// on index.html
pageoneData();
$('#switchtopagetwo').on('click', function () {
window.location = 'pagetwo.html';
});
// on pagetwo.html
pagetwoData();
$('#switchtoindex').on('click', function () {
window.location = 'index.html';
});
Basically, for any given page, whatever you want to happen on that page when it loads should be executed on that page when it loads.
I'm having a problem always when I try to use the following code in a button in my HTML file.
onClick=window.location.reload();
mapGenerator();
The page reloads but the javascript (mapGenerator) that make a D3JS view doesn't appear. What am I doing wrong?
location.reload() will immediately reload the page and prevent any following code to execute.
You can, however, create a function that executes your method after the page has (re)loaded:
window.onload = function() {
mapGenerator();
};
This method will run every time the page has fully loaded. To only run the code after you have reloaded the page using location.reload(), you could create a method that handles the click by setting a cookie and then reloading the page.
function handleClick() {
document.cookie="reload=true";
location.reload();
}
This would require you to change your onClick value to onClick="handleClick();". Now, whenever the page loads, you can check whether the cookie has been set. Your window.onload function now changes to this:
window.onload = function() {
if(document.cookie.indexOf("reload") >= 0) {
mapGenerator();
}
}
Checking if a cookie exists - answer by Michael Berkowski
After the reload it's up to you whether you want to unset the cookie — if you don't, the page will run the function mapGenerator on every page load until the cookie expires.
If you need more help with cookies, check out W3Schools' tutorial.
As per your description mentioned above two actions are to be taken on click. As the first action reloads the page the second action is lost. If you want any action to be taken on load of the page, mention the same on onload event of the page.
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;
});
I have a scenario to refresh the browser after the page is loaded for first time or one time.
Because the data is not showing properly when the pages is loaded,and when i refresh the browser it is showing.I don't know the reason.
Many Thanks
So you only want the browser to refresh once? Do something like this.
window.onload = function(){
if(!document.location.hash){
window.location = "#loaded";
}
}
or jquery
$(document).ready(function(){
if(document.location.hash){
window.location = "#loaded";
}
});
But in all honesty this is just a temporary solution. As much as you try to cover it up with quick fixes. I guarantee it will come back to haunt you. Well written and structured code will last a lifetime and can always be reused on future projects.
Invariably, you're going to have to use some JavaScript. What you want is for your refresh code to run when the page is completely loaded. You could use the HTML onload event, but there are problems with this (e.g. it will fire before any images are loaded). I would suggest using JQuery's ready() event, if you want to be sure it fires after the entire page is loaded.
Example:
// NOTE: This will only work with JQuery loaded.
$(document).ready(function(){
location.reload(true);
});
Making this only fire on the first page load is a bit more tricky. You could add an anchor suffix to the URL to keep track of whether you've refreshed the page yet or not, and then only refresh if it is not present in the URL:
$(document).ready(function(){
if(location.hash != "#")
{
// Set the URL to whatever it was plus "#".
// (The page will NOT automatically reload.)
location = "#";
// Reload the page.
location.reload(true);
}
});
Alternatively, you could use the query string, since this will automatically refresh the page when changed:
$(document).ready(function(){
var marker = 'r'; // 'r' is for "refreshed"
if(location.search != "?"+marker)
{
// Set the URL to whatever it was plus "?r".
// (This will automatically force a page reload.)
location = "?"+marker;
}
});
Caveat: With either of these samples, if your user bookmarks the page after the "#" or "?r" tag has been added to the URL, the page won't refresh when they revisit the page. If you want it to be bulletproof, you might have to use a cookie instead.