php - laravel & ajax: Live update of blade data by setInterval

Question

I hope that data in the blade can be updated regularly through setInterval, because the data will enter the database through other places, I want to get the Model data from the Controller, and send the dataset to ajax to update the eloquent data in the view

1.ajax ->success:function doesn't work. (Fixed, by Angel Miladinov -> Statement problem)

2.I use $('#todos-list').empty() to clear content in . And I have to reload data from eloquent dataset with . How to correct the code below

success:function(response){
        
                $('#todos-list').empty();
                alert($todotableDataSet);
            if(response.todotableDataSet.length>0){
            var todotableDataSet ='';
            for(var i=0;i<response.todotableDataSet.length;i++){
                todotableDataSet=todotableDataSet+'<td>'+response.todotableDataSet[i]+'</td>';
            }
         }
       }

3.Is this code necessary (In CrudController) $todotableDataSet = Todo::with('index')->get(); The code I refer to from here Laravel eloquent join in ajax

here is CrudController.php

class CrudController extends Controller {
public function index(Request $request)
{
    $todotableDataSet = Todo::all();
    return view('home')->with('tableDataSetURL',$todotableDataSet);
   $todotableDataSet = Todo::with('index')->get();
    if($request->ajax()){
    return response()->json($todotableDataSet);
  }}}

Here is Model - Todo.php

class Todo extends Model
protected $fillable = ['title', 'description'];

Here is web.php

Route::get('/', [CrudController::class, 'index']);
Route::get('/tableDataSetURL', [CrudController::class, 'index']);
Route::resource('tableDataSetURL', CrudController::class);

Here is todo.js

jQuery(document).ready(function($){

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
    }
});

setInterval(function(){
    
    $.ajax({
       url:'/tableDataSetURL',
       type:'GET',
       dataType:'json',
       success:function(response){
        
                $('#todos-list').empty();
            if(response.todotableDataSet.length>0){
            var todotableDataSet ='';
            for(var i=0;i<response.todotableDataSet.length;i++){
                todotableDataSet=todotableDataSet+'<td>'+response.todotableDataSet[i]['body']+'</td>';
            }
         }
       },error: function (data) {
          console.log(data);
      }
    })
 }, 10000);});

Here is home.blade.php

<div>
    <table class="table table-inverse">
        <thead>
            <tr>
                <th>ID</th>
                <th>Title</th>
                <th>Description</th>
            </tr>
        </thead>
        <tbody id="todos-list" name="todos-list">
            @foreach ($tableDataSetURL as $dataSetinBlade)
            <tr id="todo{{$dataSetinBlade->id}}">
                <td>{{$dataSetinBlade->id}}</td>
                <td>{{$dataSetinBlade->title}}</td>
                <td>{{$dataSetinBlade->description}}</td>
            </tr>
            @endforeach
        </tbody>
    </table>
    
</div>

Answer 1

There is a major hole in the controller logic.

return exits the function which means that when you call return view, as you are calling it now it will never reach the epxression which checks if the request is ajax.

The statement with the ajax should be before the return view statement.

I recommend to test with the Network tab of your browser to check whether you are making requests to the tableDataSetURL url and what response does it return.

But I would not recommend doing live udppates this way in the first place.

For live update I suggest checking Laravel's Broadcasting section in the documentation. I have implemented live updates with pusher and Echo before. It updates the DOM only when a given event occures, which removes the need for making unnecessary requests to the server when they are not needed, just because you don't know if there is any new data or not.