Question

I have created ajax code for my city tabs to display respective city data from ajax.

I have used following code:

function showBrandData(str)
    document.getElementById("dvloader").style.display = 'block';                                
    jQuery('#txtDisplayBrands').slideDown("slow");

    if (str=="")
    {
        document.getElementById("txtDisplayBrands").innerHTML="";
        return;
    }
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("dvloader").style.display = 'none';
            document.getElementById("txtDisplayBrands").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","http://localhost/demostore/getBrandData.php?q="+str+"&page=1",true);
    xmlhttp.send();
}

Following is my div to load above ajax contents

  <!-- div to display brands products -->
    <div id="txtDisplayBrands"></div>

Now I have used following jquery plugin to paginate my items
http://cssglobe.com/post/9801/easy-paginate-jquery-plugin-for-pagination

but when I used this on my ajax responce the pagination does not work.

Can you please help me where I am doing wrong.

Thanks & Regards

Answer 1

The default code from that site:

<script type="text/javascript">

  jQuery(function($){ 
  $('ul#items').easyPaginate();
  }); 

</script>

Gets called on page load. Your ajax call is getting executed after that so you need to call the pagination code on the elements you load in your ajax call.

Consider adding it within the if statement
if (xmlhttp.readyState==4 && xmlhttp.status==200)