Yajra datatable is interupting jQuery auto refresh function

Question

I have made alert system for new order. For that I am refreshing div (in header) in every three seconds using jQuery function like this

setInterval(function() {  
    $("#notification-rf1").load(location.href + " #notification-rf1");
    $("#notification-rf2").load(location.href + " #notification-rf2");
    $("#notification-rf3").load(location.href + " #notification-rf3");
}, 3000);

This is working fine on other pages but giving issue on those pages where I am using yajra datatable.

When it refresh after three seconds, then those divs which refreshes (using jQuery in 3 sec) become empty. Means all html inside those divs disappears.

I did some testing and found, if I remove yajra datable's code from controller file then issue get resolves.

Here is the controller code:

 if ($request->ajax()) {
    $data = blog_category::get();
    return Datatables::of($data)
    ->addIndexColumn()
    ->addColumn('action', function($row){
    $category = "'".$row->category."'";
    $data = '<button type="button" class="btn btn-info btn-sm" onclick="return editblogcategory('.$row->id.','.$category.');" data-bs-toggle="modal" data-bs-target="#editcategory"><i class="fa fa-pencil" aria-hidden="true"></i></button>
    <button class="btn btn-danger btn-sm" data-toggle="tooltip" data-original-title="Delete" onclick="return deleteblogcategory('.$row->id.')"><i class="fa fa-trash font-14"></i></button>';

    return $data;
    })
    ->rawColumns(['action'])
    ->make(true);
}

Any solution?

use seperate method/route for your datatables results. `$request->ajax()` will be triggered by `$("#notification-rf1").load(location.href + " #notification-rf1");` since it's an ajax call too. Or you can add another condition specifically linked to Yajra datatable calls — N69S, Jan 05 '22 at 10:48
Also, you should check this question, you are requesting 3 times the same page to fill those 3 doms. You can do it with only one request https://stackoverflow.com/questions/866284/jquery-multiple-load-in-a-div — N69S, Jan 05 '22 at 10:51
@N69S `Or you can add another condition`, Hi, I don't know how would I do that. what condition I need for it. Can you show in your answer. I am not much expert. Please elaborate your solution :) — Rishabh, Jan 06 '22 at 04:02

score 1 · Accepted Answer · answered Jan 06 '22 at 09:06

use seperate method/route for your datatables results.

$request->ajax() will be triggered by $("#notification-rf1").load(location.href + " #notification-rf1"); since it's an ajax call too

If you want the janky solution and add another condition to differentiate between yajra calls and other ajax calls, you can use the input draw for example which is sent in every request by yajra.

if ($request->ajax() && $request->draw) {
    $data = blog_category::get();
    ...
}

Yajra datatable is interupting jQuery auto refresh function

1 Answers1