Page 2 showing Page 1 content in AJAX Based Navigation

Problem: User using Magento theme that has AJAX based navigation. The site page has two pages. When they first click page 2, normal; when they refresh page 2, it shows the cached content of page 1.

Cause: This is due to the way the template handles AJAX requests. Let's start from page 1. The current url is “your_site_url.html”. By visiting this page, the HTML response is cached by LiteMage using it's URL. Then click on the page 2, which is an AJAX call, the JSON response is also cached by LiteMage using it's URL. Now click the current page(page 2) again, the URL used for requesting the current page is “your_site_url.html#” and the browser will interpret as “your_site_url.html”, so served with the cache page 1.

Solution: Modify the theme's template with a single line change as the following example sm_market theme (located under app/design/frontend/sm_market/default/template/page/html/pager.phtml):

Original

<?php foreach ($this->getFramePages() as $_page): ?>
         <?php if ($this->isPageCurrent($_page)): ?>
              <li class="current"><a href="#" onclick="javascript:void(0);"><?php echo $_page ?></a></li>
         <?php else: ?>
              <li class=""><a href="<?php echo $this->getPageUrl($_page) ?>"><?php echo $_page ?></a></li>
         <?php endif;?>
<?php endforeach;?>
      

Modified to

<?php foreach ($this->getFramePages() as $_page): ?>
    <?php if ($this->isPageCurrent($_page)): ?>
        <li class="current"><a href="<?php echo $this->getPageUrl($_page) ?>"><?php echo $_page ?></a></li>
    <?php else: ?>
        <li class=""><a href="<?php echo $this->getPageUrl($_page) ?>"><?php echo $_page ?></a></li>
    <?php endif;?>
<?php endforeach;?>
      

Which will now ensure that the full page URL is used for each page request. This guarantees that each HTML and AJAX request will have their own unique URL and therefore, their own unique cached copies.

Notes: The sm_market theme appends additional information to the end of a URL to notify the back-end when it wants to make an AJAX request. For example, an AJAX request for page 2 of “test.html” would become “test.html?p=2&isLayerAjax=1” when using the sm_market theme. This appended information will vary from theme to theme.