9 Responses to “Coding a jQuery AJAX site that degrades gracefully”

  1. Jeremy

    Mar 29th, 2010


    This AJAX tool works great, and I love that it’s SEO friendly. Do you have any plans to make the back button work?


    • Guillermo

      Mar 30th, 2010

      Thanks Jeremy!

      It’s true, back button doesn’t work with this approach. This could be solved appending a hashtag on the url every time that the content changes and then using that hashtag to reload the content again when the user clicks back or forward.

      Right now adding that feature is not on the plans, the article was only to show how to load AJAX content in a crawler friendy way, but we’ll let you know if we make any changes :)

  2. Brent

    Jun 23rd, 2010

    cool, I was seeing some other tutorials but none of them degraded gracefully. It’d be awesome if you could work in the back button fix using URL hash at some point, if you ever do please email me – brent@mimoymima.com


    b r e n t

  3. Peter

    Aug 1st, 2010

    I am implementing your code to my web, everything work perfect besides Back button. The page url change on back button but content does not update. I was trying to plug in BBQ or history.js but nothing works. Could you help me with this.

  4. Leon

    Oct 26th, 2010

    A couple of quick questions if you’re still around.

    How can I specify more than one ID in ajaxify_links(“#nav a”)

    Why might my jQuery Cycle plugin not work any more for pages loaded via your solution?


    • Guillermo

      Dec 15th, 2010

      Hi Leon! Sorry for the delay ;)

      The function ajaxify_links passes a string to select one (or more) elements using Jquery Selector’s format. In your case you can separate several ids with commas.

      I don’t know how you’re using the cycle plugin. I’ll have to guess that you’re attaching the cycle pugin to some elements inside a “$(document).ready” call. When you load a new page with my solution, new content is inserted on the page. Elements inside this content don’t have the cycle event attached to them (because the plugin was called when this elements were not loaded). You can re-attach the cycle plugin each time you refresh the content.

      Hope this answer your questions :)


  5. modnarte

    May 24th, 2011

    Hi Guillermo,
    I have a similar issue like Leon’s. My ImageFlow was working perfectly until I added your AJAX solution. I love the way your solution works on my pages but as a newbie, I need more information on re-attaching Imageflow. Can you be specific about the code I need and where to insert it?
    This is the ImageFlow init code:

    var domReady = function(handler) { domReadyEvent.add(handler); };

    var instanceOne = new ImageFlow();
    instanceOne.init({ ImageFlowID: ‘myImageFlow’ });


  6. modnarte

    May 30th, 2011

    Hi, I have resolved the Imageflow issue, somewhat, by adding this to nav.js:

    $(document).ready(function () {
    /* $(“p”).text(“The DOM is now loaded and can be manipulated.”);*/
    /* This will be called AFTER the Ajax thing has been done */

    function initImageflow () {
    // Destroy the ImageFlow Instance
    instanceOne = null;

    // Build a shiny new one
    var instanceTwo = new ImageFlow();

    // Initiate with your options
    instanceTwo.init({ ImageFlowID:’myImageFlow’ }); }

    Works in Safari, Chrome, Opera but Firefox seems to be flickering more than before adding your AJAX!

    Any suggestions?

  7. toohot

    Sep 18th, 2011

    Hi Guillermo! Good turtorial, all works fine. Could You help with Back button function please

Leave a Reply