How to auto refresh a div every x seconds with laravel

Question

This maybe a broad question but here is the thing. I am using laravel and i have a database notification which displays the amount of unread badges (bootstrap badges) and a list of read and unread notifications. I want to be able to refresh only that div every 5 seconds or so.

Here is the code for database notification on my blade so far (admin-master.blade.php):

<li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown">
    <i class="lnr lnr-bullhorn"></i>
    <span class="badge badge-light">{{\Illuminate\Support\Facades\Auth::guard('admin')->user()->unreadNotifications()->count()}}</span>
    <i class="icon-submenu lnr lnr-chevron-down"></i>
  </a>
  <ul class="dropdown-menu">
                            @foreach(\Illuminate\Support\Facades\Auth::guard('admin')->user()->unreadNotifications as $notifications)

    <li>
      <a class="unreadNotifications" href="{{route('receptionist.markasread', $notifications->id)}}">{{$notifications->data['data']}}</a>
    </li>
                            @endforeach
                                @foreach(\Illuminate\Support\Facades\Auth::guard('admin')->user()->readNotifications()->take(4)->get() as $notifications)

    <li>
      <a class="readNotifications" href="/admin/roomstatus">{{$notifications->data['data']}}</a>
    </li>
                                @endforeach

  </ul>
</li>

So my question is, how can i use JS with this laravel to refresh the whole div. I want to be able to refresh both the badges and the actual notifications. I have seen some posts on stack overflow suggesting to use AJAX to "load" an html. I am not sure how i could achieve that with laravel.

Thanks

By ajax we mean *creating an API endpoint* that allows you to fetch data dynamically instead of pre-rendering the entire page. What you are doing now is generating the page on your server with PHP (static), but instead the page itself should be responsible for fetching the data and populating the page (dynamic). How to create endpoints is out of scope since it is way too board. — Derek 朕會功夫, Feb 28 '18 at 14:38
@Derek朕會功夫 Here is the link i found. But my question is, do i have to load a web page? and how can i load a web page with laravel. Is there an alternative. I do know that ajax is called to manipulate partial of a web page :) Here is the link: https://stackoverflow.com/questions/25446628/ajax-jquery-refresh-div-every-5-seconds — PICKAB00, Feb 28 '18 at 14:43
@Derek朕會功夫 Could you please explain what you mean by "but instead the page itself should be responsible for fetching the data and populating the page (dynamic)" — PICKAB00, Feb 28 '18 at 14:45
You should first understand what ajax is. You don't "call an ajax"; it's just a terminology. With ajax you don't load a webpage, instead you fetch pure data, usually in common formats such as JSON or XML. — Derek 朕會功夫, Feb 28 '18 at 14:46
I have never had sufficient experience with ajax. If you could point me to the right direction of where to start of the above question, that'd be great :) — PICKAB00, Feb 28 '18 at 14:50
[MDN is a great site for learning web technologies](https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX). — Derek 朕會功夫, Feb 28 '18 at 14:51

score 2 · Answer 1 · answered Feb 28 '18 at 15:59

Ok so here is how i resolved the issue.

I used jquery ajax to fetch a route. The route goes to a controller function which passes a view. The original Questions code is in the view.

Here is my AJAX:

function loadlink(){
        $('#reload').load('/loadNotification');
        console.log('TESTING!!!!');
    }

    loadlink();
    setInterval(function(){
        loadlink()
    }, 10000);

So i refresh only that element id every 10 seconds. Of course you could listen for any database changes as well if you don't want to use a timer. a timer in my case suited my needs.

How to auto refresh a div every x seconds with laravel

1 Answers1