Jump to content
dumb2champ

Auto update view when theres new data in database

Recommended Posts

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...

qcoyFUV.png?1

 

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...

 

Capture.png

 

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

Share this post


Link to post
Share on other sites

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

Edited by requinix

Share this post


Link to post
Share on other sites

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...

Share this post


Link to post
Share on other sites

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 by requinix

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.