CODEWITHSUNDEEP
javascriptphpjqueryajax
User57
User57

Reputation: 2505

How to reload/ refresh 'id' after specific time using Ajax?

I want to reload/refresh the table id from where I can fetch update database.But problem is instead of refresh only table the whole page get reloaded. But I have catch the 'id' here. If any one fine what's the problem with the ajax one. Hope will help me to find it..

I'm using laravel here :

here is my view part:

<table class="table table-striped table-bordered dataTable" id="example">
<thead>
    <tr>
        <td>Serial No</td>
        <td>Title</td>
        <td>Description</td>                    
        <td>Action</td>
    </tr>
</thead>
<tbody>
    <?php $i=1; ?>
    @foreach($items as $row)
    <tr>
        <td>{{$i}}</td>
        <td class="title" data-id1="{{$row->id}}" contenteditable>{{$row->title}}</td>  
        <td class="description" data-id2="{{$row->id}}" contenteditable>{{$row->description}}</td>  
        <td>    
            <button type="button" onclick="deleteItem({{ $row->id }})" class="btn btn-danger">Delete</button>
        </td>
    </tr>
    <?php $i++; ?>
    @endforeach
</tbody>
</table>

here is javaScript with Ajax part:

<script>
function autoRefresh_div()
{
    $("#example").load(ajax());// a function which will load data from other file after x seconds
}
function ajax(){
    $.ajax({  
        url:"{{url('listA')}}",  
        method:"get",                                                       
        success: function(result) {
           location.reload();
        } 
    }); 
}
setInterval('autoRefresh_div()', 2000); // refresh div after 5 secs
</script>

And here is the route part:

Route::get('listA',function(Request $request){
    $items=\App\Item::all();
    return Response::json($items);  
});

Upvotes: 0

Views: 1785

Answers (2)

Pugazh
Pugazh

Reputation: 9561

Entire page is getting refreshed because of location.reload();. Try below code.

function autoRefresh_div() {
  $.ajax({
    url: "{{url('listA')}}",
    method: "get",
    success: function(result) {
      $("#example").html(result);
    }
  });
}

setInterval(autoRefresh_div(), 5000); // refresh div after 5 secs

Upvotes: 0

Noman
Noman

Reputation: 1487

Here you go, It depends on you if you want this after success or before.

setInterval(function()
{
  $('#YOUR DIV').load(document.URL +  ' #YOUR DIV');
}, 30000);

Upvotes: 2

Related Questions