Develop Reference

Javascript window.location.href not reloading data

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.

Replace Values from Url using jQuery

Here i have a URL in Browser Address bar i want to replace path of Address bar using jQuery.
Some try from my side is as below
Consider url as below
http://localhost/catID/10/itemID/20
when i run
history.pushState("CatID", "Title", "21")
it change location bar as
http://localhost/catID/10/itemID/21
but i want result as
http://localhost/catID/21
how can i do this using jQuery

Query not needed. Plain js will do. Just add this code in your function and replace the string with the required arguments. Try it in the console, for an immediate effect ;D
window.location = "http://localhost/catID/10"
If you do not want to reload the page or use # for changing the url, then use window.onpopstate
Modify the URL without reloading the page
Read this article on mozilla site.

hide variables passed in URL

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.

Modify Query String Without new HTTP Request

Is it possible to manipulate the query string without actually submitting a new HTTP request?
For example, I have a page that allows the user to make a bunch of changes to some configuration options. When they first go to the page it will be the following URL:
www.mysite.com/options
As they click certain elements on the page, a link here or a radio button there, the URL would be changed to something like:
www.mysite.com/options?xkj340834jadf
This way the user can copy the URL and later go to the same page and have the configuration be exactly how it was before, but I don't want to submit new requests as they click the options.
Is this something that is possible using javascript/jquery?

I don't think this is possible.
Your best solution would be to add an anchor tag to the end of the URL, which can then be read by jquery to determine a HTTP redirect.
I believe google also indexes when you use #! for this purpose.
What's the shebang/hashbang (#!) in Facebook and new Twitter URLs for?

The best solution is by using hash. As Curt stated, #! is the way you tell Google that this is a webapp but if you don't need crawling, don't worry.
You can use then something like this:
var hash = location.hash; //or window.location.hash
hash = hash.replace(/^.*#!/, ''); // strip #! from the values
//do something with the values you got stored in `hash` var
If you need other things to happen, like everytime the hash changes, you do something, you can bind the 'hashchange' event.For example:
I use jQuery hashchange event by Ben Alman for that:
$(window).hashchange( function(){
var hash = location.hash;
hash = hash.replace(/^.*#!/, '');
// do something with 'hash' everytime it changes
// EXAMPLE:Set the page title based on the hash.
document.title = 'The hash is '+hash+'.';
return false; //this prevent browser from following the # after doing what you wanted
});

Javascript - Check for Hash, Ignore Analytics Code following

We are adding a video to the home page of a site, and want to be able to automatically pop up the video (in a lightbox-style container) whenever the #video tag is present in the URL:
http://www.domain.com#video
The video needs to pop up if a link is clicked internally on the site (ie: <a href="#video">) and also if the hash is present in the URL on page load.
Easy enough to check for the hash in the URL using window.location.hash or when a link with the hash is clicked and fire the associated javascript function. That's working as expected without any issues.
However as this URL will be sent out in emails with Google Analytics code automatically added, the analytics code is appended to the end of the URL:
http://www.domain.com#video?utm_source=...
Because the analytics code will change with each email campaign, I can't do a simple Javascript replace() to ignore the analytics code.
How do I go about checking whether the hash is present in the URL, but ignore anything after a ? if present?

Isn't the proper form of a URL to have the hash at the end after the query parameters? Then, the location.hash variable will work properly and you won't need special code. Your URL should look like this and then you can just directly use location.hash which will be #video:
http://www.domain.com?utm_source=xxx#video
I don't advise this as the solution (I think you ought to get the URLs fixed to be legal), but you can use this code to parse the hash value out of the URL even if it's in the illegal position:
var matches = window.location.href.match(/#(.*?)(\?|$)/);
if (matches) {
var hash = matches[1];
}
This code extracts from the "#" to either end of string or "?" whichever comes first. You can see it run on a bunch of test URLs here: http://jsfiddle.net/jfriend00/HuqL7/.

location.hash.match(/[^?]*/)
Assuming the hash is always first, that should do it.

(This is a literal answer to your question, but there is a huge caveate) Technically, you can just test:
var h = window.location.hash;
var ind = h.indexOf( '?' );
var test = ind <0?h:h.substr(0, ind)
If you want Google Analytics to work, you may have problems #. The rule is that everything after a # is not sent to the server, which means that your Analytics may go out the window. You need to make sure that your hash is added after all of the Google stuff. If it is, then you won't need to worry about testing anything.