I want to use javascript to reload a page. I can't just use
window.location.reload(); as I'm using jquery tabs and want to specify a tab to be selected after the reload. Is setting window.location.href the best way to do this?
i.e. window.location.href = window.location.href + '#tabs-4';
A cleaner way:
window.location.hash = 'tabs-4';
window.location.reload();
All you have to do is to pass a var in the url (post) than with your javascript retreive it and select the tab associated to the var
you can have variable in redirect link like
index.html?tab=4
and than check it's value in javascript.
function get(name){
if(name=(new RegExp('[?&]'+encodeURIComponent(name)+'=([^&]*)')).exec(location.search))
return decodeURIComponent(name[1]);
}
you can use this code to get a value. like
selec=get('tab');
$tabs.tabs('select', selec);
to switch to a tab.
See this link to get more details about
How to get "GET" request parameters in JavaScript?
As Brandon Joyce commented, my original code was probably best:
window.location.href = window.location.href + '#tabs-4';
Related
I have a script that is supposed to get the username and go to another page with that username in URL, like this: www.site.com/members/?username=john. How can this be done with javascript? I have my current code like this
<script>
window.location = 'www.site.com/members/?{$member.username}';
</script>
What this does is www.site.com/members/?john but I need to pass assign parameter as GET request. Any help is appreciated.
You need to first create a string with the required location in it:
<script>
window.location = 'www.site.com/members/?username=' + username_variable;
</script>
Or your way of doing it (using ES6 formatting):
<script>
window.location = 'www.site.com/members/?username={$member.username}';
</script>
Suppose member.username is a working variable with the username.
<script>
//..
window.location = 'www.site.com/members/?'+member.username+'';
</script>
JavaScript is client-side technology, it cannot get any data by itself. Try to make ajax call to a server-side REST API and get the data back.
I know I can use the below code to go back previous page.
$router.go(-1)
but is it possible to pass params to the previous page?
There is no option for params in Vue.js but you can do it by document.referrer
window.location = document.referrer + '?index=1';
I have a dynamic variable that gets updated by users of a webpage in a script and when the user clicks on a hyperlink I need to be able to send that variable to another webpage. So I need something like
Link
to work but I am not sure the exact syntax on how to do this. I already have a getter in my JavaScript I just need to be able to access it when the user clicks on a link.
You could either use an onclick action to send you to a function that navigates the page for you.
Or
You could update the href attribute anytime that value of variable needs to be changed.
The second option is probably preferable, but it largely depends on what else is going on in the page and how variable is set
it looks very familiar with this:
How to redirect on another page and pass parameter in url from table?
link
Native JS:
document.getElementById('redirectwithid').setAttribute('href','yoururl?variable=' + variableGetter());
jQuery:
$("#redirectwithid").click(function() {
var yourVariable = variableGetter();
if (yourVariable != null) {
window.location = 'yoururl?variable=' + yourVariable;
}
});
Add for Native JS:
I don't know your code so just insert the code where you want to update your variable - at the same time the href will change.
Edit:
If you want to add multiple variable like ?variable=1 and a second variable2=2 you can achieve this by adding a & between the variables, like this:
NativeJS:
document.getElementById('redirectwithid').setAttribute('href','yoururl?variable=' + variableGetter() + '&variable2=' + variable2Getter());
JQuery:
$("#redirectwithid").click(function() {
var yourVariable = variableGetter();
var yourVariableTwo = variableTwoGetter();
if (yourVariable != null) {
window.location = 'yoururl?variable=' + yourVariable + '&' + yourVariableTwo;
}
});
I'm in a situation where I have an Ajax function making a call to a remote site, saving data into a database, then I want to refresh the current page to show the new data. The problem is I'm also using tabs, so I need to pass #tab6 with the URL to get the visitor back to the correct tab.
I'm using
window.location.href = '/clientarea.php?action=productdetails&id=<?php echo $_POST['pkgid']; ?>#tab6';
as my refresh code. It does appear to change the URL, since after it runs I can see #tab6 on the end of the URL. The problem is it's not actually doing a real refresh of the page data, because it's not showing the new info that's pulled from the remote server. I can see that data after a real refresh.
The hacky option would be to run the window.location.href code to get the anchor in the URL, followed by location.reload(); to get the new data, but I'd like to avoid that if there is a better way to handle it.
You should change something between ? and #.
E.g. you could add/replace a random value just before #, generated with Math.random():
window.location.href = '/clientarea.php?action=productdetails&id=<?php echo $_POST['pkgid']; ?>&random='+Math.random()+'#tab6';
Try
window.location.reload(true);
And hacky solution for chrome
setTimeout(function(){window.location.reload(true);},100)
Instead of window.location.href use window.location.assign.
I need to redirect to another page onClick of submit and call a function making an ajax call. This is what I have :
$('#submitButton').click(function() {
window.location.href = "otherPage";
displayData();
});
Also, Another way I tried is to set the form fields on otherPage by using
var elem = window.document.getElementById(field);
elem.value = "new-value";
so that I could call the eventhandler of a submit button present on otherPage, but it doesn't work. Please let me know where I am wrong.
I'm not sure if there is a neat way to achieve this, but you can add a hash in your url you redirect to, then just simply check if the hash exists, execute function and remove hash.
Here are some handy URLs:
Location.Hash - information about this function and how to use it.
Removing hash from url without a page refresh - This was a bit of an issue, as window.location.href = ''; removes everything after the hash.
A hash (as Arko Elsenaar said) or a querystring parameter added to the target URL would allow you to detect what to do once there.
The hash makes it a bit easier while the querystring is cleaner if you want to pass more information.
For instance on the first page: window.location.href = "other/page.html#displayData";
On the second page:
if (window.location.hash === '#displayData') {displayData();}
Another way could be to use the HTML5 Storage API, if and only if the 2 pages are on the same domain.
1st page would do, before the redirection:
localStorage.displayData = true
And the 2nd:
if (localStorage.displayData) {displayData();}
However in this case you'll need to clean up the localStorage.displayData value when used, otherwise it will stay there forever and your second page would always find it set to true.
delete localStorage.displayData
All in all, the hash method seems best here.