Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

Change querystring with Javascript

JavaScript string

  • Please log in to reply
7 replies to this topic

#1 CygnetGames

CygnetGames

    CC Addict

  • Advanced Member
  • PipPipPipPipPip
  • 122 posts

Posted 19 March 2008 - 01:46 PM

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?
  • 0

#2 fahlyn

fahlyn

    CC Regular

  • Just Joined
  • PipPipPip
  • 32 posts

Posted 20 March 2008 - 04:13 AM

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 www.domain.com/search/?crit=searchCriteriaHere...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?
  • 0

#3 CygnetGames

CygnetGames

    CC Addict

  • Advanced Member
  • PipPipPipPipPip
  • 122 posts

Posted 21 March 2008 - 08:18 AM

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.co...=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.co...=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.
  • 0

#4 fahlyn

fahlyn

    CC Regular

  • Just Joined
  • PipPipPip
  • 32 posts

Posted 21 March 2008 - 03:03 PM

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.
  • 0

#5 CygnetGames

CygnetGames

    CC Addict

  • Advanced Member
  • PipPipPipPipPip
  • 122 posts

Posted 22 March 2008 - 07:30 AM

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.co...=searchCriteria, the user visits http://www.domain.co...=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.
  • 0

#6 fahlyn

fahlyn

    CC Regular

  • Just Joined
  • PipPipPip
  • 32 posts

Posted 22 March 2008 - 11:00 AM

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.
  • 0

#7 CygnetGames

CygnetGames

    CC Addict

  • Advanced Member
  • PipPipPipPipPip
  • 122 posts

Posted 23 March 2008 - 02:08 AM

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

Cheers - I was wondering what it was called.

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.
  • 0

#8 tsalvad

tsalvad

    CC Lurker

  • Just Joined
  • Pip
  • 1 posts

Posted 28 August 2009 - 03:35 PM

Hello CygnetGames, can u please post an example, i'm just trying to do that, thxn!
  • 0





Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download