Auto update view when theres new data in database

[dumb2champ]

Hello...

Im just started to codes in Laravel 5...

I need help to auto update my view when theres new data in database...

 

Below are screenshot of my view...

 

this is my supplycontroller

class SupplyController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return Response
     */
    public function index()
    {
        $supplies=Supply::all();
        return view('supplies.index',compact('supplies'));
    }

Below are my index.blade.php

@extends('layout/template')

@section('content')
 <h1>Supplies</h1>
 <a href="{{url('/supplies/create')}}" class="btn btn-success">Create Supply</a>
 <hr>
 <div class="ref">
 <table class="table table-striped table-bordered table-hover">
     <thead>
     <tr class="bg-info">
         <th>Id</th>
         <th>Items</th>
         <th>Desc</th>
         <th colspan="3">Actions</th>
     </tr>
     </thead>
     <tbody>
     @foreach ($supplies as $supply)

         <tr>
             <td>{{ $supply->id }}</td>
             <td>{{ $supply->supply_item }}</td>
             <td>{{ $supply->supply_desc }}</td>    

             <td><a href="{{url('supplies',$supply->id)}}" class="btn btn-primary">Read</a></td>
             <td><a href="{{route('supplies.edit',$supply->id)}}" class="btn btn-warning">Update</a></td>
             <td>
             {!! Form::open(['method' => 'DELETE', 'route'=>['supplies.destroy', $supply->id]]) !!}
             {!! Form::submit('Delete', ['class' => 'btn btn-danger']) !!}
             {!! Form::close() !!}
             </td>
         </tr>
     @endforeach

     </tbody>

 </table>
 </div>
@endsection

My database...

 

 

Im really appriciate for anyone to help with examples...

It it using javascripts?ajax?

How to achieve the auto update view which return only updated/new data  in database...

 

Thanks

[requinix]

Would it be sufficient to simply refresh the page every few seconds? Automatically, that is.

Edited August 17, 2015 by requinix

[dumb2champ]

Thanks Anemic for ur respond...

Yeah auto refresh the page can do the work but how to return only new data without getting all data in database?

it is using ajax?

How to achieve that?can you provide example...with my codes...

 

Thanks...

[requinix]

Automatic refresh means refresh the page. Load it from scratch. F5. Doesn't know anything about new data because it loads everything all over again.

 

So... is that still sufficient? Add a

to your HTML output, replacing number with how many seconds you want it to wait before refreshing. Edited August 17, 2015 by requinix

[dumb2champ]

Ok..thanks for ur reply and solution but i know how to achieve ur solution...

sorry...what i want is to refresh the view if theres new created data either from client(view)/server(database) side

 

i know ajax can do the job by using setintervel if i not mistaken....

but i dont know how to make it to work with my scripts....

 

another solution is again using ajax by returning newest created item in database(timestamp)..

u can see that my database keep track of any created/updated data....

 

thanks for ur time....i hope u can help me with the simplest solution by applying ajax to my scripts...

thank you

[CroNiX]

Sure you can use AJAX to retrieve any "new" records and return the data back to your script where you would insert it at the bottom of your table. It's a lot more complex than just using the page refresh method though.

 

You're going to have to do some homework to get this running, and we can help you along the way once you start posting code that you're having problems with. I'll give you the basic steps you'd need.

 

1) Include the jQuery js framework in your pages.

2) You will need to store the timestamp for each item in your html code so you can use js to get the largest timestamp which will be used to send back to laravel. I would suggest adding a data attribute to each of your <tr> tags that would be the timestamp. Ex: <tr data-timestamp="1234567890"> where 1234567890 is the timestamp from your db.

3) Create a js function that will be called using setInterval()

-grabs all data-timestamp data attributes from the <tr>'s, and compares them getting the highest value

-use ajax to send the newest timestamp via POST to your laravel controller

--in the "success" event of the ajax call, check to see whether any json data was returned and if so use jQuery to create new table elements with the returned json data and insert them after the last <tr> in your <table>. This would just be a javascript array that you'd loop over to create the elements.

4) Create laravel controller, or add a new method to an existing controller, to receive the POSTed timestamp from the ajax call. Use the timestamp to grab all new entries from the db > timetamp, json encode the returned entries and output them so your ajax script can receive them, which will be the "success" event of the ajax call mentioned above.

 

So this will basically just send the latest timestamp every x seconds back to laravel, laravel checks to see if any new entries exist greater than the supplied timestamp and returns them and then your jQuery will insert them into the table.

[dumb2champ]

Thanks CroniX...thanks..

That what i want to achieve...

I have done step 1  now to step 2...

but seriously im new in this framework and js....

i hope you can help if there problem in my codes...

 

thanks