View Full Version : Help with changing document.href and loading AJAX content in sequence.

Mad Mouser
06-24-2008, 09:11 PM
Hello all,


To have a page loaded via window.location.href=x (or another method) and have it's content changed via a JQuery AJAX call.


I am using the JQuery 1.2.6 framework with my website. I have static content that is loaded via AJAX into a div by the document.ready event handler, and changed by user interaction with other event handlers (ie a JS based nav menu). Here is than code:

On the Main Ajax Driven Page

<script type='text/javascript'>

Here is the showContent() function in the external .js file.

function showContent(whatContent){
if (whatContent==null) {

In order for the dynamic content to be accessible for users who do not have JS enabled, it is formatted as an .html file, complete with a DTD. (In fact it independently validates as xhtml 1.0 strict.) Non-JS users can access the page via direct URL and view it in a basic format.

The Code:

To catch users who have JS enabled from erroneously viewing the ugly non-ajax format, the dynamic content has this script in its head:

<script type='text/javascript'>

The first parameter in showMe() is the URI of the AJAX driven main page. The second parameter is the filename of the dynamic content the user is currently at.

The showMe() function in the external .js file:

function showMe(whatAddress,whatContent) {
if (location.href!=whatAddress){

The script simply checks to see if the current URI is the URI of my main page; if it isn't, the browser is redirected to that page. The showContent() function is called to load appropriate dynamic content file, instead of the default file. If the user is at the URI because they don't have JS enabled, then of course this script doesn't fire and no harm done.

The Problem:

Instead of the correct dynamic content being loaded, such as example.html, the default content is always loaded when the browser refreshes. How can I solve this, if possible?

I have tested all the parameters using hard-set variables and the alert() function to make sure they are being passed correctly. I have also tried using the JQuery window.load() method, which is supposed to fire a function after the window and all its elements have loaded.

I admit that my JS is weak, I spend most of my time with PHP and MySQL. I hope that I'm not missing a fundamental rule of how JS behaves.

Thanks in advance,

Mad Mouser

06-24-2008, 11:35 PM
You would have to set a cookie. Once you make the AJAX call to fetch a page, make a cookie remembering which page was fetched. On page load, automatically make an AJAX call which fetches the page form the cookie. That's the only way, I think. A user will never be able to navigate directly to the exact page you want. For example, if they follow a link to http://www.example.com/ intending for the AJAX content of example.html to be loaded, instead the last page fetched would be loaded.

Sorry if that was a rather incompetent explanation. The point is that the only way is to use cookies, and the drawback is that you can't do something like in php: http://www.excalo.com/?page=example.html.