javascript - Laravel & Ajax load data without refreshing page - Stack Overflow

admin管理员组

文章数量:1415484

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);
            }
        });
 });

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);
            }
        });
 });

• javascript
• jquery
• ajax
• laravel

Share Improve this question Follow edited Dec 22, 2018 at 10:10 Aboud Jouda asked Dec 22, 2018 at 9:58 Aboud JoudaAboud Jouda 10711 silver badge1010 bronze badges 5

• 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 Commented Dec 22, 2018 at 10:01
• 1 You can use laravel pusher. It would better for your application. laravel./docs/5.7/broadcasting#driver-prerequisites – Md.Sukel Ali Commented Dec 22, 2018 at 10:20
• is data came from tabel or log file? – Dhruv Raval Commented Dec 22, 2018 at 11:15
• it's ing from a table – Aboud Jouda Commented Dec 22, 2018 at 11:19
• check my answer – Dhruv Raval Commented Dec 22, 2018 at 11:23

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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.

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();

本文标签： javascriptLaravel amp Ajax load data without refreshing pageStack Overflow