Laravel & Ajax load data without refreshing page

Question

I'm currently working on a code that displays users activity log. Ajax will call the route and gets the response (json) results. I need to be able to display the log records on admin dashboard without refreshing the page.

Ajax

 $(document).ready(function() {
        $.ajax({
            type: 'get',
            url:"{{ route('users.activity') }}",
            dataType: 'json',
            success: function (data) {
                $.each(data, function() {
                    $.each(this, function(index, value) {
                        console.log(value);
                        $('#activity').append('' +
                            '<div class="sl-item">' +
                            '<div class="sl-left bg-success"> <i class="ti-user"></i></div>' +
                            '<div class="sl-right">' +
                            '<div class="font-medium">' + value.causer.username + '<span class="sl-date pull-right"> ' + value.created_at + ' </span></div>' +
                            '<div class="desc">' + value.description + '</div>' +
                            '</div>' +
                            '</div>');
                    });
                });
            },error:function(){
                console.log(data);
            }
        });
 });

why you want to reload data? Has user new activities? filling a form? doing something? and it can be the event you are looking for instead of click. — Ali Sheikhpour
– Ali Sheikhpour, Commented Dec 22, 2018 at 10:01
You can use laravel pusher. It would better for your application. laravel.com/docs/5.7/broadcasting#driver-prerequisites — Md.Sukel Ali
– Md.Sukel Ali, Commented Dec 22, 2018 at 10:20

Stackedo · Accepted Answer · 2018-12-22 11:28:27Z

2

If I understood, you can do this:

$(document).ready(function() {
    var requesting = false;
    var request = function() { 
    requesting = true;
    $.ajax({
        type: 'get',
        url:"{{ route('users.activity') }}",
        dataType: 'json',
        success: function (data) {
            $.each(data, function() {
                $.each(this, function(index, value) {
                    console.log(value);
                    $('#activity').append('' +
                        '<div class="sl-item">' +
                        '<div class="sl-left bg-success"> <i class="ti-user"></i></div>' +
                        '<div class="sl-right">' +
                        '<div class="font-medium">' + value.causer.username + '<span class="sl-date pull-right"> ' + value.created_at + ' </span></div>' +
                        '<div class="desc">' + value.description + '</div>' +
                        '</div>' +
                        '</div>');
                        requesting = false;
                });
            });
        },error:function(){
            console.log(data);
        }
    });
   };
  if(!requesting){
      setTimeout(request, 1000);
  }
 });

Every seconds it does a request to your users.activity route, so there is an update every second.

edited Dec 22, 2018 at 11:28

answered Dec 22, 2018 at 10:09

Stackedo

9432 gold badges9 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Nikos M. Over a year ago

you should use setTimeout instead of setInterval and make sure a request is NOT already in progress before firign a new request. So you reset the setTimeout when request finishes. This would be better

Aboud Jouda Over a year ago

I tried something like this before, but the issue it keeps append the same records again an again.

Stackedo Over a year ago

Another approach could be a websocket like socket.io, when the user do an activity send a message to user that can see user's activities. (docs socket.io/docs). Maybe the problem is in the queries?

Aboud Jouda Over a year ago

the query works fine with no issues, the issue is in my ajax code only

Aboud Jouda Over a year ago

thank you for the effort, but i still need to refresh the page

Dhruv Raval · Accepted Answer · 2018-12-22 11:22:54Z

You need to send last record id in server. so you can get only new data. my updated answer based on @stackedo answer .

$(document).ready(function () {
    var lastId = 0; //Set id to 0 so you will get all records on page load.
    var request = function () {
    $.ajax({
        type: 'get',
        url: "{{ route('users.activity') }}",
        data: { id: lastId }, //Add request data
        dataType: 'json',
        success: function (data) {
            $.each(data, function () {
                $.each(this, function (index, value) {
                    console.log(value);
                    lastId = value.id; //Change lastId when we get responce from ajax
                    $('#activity').append('' +
                        '<div class="sl-item">' +
                        '<div class="sl-left bg-success"> <i class="ti-user"></i></div>' +
                        '<div class="sl-right">' +
                        '<div class="font-medium">' + value.causer.username + '<span class="sl-date pull-right"> ' + value.created_at + ' </span></div>' +
                        '<div class="desc">' + value.description + '</div>' +
                        '</div>' +
                        '</div>');

                });
            });
        }, error: function () {
            console.log(data);
        }
    });
    };
   setInterval(request, 1000);
});

In controller add were condition to query :

UserActivity::where('id','>',$request->id)->get();

Collectives™ on Stack Overflow

Laravel & Ajax load data without refreshing page

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related