CODEWITHSUNDEEP
phpjqueryajaxlaravel-5pagination
Vishal Shetty
Vishal Shetty

Reputation: 1668

Jquery Ajax isn't working properly with Laravel Pagination

I am trying to load records from database table using ajax and laravel pagination

This is my user interface enter image description here

Code to display pagination buttons

<div class="pull-right" id="inboxcount">

    <div class="btn-group">
         <button type="button" class="btn btn-default btn-sm" data-url=" " id="inbox_prev_page_url"><i class="fa fa-chevron-left"></i></button>
         <button type="button" class="btn btn-default btn-sm" data-url=" " id="inbox_next_page_url"><i class="fa fa-chevron-right"></i></button>
    </div>
</div>

On page load I am fetching data from table using ajax , currently I kept pagination for 2 records so that it is easy to understand.

Ajax code to load the records first time when page is loaded

$(document).ready(function() 
    {
      $.ajax({
          url: "http://localhost/sanimailer/public/get-inbox/2",
          dataType: "json",
          type:"get",
          async: true,
          success: function(data) 
          {
            if(data!='NULL')
            {
              console.log(data);

              $("[id=inboxcount]").prepend(data['from'] + ' - ' + data['to'] + ' / ' + data['total']);
              $("[id=inbox_prev_page_url]").attr("data-url",data['prev_page_url']);
              $("[id=inbox_next_page_url]").attr("data-url",data['next_page_url']);

              for (var i=0; i<data['data'].length; i++) 
              {
                  var fromName = data['data'][i].fromName;
                  var fromAddress = data['data'][i].fromAddress;
                  var subject = (data['data'][i].subject).substr(0,50); 
                  var date = data['data'][i].date;


                  var row = $('<tr><td><input type=checkbox></td><td class=mailbox-star><a href=#><i class=fa fa-star text-yellow></i></a></td><td class=mailbox-name><a href=# title='+ fromAddress + '>' + fromName + '</a></td><td class=mailbox-subject>' + subject + '</td><td class=mailbox-attachment><i class=fa fa-paperclip></i></td><td class=mailbox-date>' + date + '</td></tr>');

                  $("#inboxtable").append(row);
              }
            }

          }});

});

After loading results are shown in above image. Here you can see i have updated data-url attribute for both the buttons

Now if i click on next button next data is loaded ,here is ajax code for next button click event

$("[id=inbox_next_page_url]").click(function(){

        var url=$("[id=inbox_next_page_url]").data("url");

        $.ajax({
          url:url,
          dataType: "json",
          type:"get",
          async: true,
          success: function(data) 
          {
            if(data!='NULL')
            {

              console.log(data);
              // $("#inboxtable").empty();
              $("[id=inbox_prev_page_url]").attr("data-url","");
              $("[id=inbox_next_page_url]").attr("data-url","");


              $("[id=inboxcount]").prepend(data['from'] + ' - ' + data['to'] + ' / ' + data['total']);
              $("[id=inbox_prev_page_url]").attr("data-url",data['prev_page_url']);
              $("[id=inbox_next_page_url]").attr("data-url",data['next_page_url']);

              alert($("[id=inbox_next_page_url]").attr("data-url"));

              for (var i=0; i<data['data'].length; i++) 
              {
                  var fromName = data['data'][i].fromName;
                  var fromAddress = data['data'][i].fromAddress;
                  var subject = (data['data'][i].subject).substr(0,50); 
                  var date = data['data'][i].date;


                  var row = $('<tr><td><input type=checkbox></td><td class=mailbox-star><a href=#><i class=fa fa-star text-yellow></i></a></td><td class=mailbox-name><a href=# title='+ fromAddress + '>' + fromName + '</a></td><td class=mailbox-subject>' + subject + '</td><td class=mailbox-attachment><i class=fa fa-paperclip></i></td><td class=mailbox-date>' + date + '</td></tr>');


                  $("#inboxtable").append(row);
              }
            }

          }});
      });

Here you see , I am updating data-url attribute of prev and next button. When I inspect code I see data-url is updated for next button, but when I click on next the current data-url it shows always, actually it should show updated value in data-url but it shows same data ,and i am not able to load further records becasue of this.

Console Data

enter image description here

check this enter image description here

Not sure why the pagination is not proceeding further

Upvotes: 1

Views: 1062

Answers (1)

SpaceFozzy
SpaceFozzy

Reputation: 2808

The reason the pagination isn't progressing is because jQuery keeps fetching its internally cached version of the url data attribute when you use .data('url') on your next button click. To always fetch the current attribute fresh from the DOM, use .attr('data-url').

So change your line:

var url = $("[id=inbox_next_page_url]").data("url");

to

var url=$("[id=inbox_next_page_url]").attr("data-url");

and your code will work.

From the .data() jQuery docs:

The data- attributes are pulled in the first time the data property is accessed and then are no longer accessed or mutated (all data values are then stored internally in jQuery).

And here's a related post on the jQuery forums.

Upvotes: 2

Related Questions