Question

I’m using magento as my CMS, trying to implement ajax for pagination,

I have 2 pages at the moment, the structure is such,

<div class="pager">
        <div class="pages">
          <strong>Page:</strong>
          <ol>
             <li class="current">1</li>
             <li>
                <a href="http://localhost/Bakestore/index.php/tools.html?p=2" class="pageLinks">2</a></li>
             <li class="pager_next_img">
                <a class="next i-next pageLinks" href="http://localhost/Bakestore/index.php/tools.html?p=2" title="Next">
                <img src="http://localhost/Bakestore/skin/frontend/default/Bakestore_Theme/images/pager_arrow_right.gif" alt="Next" class="v-middle">
                </a>
            </li>
          </ol>
    </div>
</div>

my jQuery ajax code is as below,

$j(".pages li a").each(function(){
    $j(this).removeClass('pageLinks').addClass('pageLinks');                                
});

$j(".pageLinks").click(function(e){
    e.preventDefault();
    var anchorSel =  $j(this).attr('href');
    $j.ajax({
        type: "POST", 
        datatype: "HTML",
        cache: true,
        url: anchorSel,

        success: function(data){
            var testdata = $j(data).find(".category-products");
            $j(".col-main .category-products").replaceWith(testdata);
            },

        complete: function(data){
                        $j(".pages li a").each(function(){
                            $j(this).removeClass('pageLinks').addClass('pageLinks');                            });
                            alert($j(".col-main .category-products .toolbar > .pager").html());
                         }
});

It works fine when I click Page 2, but, from page 2 when I hit Page 1, the page reloads. Now when I hit Page 2 again, it works fine.

I debugged my jQuery, sadly, the event $j(".pageLinks").click is not getting fired at all (when I click on Page 1).

Any idea where I’m going wrong?

Answer 1

your return html contains the pagination links?
if thats the case, you need to change .click(function(){ to .live('click', function(){

click binds only existing elements to that event handler. live does the same except also for elements that have yet to come into existence.

live is indeed deprecated. if you are using 1.7, which i dont think you are. you should change it to

$(document).on('click', ".pageLinks", function(){

});