Change querystring with Javascript

[CygnetGames]

I'm making an ajax search page. I've got all the ajax working, but there's a usability issue with the query string.

In my setup, the user types a search query and clicks a button. Then javascript fetches the results via ajax and injects them into the page. All good.

The problem is - I want the user to be able to bookmark their search, or email the url to a friend, etc. With a naive way of doing ajax, they won't be able to do this as the url of the page doesn't change when a search is made.

So what I want to be able to do is to alter the query string of the url using javascript without reloading the page. Is this possible?

[fahlyn]

I don't believe that is possible. I don't think you'd want to save the actual URL you're using for your ajax request anyway....would you? Wouldn't that either be XML, JSON or just an HTML snippet, and not your entire page? Why don't you add an optional argument to your page....like http://www.domain.com/search/?crit=s...teriaHere...or something....then have a link or button that says Bookmark these results or send these results to a friend...and send them the link above so you load your entire page, and not just the results from your ajax call. Just change searchCriteriaHere each time they do a different search.

Does that make sense?

[CygnetGames]

Thanks for the reply.
I've got half of what you are saying already. I have a parameter so that if someone visits the url http://www.domain.com/search/?crit=searchCriteria, then the search will be performed.
What I want is, if they visit the url http://www.domain.com/search/, enter their criteria and click on the button, the url will change to http://www.domain.com/search/?crit=searchCriteria but the page will not reload. The search will be performed using ajax.

Anything I've tried with javascript (like assigning to document.location.search) makes the page reload, which is what I don't want to happen.

[fahlyn]

When you change document.location the browser is going to navigate to that URL. You could create a text box for the "Search Location" that has the URL you want so the user can copy it...other than that...unless you want the page to refresh, i think you're out of luck.

[CygnetGames]

I've come up with a solution now.
I'm using (not sure what it's called, but...) the part of the url after the # character.
So instead of visiting http://www.domain.com/search/?crit=searchCriteria, the user visits http://www.domain.com/search/#crit=searchCriteria.
Javascript can change document.location without the page reloading if only the part after the # has been changed. Then I use javascript to parse the "query string" after the # and do the relevant ajax.

[fahlyn]

Interesting. I believe that's called an anchor link. Usually, that is used to link from one section of an HTML document to another via the "name" attribute of the "a" tag.

Good deal, I'm glad you were able to figure something out. So do you have some on page load event that triggers to parse the query string and do your Ajax search?

One thing that you may consider depending on your site's traffic is efficiency. When a user clicks the link with the anchor link info in it for your ajax search you will hit the server and do the work for the initial page load, then your javascript will automatically hit the server again to perform your search. Just something you may want to keep in mind that each one of those page loads will result in (a minimum of) 2 round trips.

[CygnetGames]

Originally Posted by fahlyn

Interesting. I believe that's called an anchor link.

Cheers - I was wondering what it was called.

Originally Posted by fahlyn

Just something you may want to keep in mind that each one of those page loads will result in (a minimum of) 2 round trips.

Yeah, that's not a worry for my application though.
The main reason for using the ajax is to make sure that the rest of the page is loaded before the search is initiated.