How does GET work with AJAX?

Asked

Viewed 812 times

0

I have a pageant AJAX that is working, actually without working better, I’m trying to understand how the AJAX works with the url for paging to work properly.

What happens is that in normal pagination, without AJAX each of the links functioned normal, more specifically the Prev and the next: Prev 1 2 3 4 next, since the GET was at 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 am on page 8 and click next in the pagination, because apparently I am not recognizing the GET in the current url, next goes to page 1 instead of page 9.

I don’t know if this has anything to do with me working with data-haref, instead of href.

I appreciate 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

  • "I don’t know if this has anything to do with me working with data-haref instead of href, "I don’t see any data-href in the code you put.

  • @Isac updated the code

  • And the urls that are being called here var url = $(this).data('href'); are correct ? make a console.log of that amount to confirm

  • took out the href="#" I just left data-href and what is being captured by the stretch var url = $(this).data('href'); is the data-href

  • @Isac on the console is giving ok to all pagination numbers ex: /pagina.php?page_no=1, but for next and Prev this giving /undefined in the url and next to the error description is 404 not found,

  • Looks like you’re already figuring out the problem. Check your $current_page has the correct value with var_dump or similar

  • var_dump returns int, print_r retorna 1

  • Before or after the $current_page=$_GET["page_no"]; ? You should test after that line to ensure that you are reading correct values from $_GET. Also take and confirm the value of $next and/or $previous to ensure that they are right before reaching the echo

  • @Isac tested before and after the result is the same

Show 4 more comments

1 answer

1

You need to demonstruct what your current page is when making the request, add an attribute stating this to the 'next', 'Prev', 'last', 'first'.

 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 in 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 don’t think it makes any difference at all to simple requests

Browser other questions tagged php javascript jquery ajax

You are not signed in. Login or sign up in order to post.