Question

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?

Answer 1

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.