How am I updating an div every 10 seconds with Ajax when the div is on same page

Question

I'm using Laravels framework to develop an social network. I just wanna know how to update my div every 10 seconds etc (the status div)

On my home.blade.php page am I using an extend function to my default template which looks like this:

<body>
@include('templates.partials.navigation')
<div class="container">
    @include('templates.partials.alerts')
    @yield('content')
</div>

As you see I'm including content and in my timeline.blade.php it looks like this:

    @extends('templates.default')

@section('content')
    <div class="row">
        <div class="col-lg-7">
            @if (!$statuses->count())
                <p>There's nothing in your timeline.</p>
            @else
                @foreach ($statuses as $status)
                <div class="ui stacked segment status-modal" style="width:665px">
                    <div class="media">
                        <a class="pull-left" href="{{ route('profile.index', ['username = $status->user->username']) }}">
                            <img class="media-object" alt="{{ $status->user->getNameOrUsername() }}" src="{{ $status->user->getAvatarUrl() }}">
                        </a>
                        <div class="media-body">
                            <h4 class="media-heading"><a href="{{ route('profile.index', ['username = $status->user->username']) }}">{{ $status->user->getNameOrUsername() }}</a></h4>
                            <p>{!! $status->body !!}</p>
                            <ul class="list-inline">
                                <span style="margin-left:5px" data-livestamp="{{ $status->created_at }}"></span>
                                @if($status->user->id !== Auth::user()->id)
                                    <li><a href="{{ route('status.like', ['statusId' => $status->id]) }}">Like</a></li>
                                @endif
                                <li>{{ $status->likes->count() }} likes</li>
                            </ul>
                            @foreach ($status->replies as $reply)
                                <div class="media">
                                    <a class="pull-left" href="#">
                                        <img class="media-object" alt="{{ $reply->user->getNameOrUsername() }}" src="{{ $reply->user->getAvatarUrl() }}">
                                    </a>
                                    <div class="media-body">
                                        <h5 class="media-heading"><a href="#">{{ $reply->user->getNameOrUsername() }}</a></h5>
                                        <p>{{ $reply->body }}</p>
                                        <ul class="list-inline">
                                            <li>{{ $reply->created_at->diffForHumans() }}</li>
                                            @if(Auth::user()->hasLikedStatus($reply))
                                                    <li><a href="{{ route('status.unlike', ['statusId' => $reply->id]) }}">Unlike</a></li>
                                            @elseif($reply->user->id !== Auth::user()->id)
                                                <li><a href="{{ route('status.like', ['statusId' => $reply->id]) }}">Like</a></li>
                                            @endif
                                            <li>{{ $reply->likes->count() }} likes</li>
                                        </ul>
                                    </div>
                                </div>
                            @endforeach

                            <form role="form" action="{{ route('status.reply', ['statusId' => $status->id]) }}" method="post">
                                <div class="ui form form-group{{ $errors->has("reply-{$status->id}") ? ' has-error': '' }} ">
                                    <textarea name="reply-{{ $status->id }}" class="form-control" rows="2" placeholder="Reply to this status" style="resize:none"></textarea>
                                    @if($errors->has("reply-{$status->id}"))
                                        <span class="help-block">{{ $errors->first("reply-{$status->id}") }}</span>
                                    @endif
                                </div>
                                <input type="submit" value="Reply" class="button-reply btn btn-default btn-sm ui green basic button">
                                <input type="hidden" name="_token" value="{{ Session::token() }}">
                            </form>
                        </div>
                    </div>
                </div>
                @endforeach
                {!! $statuses->render() !!}
            @endif
        </div>
</div>
@stop

So how am I refreshing the div without making an actually reload of the whole page, like the load() ajax method?

Possible duplicate of [AJAX jQuery refresh div every 5 seconds](http://stackoverflow.com/questions/25446628/ajax-jquery-refresh-div-every-5-seconds) — rnevius, Oct 11 '15 at 21:02
To execute a function every a specified time you need to use setInterval(...) look here : http://www.w3schools.com/jsref/met_win_setinterval.asp but as said before by @rnevius I think the question is duplicated — EL OUFIR Hatim, Oct 11 '15 at 21:21

score 0 · Answer 1 · answered Oct 11 '15 at 21:32

You won't be able to do this in laravel alone. You will have to use javascript with setInterval as mentioned above. http://www.w3schools.com/jsref/met_win_setinterval.asp

With jQuery it will look something like this

setInterval(function(){
$.ajax({
    url:'some url here to get the contents of your div'
}).done(function(response){
    $(".container").html(response);
});}, 10000);

I haven't tested this so don't quote me on this.

How am I updating an div every 10 seconds with Ajax when the div is on same page

1 Answers1