Refresh a DIV in Laravel every 5 seconds

Question

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.
            }); 
        }, 3000); // 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 !

Answer 1

I think you are missing one route. You need the route to render the partial, like:

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

Then you need to create the partial method in the controller, and your JavaScript should fetch the URL defined in the routes file (streams/partial).

What you tried to use as route (layouts.partials.refreshstreamoverview) is actually the template. You need to pass it to the view method, in your partial action in the controller, similar to what you did in view('streams.index', ...).