refresh data in view after ajax request symfony

Question

I'am new in Ajax and I intregated one ajax request. The purpose is one user can like, unlike an article. Look my code :

controller

public function likeAction(Request $request, Article $article, $slug)
{
    if (!$this->get('security.authorization_checker')->isGranted('IS_AUTHENTICATED_REMEMBERED')) {
        throw $this->createAccessDeniedException();
    }

    if ($request->isXmlHttpRequest()) {
        $tokenStorage = $this->get('security.token_storage');
        $currentUser = $tokenStorage->getToken()->getUser();
        $likes = $article->getLikes();
        foreach ($likes->getUsers() as $user) {
            if ($user == $currentUser) {
                throw new \Exception('Vous aimez déjà cet article !');
            }
        }
        $likes->addUser($currentUser);
        $likes->setCount($likes->getCount() + 1);
        $em = $this->getDoctrine()->getManager();
        $em->persist($article);
        $em->flush();

        $count = $article->getLikes()->getCount();
        return new JsonResponse(array('data' => $count));
    }
    return $this->redirectToRoute('pm_platform_view', array('slug' => $slug));
}

route

pm_platform_like:
    path:      /like/{slug}
    defaults:
        _controller: PMPlatformBundle:Article:like

view

<a class="btn btn-blue-grey" id="like" role="button"></a>
<span class="counter" id="counter">{{ article.likes.count }}</span>

    <script>
        $( document ).ready(function() {
            $(document).on('click', '#like', function (e) {
                $this = $(this);
                $.ajax({
                    type: 'GET',
                    url: '{{ path('pm_platform_like', {slug: article.slug}) }}',
                    dataType: 'JSON',
                    data: {},
                    success: function() {
                      //refresh article.count here 
                    }
                });
            });
        });
    </script>

Currently the ajax request works and the "like" is persisted in database. But in my view nothing change, I have to "refresh" data, more precisly the like count attribute of article entity after the success of the ajax request. I need help for that.

You can recall function to get like count in ajax success condition. — Anand Systematix
– Anand Systematix, Commented Nov 22, 2016 at 10:48

Anand Systematix · Accepted Answer · 2016-11-22 10:58:37Z

2

Assuming you have another ajax request that gets like count.

success: function(response) {
        //Recall function here that gets like count.
        fnGetLikeCount();
    }

Edited:

Can you post that function/ajax request that gets like count?

Edit 2:

Yes you can send response from controller and can assign/set that count in like lable/div or what ever you are using.

edited Nov 22, 2016 at 10:58

answered Nov 22, 2016 at 10:51

Anand Systematix

6325 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

doums Over a year ago

I don't have this ajax request. It think was possible to return the like count in the Json reponse (in the controller) ?

Anand Systematix Over a year ago

Please see edited answer, you can send response from controller.

Gopal Joshi · Accepted Answer · 2016-11-22 11:20:27Z

Your AJAX request is already send total counts in response. So, all you need to update "counter" div with total like count.

objResponse holds response of ajax request and total like count would be stored inobjResponse.data .

success: function(objResponse) {  // "objResponse" is response os ajax request
    $("#counter").html(objResponse.data);
    ^^
}

Full Code

<a class="btn btn-blue-grey" id="like" role="button"></a>
<span class="counter" id="counter">{{ article.likes.count }}</span>

<script>
    $( document ).ready(function() {
        $(document).on('click', '#like', function (e) {
            $this = $(this);
            $.ajax({
                type: 'GET',
                url: '{{ path('pm_platform_like', {slug: article.slug}) }}',
                dataType: 'JSON',
                data: {},
                success: function(objResponse) {  // "objResponse" is response os ajax request
                  //refresh article.countcounter here 
                  $("#counter").html(objResponse.data);
                  ^^
                }
            });
        });
    });
</script>

Collectives™ on Stack Overflow

refresh data in view after ajax request symfony

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related