Dynamic Ajax Content & URL change on click?

[student101]

Dynamic Ajax Content
http://www.dynamicdrive.com/dynamici...jaxcontent.htm

Dynamic Ajax Content & URL change on click?

Is there some way to allow the URL to reflect the clicked link / URL?

[jscheuer1]

Yes. Instead of the syntax used on the demo page:

<a href="javascript:ajaxpage('test.htm', 'contentarea');">test</a>

You may do:

<a href="test.htm" onclick="ajaxpage(this.href, 'contentarea'); return false;">test</a>

In fact, it's preferable, unless you don't want non-javascript users and savvy javascript users navigating to the page on their own. It's better for SEO, and it's better for accessibility. It's also better because using any href that begins with javascript: can (when clicked) cause the page to begin the onunload process in some browsers. When that happens, some undesirable things can occur. Scripts can become erratic or stop altogether, animated .gif images can stop animating. Other stuff, depending upon the page. But in most cases and in most browsers it's harmless as far as that stuff goes.

But you could and should go further I think, do like:

<a href="testplain.htm" onclick="ajaxpage('testajax.htm', 'contentarea'); return false;">test</a>

That way non-javascript users and search engines can go to a regular page. The AJAX version can and should have only the imported content on it, no DOCTYPE, head, script, style, or body tags. Said content should be inside a single div element which may contain all the tags that ordinarily can go in the body of a page.

[student101]

I do appreciate your help here, unfortunately I don't see any change in the actual URL or address bar area.

The reference to the URL appears on mouseover in the status bar.

[djr33]

Well, Ajax is basically the opposite of loading a new page. So in some sense, it shouldn't work with bookmarking.

It's easy to change the URL in the address bar, but it won't actually do anything:

<a href="mypage.htm#ajaxitem" onclick="ajaxpage('ajaxitem.htm', 'contentarea');">test</a>

1. I removed "return false" so that it WILL activate the link.
2. I changed the link to a #-type URL (including a "fragment") so it won't actually reload the page, it'll just jump to a certain point. Of course that might actually default to the top of the page, so you may need to see if that's a problem.


Now, if you actually want that to do something, then you'll need to create a secondary script that will check the fragment's content (if it exists) and load that into the ajax part of the page. But that's not part of the current script.

[jscheuer1]

I do appreciate your help here, unfortunately I don't see any change in the actual URL or address bar area.

The reference to the URL appears on mouseover in the status bar.

That's all I was trying to do. It allows non-javascript users use of the site, as well as crawling by search engines.

You can try a scheme like what djr33 is suggesting. I have seen them before, but they're fraught with problems. Say you do get this URL fragment in the address bar and somehow it doesn't reload the page in at least some browsers (which would remove the AJAX import), without more code, navigating to that bookmark wouldn't load the AJAX content anyway, so what good is it?

And that's not to mention the infinite looping you would probably then get with that additional code in some browsers.

The whole point of AJAX is to avoid page reloads and keep URL's simple and clean. In actual fact, loading in the AJAX content often takes as long or longer than loading a new almost identical page that has the desired content on it. If you want total indexing (for your users, search engines already have it with my earlier suggestion), use separate pages or server side includes.

One thing you might do is, if the javascript enabled user arrives on the search engine indexed page, redirect them via javascript to the desired 'top' page with instructions to load the desired page via AJAX. That's a bit more doable. I think there's a script for that on DD here that loads AJAX content via a query string that could be used as part of that scenario:

http://www.dynamicdrive.com/dynamici...tent/index.htm

That would best be used in conjunction with:

But you could and should go further I think, do like:

<a href="testplain.htm" onclick="ajaxpage('testajax.htm', 'contentarea'); return false;">test</a>

That way non-javascript users and search engines can go to a regular page. The AJAX version can and should have only the imported content on it, no DOCTYPE, head, script, style, or body tags. Said content should be inside a single div element which may contain all the tags that ordinarily can go in the body of a page.

And have the redirect code only on the testplain page.

But cookies might be better way than the URL at that point.