Multiple Query Strings In The History

[Man In Tan]

I have a potential client, who needs dynamic page, that won't add a history item each time the page is accessed with a different query string. For the sake of easy examples, let's say we're using the calendar on this page. When you click on the table-cells, it reloads the page with a different query string. How do I avoid adding this new query string to the list of places I've been, using JavaScript?

[Ingolme]

Javascript performs an HTTP request with AJAX and places the data into an HTML element using the DOM. Study Javascript first, then HTML DOM and then AJAX. W3Schools has tutorials on all three of the subjects.

[Man In Tan]

I've tried the W3Schools tutorial on JavaScript, as well as countless other tutorials, countless times, but I just don't seem to get my head around it. Every time I've tried, I end up getting almost nowhere, and feeling like a complete moron. Recently, I was able to learn a little DOM JavaScript, but I can't do much else. I can do a little using XHTML DOM, if I know what object needs to be modified. I'll do another search when I get home, this time for "JavaScript history object", and see what comes up. According to W3Schools:

AJAX is the art of exchanging data with a server, and update parts of a web page - without reloading the whole page.

This doesn't help me in this case, as the page NEEDS to be reloaded, to invoke the help of PHP, which builds the calendar's pages. It does seem like it could be useful for some of my other projects though, if I can ever wrap my head around basic JavaScript.

[Ingolme]

AJAX is able to run PHP code that's in another file and use the results that PHP returns. That's why it's so popular. However, you're going to have to relocate a lot of your PHP code to different files.

[thescientist]

The point is that AJAX can communicate with files on your domain. This means you can makes calls to PHP functions and get the result of the script, and you can pass data to it in the AJAX call. You just have to have the PHP script setup to work in this context. (receiving and responding to AJAX requests)

[Man In Tan]

I just got home, so I'll see what I can find on the history object. It sounds like AJAX is great for some projects (like a few pieces of my forum), but not this one. For one thing, by sending the request by AJAX, it removes the query strings altogether. This makes it impossible to link to (or bookmark) a particular month.

[Ingolme]

Yeah, that's a bit of a problem. Developers usually solve it by modifying the hash of the URL. I don't approve of purely AJAX pages.

[Man In Tan]

All right, here's what I have so far:

<a class="calendarday" href="test0.php?page=calendar&month=9&year=2011&day=4"onclick="location.replace('test1.php?page=calendar&month=9&year=2011&day=4')">4</a>

The anchor tag points to test0.php, but the JavaScript points to test1.php, just so I can tell what's happening with my browser. In theory, tho onclick attribute allows me to use location.replace(), so multiple history items will not be included. However, due to my use of the <a/> tag, for non-JavaScript browsers, you get sent to test0.php via <a/>, not test1.php via location.replace(). How do I remove the <a/> tag's default behavior? I need to only alter <a/> tags that are in the "calendarday", "thiscalendarday" and "eventcalendarday" classes. All other <a/> tags need to be left alone.

[Ingolme]

To remove the default behavior, append "return false;" to the end of the onclick attribute. onclick="location.replace('test1.php?page=calendar&month=9&year=2011&day=4') ; return false; "

[justsomeguy]

You can return false from the onclick handler to cancel the click event.

[Man In Tan]

Thank you all very much! everything seems to be working now.