Results 1 to 5 of 5

Thread: Dynamic Ajax Content & URL change on click?

  1. #1
    Join Date
    Feb 2008
    Posts
    137
    Thanks
    18
    Thanked 2 Times in 2 Posts

    Question Dynamic Ajax Content & URL change on click?

    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?
    ASCII stupid question, get a stupid ANSI!
    Beta is Latin for still doesn’t work.
    Mac users swear by their Mac, PC users swear at their PC.
    Keyboard not found...Press any key to continue.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

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

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

    Code:
    <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:

    Code:
    <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.
    Last edited by jscheuer1; 01-11-2012 at 06:45 PM. Reason: add - But you could and should . . .
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    student101 (01-15-2012)

  4. #3
    Join Date
    Feb 2008
    Posts
    137
    Thanks
    18
    Thanked 2 Times in 2 Posts

    Default

    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.
    ASCII stupid question, get a stupid ANSI!
    Beta is Latin for still doesn’t work.
    Mac users swear by their Mac, PC users swear at their PC.
    Keyboard not found...Press any key to continue.

  5. #4
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    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:
    Code:
    <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.
    Daniel - Freelance Web Design | <?php?> | <html>| español | Deutsch | italiano | português | català | un peu de français | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  6. The Following User Says Thank You to djr33 For This Useful Post:

    student101 (01-15-2012)

  7. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by student101 View Post
    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:

    Code:
    <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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. The Following User Says Thank You to jscheuer1 For This Useful Post:

    student101 (01-15-2012)

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •