How to load same page using jquery / ajax?

Question

code:

<script type="text/javascript">
    $(document).ready(function(){
    function Display_Load()
    {
        $("#load").fadeIn(1000,0);
        $("#load").html("<img src='load.gif' />");
    }
    function Hide_Load()
    {
        $("#load").fadeOut('slow');
    };
    $("#paginate li:first").css({'color' : '#FF0084'}).css({'border' : 'none'});
    Display_Load();
    $("#content").load("<?php echo $_SERVER['PHP_SELF']; ?>?page=1", Hide_Load());
    $("#paginate li").click(function(){
        Display_Load();
        $("#paginate li")
        .css({'border' : 'solid #193d81 1px'})
        .css({'color' : '#0063DC'});
        $(this)
        .css({'color' : '#FF0084'})
        .css({'border' : 'none'});
        var pageNum = this.id;
        $("#content").load("<?php echo $_SERVER['PHP_SELF']; ?>?page=" + pageNum, Hide_Load());
    });
});
</script>

How can we load same page while making pagination using jquery/ajax without refresh page. I am doing this

.load(<?php echo $_SERVER['PHP_SELF']; ?>?page=1)

its not working so how can I do this ?

Thank You

Answer 1

instead of using .load() use .get() Because .load is no longer in support by jquery.

 $.get("<?php echo $_SERVER['PHP_SELF']; ?>?page=1", function(data, status){
        console.log("Data: " + data + "\nStatus: " + status);
 });