Edelco
668
9
Laravel

Refresh a DIV in Laravel every 5 seconds

Posted 1 year ago by Edelco

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('', '[email protected]');

    });

@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 !

Please sign in or create an account to participate in this conversation.

Reply to

Use Markdown with GitHub-flavored code blocks.