How to update a separated element with axios?

My code right now works perfectly fine!
It updates the user status(disable, enable account) without refreshing the page.
Right now if I click to the red button Desactiver it will become green Activer and the same thing in reverse..

What I wanna do is: When I Click to the button the status also get updated (which is in a different <td> )

In my axios code, I tried to get the status element using

const statusText= this.querySelector('span.status11');

and update it using;

The problem is that using this.querySelector return null because it is in a different <td>
and this points to a.js-status because on my code i did


Here is the image
enter image description here

Here is my current code that updates ONLY the button (while i wanna update the button + the status <td>

Controller function:

 * @Route("/{id}/status", name="user_status", methods={"GET","POST"})
 * @param Request $request
 * @param User $user
 * @return Response
public function updateStatus(User $user): Response
    } else {
        return $this->json([
            'message'=>'the Status of is updated',

html code :

{% if user.status == 0 %}
      Compte est <span class="status11" >Desactiver</span> 
{% else %}
      Compte est <span class="status11" >Activer</span> 
{% endif %}

{% if user.status == 1 %}
       <a href="{{ path('user_status', {'id':}) }}" class="js-status"> <button class="btn btn-danger btn-sm">Desactiver</button></a>
{% else %}
       <a href="{{ path('user_status', {'id':}) }}" class="js-status"> <button class="btn btn-success btn-sm">Activer</button></a>
{% endif %}

My axios/javascript code :

{% block javascripts %}
    <script src=""> </script>

        function onClickBtnLike(event){

            const url = this.href;
            const btn= this.querySelector('button');

               if(btn.classList.contains('btn-danger')) {

{% endblock %}

Source: Symfony Questions

Was this helpful?

0 / 0

Leave a Reply 0

Your email address will not be published. Required fields are marked *