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

statusText.textContent=response.data.current;

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

 document.querySelectorAll('a.js-status').forEach(function(link)

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
{
    if($user->getStatus()==true){
        $user->setStatus(false);
        $current="Desactiver";
    } else {
        $user->setStatus(true);
        $current="Activer";
    } 
    $this->getDoctrine()->getManager()->flush();
        return $this->json([
            'code'=>200,
            'message'=>'the Status of is updated',
            'current'=>$current
        ],200);
    }

html code :

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

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

My axios/javascript code :

{% block javascripts %}
    <script src="https://unpkg.com/axios/dist/axios.min.js"> </script>
    <script>

        function onClickBtnLike(event){
            event.preventDefault();

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

            axios.get(url).then(function(response){
                
               if(btn.classList.contains('btn-danger')) {
                    btn.classList.replace('btn-danger','btn-success');
                    btn.textContent="Activer";
               }else{
                    btn.classList.replace('btn-success','btn-danger'); 
                    btn.textContent="Desactiver";
                }
            });
        }

        document.querySelectorAll('a.js-status').forEach(function(link){
            link.addEventListener('click',onClickBtnLike);
        })
    </script>
{% endblock %}

Source: Symfony Questions

Was this helpful?

0 / 0

Leave a Reply 0

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