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.

Reply to

Use Markdown with GitHub-flavored code blocks.