Edelco's avatar

Refresh a DIV in Laravel every 5 seconds

Hello,

I started learning Laravel a little while ago and almost finished my Laravel 5.4 project. There is just one thing I can't get working and that is refreshing only a particular DIV section in a overview blade page. I looked and tried with javascript examples but it doesn't work. So hopefully someone can help me out.

I have a page which shows a list of available live streams. I want to change that status from offair to live if the status in my mySQL databse is changed (manually at first) I need to refresh that page every 5 seconds so viewers can see if a stream status is live or offair.

From examples I tried the following javascript (placed in the header section):

<script>

    (function () {
        setInterval(function () {
            axios.get('layouts.partials.refreshstreamoverview',)
                .then(function(response){
                        document.querySelector('#partial')
                                .innerHtml(response.data);
                }); // do nothing for error - leaving old content.
            }); 
        }, 5000); // milliseconds

</script>

My Route is:

Route::group(['prefix' => 'streams'], function () {

        Route::get('', 'StreamsController@index');

    });

@index gives me all the streams available (whether offair or live)

My StreamsController looks like this:

<?php

namespace App\Http\Controllers;

use App\District;
use App\Gemeente;
use App\User;
use App\Stream;
use Illuminate\Http\Request;

class StreamsController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $streams = Stream::orderBy('district_id')
        ->orderBy('gemeente_id')
        ->get();

        return view('streams.index', compact('streams'));
    }

}

Nothing gets refreshed after 5 seconds unfortunatly. Does someone have any idea how I can solve this? Much appreciated !

0 likes
9 replies
Edelco's avatar

Extra info:

And here is the partial view that needs to be refreshed:

<div class="row images" id="partial">

<ul>
@foreach($streams as $stream)
    <li style="margin:5px;">
        <div class="img-label"><center>{{ $stream->gemeente->name }}
</center></div>
        <img src="{{ $stream->image }}" width="150" height="112">
        <div style="padding:5px;">
        @if($stream->live == true)
            <a href="/streams/{{ $stream->id }}" class="btn btn-sm btn-
block btn-success"><center>LIVE</center></a>
        @else
         
        @endif
    </li>
@endforeach
</ul>

    </div>
rizwanjaved's avatar

try hitting a route via ajax from which you are taking data

Edelco's avatar

@rizwanjaved : Can you explain what exactly it is you mean by that? I am a totaly noob at AJAX.

Snapey's avatar

you need to be calling a route from axios, not trying to load a view partial.

this axios.get('layouts.partials.refreshstreamoverview',)

needs to be a route that returns the rendered html

creating this route is no different from creating any other route

Edelco's avatar

@Snapey : So this can be the same Route as my index like

Route::get('streams', 'StreamsController@index');

or do I have to create a new method and route?

BTW: The script fails due to this error:

Uncaught SyntaxError: Unexpected token }

This is my adjusted script placed in de app layout file header section:

    <script>

    (function () {
        setInterval(function () {
            axios.get('streams',)
                .then(function(response){
                        document.querySelector('#partial')
                                .innerHtml(response.data);
                }); // do nothing for error - leaving old content.
            }); 
        }, 5000); // milliseconds
    })();

    </script>

Further. This is my index.blade.php file:

@extends('layouts.app')

@section('content')
<div class="container">

<div class="row" style="margin-left: 45px;">
    <h3 style="margin:0;font-weight:400;">Connected Streams</h3>
</div>

    <div class="row images" id="partial">

<ul>
@foreach($streams as $stream)
    <li style="margin:5px;">
        <div class="img-label"><center>{{ $stream->gemeente->name }}</center></div>
        <img src="{{ $stream->image }}" width="150" height="112">
        <div style="padding:5px;">
        @if($stream->live == true)
            <a href="/streams/{{ $stream->id }}" class="btn btn-sm btn-block btn-success"><center>LIVE</center></a>
        @else
            &nbsp;
        @endif
    </li>
@endforeach
</ul>

</div>

@include('layouts.partials.flowplayerscript')

</div>
    @endsection
isaackearl's avatar

This would be a good opportunity for you to use broadcasting instead of refreshing a div over and over... which probably would cause allot of strain on your server.

https://laravel.com/docs/5.4/broadcasting

Read a little bit about this here. It was made specifically for this use case. There are some good video tutorials here on laracasts if I'm not mistaken too.

m7vm7v's avatar

I would recommend you to use VueJS and Laravel Echo and the broadcasting that isaackearl proposed. It is very simple when you bind the needed information with VueJS and make a live listener with Laravel Echo.... No need of ajax call then. I would recommend you to watch https://laracasts.com/lessons/introducing-laravel-echo

Edelco's avatar

@m7vm7v Also thanks to your contribution. Will definitely have a look at it !!

Please or to participate in this conversation.