How can i change the query string (live)? - javascript

I used query string now to adress some special (dynamic) content. Now is my question: Is it possible to change the actual query by JS when i change the dynamic content, so that i could refresh the site with the same content and not with the default query values.

Yes, you can achieve this by changing window.location.href if you want the browser to go to a different URL. For example, go to http://google.com and now open the JavaScript console of your browser and put:
window.location.href = 'http://google.com/?q=abc'
If you only want to change part of the URL (query string), there are a bunch of ways to do that. You can do it manually and set a whole new URL or use libraries/plugins to help you do this. How to parse the query string: How can I get query string values in JavaScript?

i hope i understood the question right...
i guess that browsers wont like to allow you to touch their Request object...
but i think of two methods:
you can redirect the browser to the new changed link using
window.location='?q=changed_search'
in your other scripts, dont reference the real Querystring, but a (private to the page) copy of it which you can change wherever you want.
Note: QueryString is mostly input from the user, and i dont think it should be needed to change without the page being resubmitted (as suggested in 1).
cheers.

Related

how to write/change the query string without causing the browser to load a new page

The first technique that I can write the Query string is using the submit's form.
I want to change the url without the redirect.
Old Url is
localhost:8080
and automatically adding foo=1&foo=2 (variable s) in the Url
localhost:8080?=foo=1&foo=2
There are other technique or means for writing?
You can manipulate the location url with the HTML5 history API. Unfortunately, this only works on proper browsers.
Alternately you could use hash (#) instead of question mark in the URL. In your case localhost:8080#foo=1&bar=1 using location.href = '#foo=1&bar=1'; for example.
Don't know if this is possible in your case though.

How to send a GET request with a specific query string to my page using Jquery?

This code toggles the color of an element whenever you click on it. But how can I send a GET request with query string ?toggle=True on the first toggle and ?toggle=False on the second one?
Ow, I can see it appearing in Firebug, but not in the url of the page. Any idea why?
Making a request and changing the URI in the address bar are two different things unless you cause the browser to load a completely new page.
If you want to do that, then you should forget about using client side JavaScript and move your logic server side and use a regular link.
In the server side logic, the value of the query string argument would be used to determine the class of the div (which is used to set the style) and the href of the link (i.e. if it has True or False in the query string).
If you want to avoid loading a new page, then you are looking at two separate steps.
The first one you already have (the changing of the style using JS).
The rest gets more complicated…
First you need server side logic so that True/False in the query string will set up the initial state of the page correctly. This will be the same as the logic described for the previous method.
Then you need to update the URI so that it matches the one that would load the page in the state you are altering the current page into. This is done using the History API (pushState and friends). There are more details on the subject on this question.
If you want to notify the server of the change, then you'll need to use jQuery.get, as well as updating the page and changing the URI in the address bar. To be efficient, you should probably add an additional query string argument (so you can tell if it from Ajax from that a normal page load) and have the server return a simple acknowledgement rather than the whole HTML document when it sees that argument.
Just use jQuery's get method to do so or do it yourself in your toggle functions.
A pragmatic yet pretty basic solution may be to use a local variable as a counter.. If the counter is even, send True, if odd, send False.
Increment counter on each click :)

How to manipulate the URL with Javascript and JQuery?

I want to make a page with a lot of Javascript interactions. However, while a user navigates through the page the URL must change too. So, when the user shares the URL or saves it, it can lead him to the actual state he was.
How can I do that?
Examples:
myapp.com/page1
myapp.com/page2
pushState, as seen on github
Answered by this SO question: Change the URL in the browser without loading the new page using JavaScript
The only part of the url (or location) that you can change without reloading the page, is the hash. That is the part behind the #. Many ajax enhanced applications make use of this, including Twitter. You can change this hash on the go, and interpret the hash tag on page load to initialize the page to the correct state.
Set this value: window.location.href
window.location.href = "myapp.com/page2";

Ajax - maintaining state in the url - no #

I am working on an AJAX website where there are two search parameters. I did some mod-rewrite and checking for $_GET variables so that i can do something like..
site.com/var1/var2/ -> automatically do the search based on the parameters.
Now what I want is for people who do the search manually, to be able to have the url in that format. The only method that I've been able to find has to do w/modifying the url using..
location.hash = 'foo';
which would make it something like.. site.com/#var1
Which isn't as nice as the mod-rewrite. What I have found that works is if in my search function that does the ajax call i have this code
// avoid appending further variables if there are already variables
if(location.href == 'some absolute website path')
location.href = var1+'/'+var2+'/';
This will work, but basically forces the page load and then my auto search php/javascript will kick in due to the mod-rewrite. SO this works, however it involves an extra page refresh that I would rather avoid.
Any better solutions out there? Ideally if i was able to use location.href where it didn't cause the page to load once i change the value, but would just change in the url would be ideal (while maintaining my mod-rewrite links, w/out the # marks).
I am using jquery and php.
It's that way by design, there is no way yo change the url or path without causing a new request. Regards.

Stop reload when using window.location

On click of a button I am changing window.location.href, i.e. I am adding one query string parameter. This causes the page to be refreshed (as I am changing window.location.href).
I want to know is it possible to stop this page refresh and append the query string in the url?
No. You can change the #hashstring, but changing the query string results in a reload.
Any assignment of new values to the location object from JavaScript will load a new page.
It is possible to change the hash value without refreshing the page but not the query string.
See this thread: http://www.sitepoint.com/forums/showthread.php?t=552076
Take a look at this thread, maybe it will help you.
If you append a #hashstring the page will not reload. In addition, if the user hits the back button on the browser it will remove the #hashstring. The #hashstring can be useful for saving state in the URL bar without causing a reload and can be coupled with ajax calls.
It's important to note that the #hashstring will not be sent to the server and is only visible to the web browser. For example: http://example.com/#blah
Will generate a http request that looks like:
GET / HTTP/1.1
Host: example.com
The #blah does not get sent down to the server by the browser.

Categories