Updating view after AJAX post without reload

Posted 2 years ago by IlyasDeckers

Hey,

I trying to reload a div's content after an AJAX post, I really have no clue about how to do this. I know that I have to update the innerhtml with Jquery but I am stuck here.

 /* ----------------------------------------------
     Like/Dislike
 -----------------------------------------------*/

 $('.like').on('click', function(event) {
     event.preventDefault();

     postId = event.target.dataset['postid'];

     console.log(postId)
     console.log(token) 
     console.log(urlLike)

     $.ajax({
         method: 'POST',
         url: urlLike,
         data: {postId: postId, _token: token},
     })
     .done(function(msg) {
         console.log(msg); // 
     });

This is my html at the moment, with a normal reload the like count gets updated and with a simple if statement the gets an class with active if the post is liked by the user. How would I update this span class after the AJAX call?

    <div class="wis-numbers">
                <?php $likes = $post->likes->count() ?>
                 
                    <span class="like @if ( $post->isLiked ) active @endif" data-postid="{{ $post->id }} data-original-title="@if($likes == 1) Jij vind dit leuk @else Jij en {{ $likes }} anderen vinden dit leuk @endif" data-toggle="tooltip" data-placement="bottom"><i class="zmdi zmdi-thumb-up" data-postid="{{ $post->id }}"></i> {{ $likes }}</span>
            </div>

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

Laracasts Mascot

Hi, Have We Met Yet?

Did you know that, in addition to the forum, Laracasts includes well over 1000 lessons on modern web development? All for the price of one lunch out per month.

Sign Me Up

Channels

Reply to

Use Markdown with GitHub-flavored code blocks.