On loading, my web page has the following url :
http://mywebsite.com?param1=test¶m2=test2
I use the following code during startup to remove from url the parameters once the web page is loaded:
if (window.history && window.history.replaceState) {
window.history.replaceState(null, null, window.location.pathname);
}
Thus, my url becomes :
http://mywebsite.com
The problem is that the user refresh the page in the browser, i need to add again the parameters previously removed. How can i do that when the user refresh the page ?
$(window).unload(function() {
// Add again parameters before reloading ..
});
You can store the paramaters in localStorage and then check for their presence when the page is reloaded.
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
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.
Goal: Omit the id param from my page AND able to reload the current page.
Original URL: www.onecompany.com/dept?id=12345&name=myName
I was able to get the modified url.
Modified URL: www.onecompany.com/dept?name=myName
I used this code:
window.history.pushState(null, null, modifiedUrl);
And the page load successfully without the id param.
But when I refresh the page (I want to reload the current page), it did not load
www.onecompany.com/dept?id=12345&name=myName
but it load this
www.onecompany.com/dept?name=myName
When I attempted
window.history.pushState(null, null, originalUrl);
The refresh works but one part of my goal is failed, not omit the id param.
I am lost in a circle.
My question: Is it possible to load my page (with id param omitted) AND able to refresh the page (to load the correct page without id param)?
Thanks for any advice !
I guess, you're trying to hide the information 'id' for the user. I would recommend to use cookies to save the information 'id'.
Otherwise:
//Example: 'www.onecompany.com/dept?id=12345&name=myName'
var query = window.location.search;
var oldquery = window.location.search;
query = query.replace(/id=\d+&?/i, '');
console.log(query);
//Out: ?name=myName
window.history.pushState(null, null, query); //then hide the id
You have to change the URL back to the original, before the user leaves the website. This will not work.
But if youre willing to do, you could listen for the window.onbeforeunload event and change the query back again to oldquery. See here: Handle refresh page event with javascript - But there are a lot of differences between browsers, on how they will process the window.unbeforeunload event. They will usually not allow to do that.
I know that we can open Bootstrap modal on page load very easily. But I have a situation where the modal should open ONLY when the user accesses the page from an email link?
Is there any way to do using JavaScript or JQuery.
Yes, you can.
The most straightforward way I can think of is to use an extra query parameter in the url used in the email.
When your page loads, you can test for this query parameter and then decide to open your modal or not.
Consider this sample URL:
www.example.com
In the email version, we can add a query parameter like this :
www.example.com?email=true
and then, on your client side (on page load):
var query = window.location.href.split('?')[1];
if(query && query.indexOf('email=true') > -1){
// Url has the parameter run code to open modal
}
Yes you can do this
Just you have to pass extra parameter ( querystring) in the Link.
Suppose your Normal link is "www.xyz.com", instead of this you have to pass "www.xyx.com?bylink"
and on your page load you have to get the page Url & find the extra parameter (querystring)
If the parameter is there in the URL just open the Video Popup or else Open the page normally .
Eg:
var URL =window.location.href ;
if(URL.contains('bylink'))
{
videoModel.show();
}
else{
NoramlPage.show();
}
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 problem when i redirect an user after edit profile and he edits the profile pic. I redirect him to his user page but it doesnt display the edited pic only if he manualy refresh page. Here is my code of the profile_edit.php page that redirects to profil.php:
<script type="text/javascript">
$(document).ready(function() {
var f = $(\'form\');
var b = $(\'#submit1\'); // upload button
b.click(function(){
// implement with ajaxForm Plugin
f.ajaxForm({
beforeSend: function(){
},
success: function(e){
window.location=\'profil.php?user='.$user_session.'\';
},
error: function(e){
}
});
});
});
</script>
add one more parameter with your url for cache busting some thing like this
window.location=\'profil.php?pram='+Math.random()+'&user='.$user_session.'\';
At first - you can add some hash, to prefer caching like
window.location=\'profil.php?user='.$user_session.'&rand='.mt_rand().'\';
This will create new url - so browser will load page as new
And it is possible, that you need add this trick to image url -- please check this moment
if you need to refresh page ( your current url equal to new one ) - use
window.location.reload(true);
at success callback instead redirect - true say to browser to refresh page