How GET works with AJAX

Question

How GET works with AJAX

Navigation

#1 by (0 votes)

0

I have a page with AJAX that is working, actually it does not work better, I'm trying to understand how AJAX works with the url for pagination to work properly.

What happens is that in normal pagination, without AJAX each of the links worked normal, more specifically prev and next: prev 1 2 3 4 next, since GET was in the same url

But with AJAX only the sequence of numbers works. If I put $next=$current_page+1; the variable current_page always receives the current url without the value of $_GET["page_no"] then with AJAX if I'm on page 8 and click next on pagination, apparently not recognizing the GET in the url current, the next goes to page 1 instead of page 9.

I do not know if this has to do with working with data-haref , instead of href .

Thank you for your help

class.crud.php

public function paginglink($query,$records_per_page)
{

    $self = $_SERVER['PHP_SELF'];

    $stmt = $this->db->prepare($query);
    $stmt->execute();

    $total_no_of_records = $stmt->rowCount();

    if($total_no_of_records > 0)
    {
        ?><ul class="pagination"><?php
        $total_no_of_pages=ceil($total_no_of_records/$records_per_page);
        $current_page=1;
        if(isset($_GET["page_no"]))
        {
            $current_page=$_GET["page_no"];
        }
        if($current_page!=1)
        {
            $previous =$current_page-1;
            echo "<li class='page-item'><a href='#' class='page-link' data-href='".$self."?page_no=1'>First</a></li>";
            echo "<li class='page-item'><a href='#' class='page-link' data-href='".$self."?page_no=".$previous."'>Back</a></li>";

        }
        for($i=1;$i<=$total_no_of_pages;$i++)
        {
            if($i==$current_page)
            {
                echo "<li class='page-item'><a href='#' class='page-link' data-href='".$self."?page_no=".$i."' style='color:red;'>".$i."</a></li>";
            }
            else
            {
                echo "<li class='page-item'><ahref='#' class='page-link' data-href='".$self."?page_no=".$i."'>".$i."</a></li>";
            }
        }
        if($current_page!=$total_no_of_pages)
        {
            $next=$current_page+1;
            echo "<li class='page-item'><a href='#' class='page-link' data-href='".$self."?page_no=".$next."'>Next</a></li>";
            echo "<li class='page-item'><a href='#' class='page-link' data-href='".$self."?page_no=".$total_no_of_pages."'>Last</a></li>";
        }
        ?></ul><?php
    }
}

AJAX

$('.page-link').click(function (e) {
   e.preventDefault();

   var url = $(this).data('href');

   $.ajax({
         url: url,
         success: function (response) {

           var html = $('<h1/>', {html : response}).find('#paginacao-ajax');
           $('#paginacao-ajax').html( html )              

         }
   });
})

php javascript jquery ajax

asked by anonymous 10.09.2017 / 16:55

1 answer

Log in using native Facebook dialog from a Progressive Web App Browse Binary Tree

score 0 · Answer 1

You need to dismantle your current page when making the request, add an attribute by reporting this to the 'next', 'prev', 'last', 'first' buttons.

 echo "<li class='page-item'><a href='#' class='page-link' data-href='".$self."?page_no=".$next."' data-actual-page='$actual_page'>Next</a></li>";

And at your request, retrieve the page and transmit:

$('.page-link').click(function (e) {
   e.preventDefault();

   var url = $(this).data('href');
   var actual_page = $(this).data('actual-page');
   $.ajax({
         url: url,
         type:GET,
         data:{actual_page:actual_page},
         success: function (response) {

           var html = $('<h1/>', {html : response}).find('#paginacao-ajax');
           $('#paginacao-ajax').html( html )              

         }
   });
})

PS: I particularly prefer to use POST in AJAX requests, but I do not think it makes any real difference to simple pageings.