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.
Related
I want to reload the page in Javascript without a specific param ie.
Let's say I want to reload www.domain.com/abc?num=4&something=1
But I want to reload www.domain.com/abc?number=4 only
Unfortunately the following keeps all of the params which isn't fit for my use case:
document.location.reload(false)
and:
window.location.href = window.location.pathname;
gets rid of every parameter and just navigates to the path. Is there a way to delete a query param from window.location before navigating back to it?
location.href=location.href.replace(/&?somthing=([^&]$|[^&]*)/i, "");
So I'm having this issue where I lose all my data on the first window.location.replace try (The second time i reload the same page everything seems to work fine)
I have searched around and haven't found anything like this
Here is the code so I can explain my issue more toroughly:
$(document).ready(function() {
$('#login_form').on('submit', function(event){
event.preventDefault();
// Retrieve form data
var formData = {
'index' : $('input[name=user]').val(),
'password' : $('input[name=pass]').val()
};
//convert formData from JS object to PHP understandable
var formData1=jsObj2phpObj(formData);
var url= 'login.php';
//sending with post in ajax to register.php
$.post(url,{formData1:formData1})
.done(function(data){
if(!(data["Log_success"])){
alert("Log failed")
}
else
{
window.location.replace('http://localhost/CPPv2/admin_commented/index.html#home');
var draw_stringholder="";
draw_stringholder+=data["user_index"]+data["user_email"];
document.getElementById("myPanel").innerHTML=draw_stringholder;
}
}
So what my function does is that it sends data to a PHP page and recieves JSON encoded data back. The first time I submit the form I seem to recieve no network data back (I think it's because of the window.location.replace removing it) but after refreshing the page and submiting the form again everything works fine (The Index and email are written inside myPanel element).
I have tried using window.location / window.location.href ... (I think i tried every other function there is) and they just don't send me anywhere like they're not working at all. The if(!(data["Log_sccuess"])) part always works (so the client - server communication works fine).
It's also important to say that im using JqueryMobile-1.4.4 (also tried their redirect method didn't work)
To sum it up I would like to change my current page link to a other one without losing the server generated data. (Since Im bassicaly staying on the same page just changing the Id part of it). I can fix my issue by refreshing the page after I have logged in (sending server request after log in) but that doesn't seem like the right way to do it.
Instead of window.location.replace I used $.mobile.changePage( "#ulr", { transition: "slideup"} );
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.
We've been working on a web application and we've just about got it finished up, but there's one thing that bothering us (although by no means is it going to stop production.)
When we call one of the pages (index.html), we sometimes have to pass it a variable in the URL (searchid). So we get a page like http://domain.com/index.html?searchid=string.
We'd ideally like to not show the ?searchid=string, but I'm not sure how we'd do that.
My group doesn't own the index.html page (but we are working with the group that does), so I don't know how much we'd be able to do with anything like .htaccess or similar.
I was thinking about POSTing the variable, but I don't know how to receive it with just HTML and jQuery. Another person in my group thought that after the page loaded we could remove it from the URL, but I assume we would need a page refresh which would then lose the data anyway.
I'm trying to avoid XY problem where the problem is X and I ask about Y, so what's the right way to remove the variable from the URL?
You can use the History API, but it does require a modern browser
history.replaceState({}, null, "/index.html");
That will cause your URL to appear as /index.html without reloading the page
More information here:
Manipulated the browser history
Your question seems to indicate that the target page is not and will not be powered by some server-side script. If that's the case, I'd suggest changing the querystring to a hash, which has the advantage of being directly editable without triggering a page-load:
http://yourdomain.com/page.html#search=value
<script type='text/javascript'>
// grab the raw "querystring"
var query = document.location.hash.substring(1);
// immediately change the hash
document.location.hash = '';
// parse it in some reasonable manner ...
var params = {};
var parts = query.split(/&/);
for (var i in parts) {
var t = part[i].split(/=/);
params[decodeURIComponent(t[0])] = decodeURIComponent(t[1]);
}
// and do whatever you need to with the parsed params
doSearch(params.search);
</script>
Though, it would be better to get some server-side scripting involved here.
It's possible to rewrite the URL using JavaScript's history API. History.js is a library that does this very well.
That being said, I don't think there's any need for removing the query-string from the URL, unless you're dynamically changing the contents of the page to make the current query-string irrelevant.
You could post the data, then let the server include the posted data in the page, e.g.:
echo "<script> post_data = ".json_encode($_POST)." </script>";
This works cross-browser.
I'm having a bit of difficulty conceptualising this: I have some data stored to a button:
var input2 = '<button id="viewmap1" class="viewmap">Find on Map</button>';
//MAKE DATA
$(input2).data('longlat', coords);
Now I want to send that data to another page. I understand I am to use jQuery post, eg:
$.post("test.html", { func: "getNameAndTime" },
function(data){
alert("Hello");
}, "json");
But im not entirely sure how to go about it. Can any one point me in the right direction? Thanks
Sending data to a different page isn't as simple as it sounds. If it were simple, crackers could manipulate all the other pages that you currently have open in browser tabs.
When you call $.post(), that just sends data to the server, not to another page. The URL is a way to tell the server how to process the data but it doesn't magically connect you to the browser tab/window which has test.html open.
The usual solution is to use a single page which contains the button and the elements to display the results (a.k.a "view"). You send the POST request and then update the view in the callback function.
$(input2).on('click', function(){
// do your post stuffs
});
then need to trigger the button click
$(input2).click();