button to enjoy / break with AJAX

Navigation
1

On a certain page I have a button / link written "Favor" 

<a href="SITE.COM/post/favoritar/ID" class="btn-favorite-normal">Favoritar</a>

Where ID is the publication id, but I already have a script in PHP that will insert and remove the database.

When the post is favored or is already marked as favorite, the script returns a {"favorite:1"} JSON and when it is not marked as favorite or the bookmark is removed, the script returns {"favorite:0"} .

from these values I would like to change the state of the button with AJAX, for example: when clicking the favorite button, and everything happens correctly, the script will return {"favorite:1"} and the name of the "Favor" button will become "Favored" ", the link ( href ), and the style class will also change to eg 

<a href="SITE.COM/post/favoritar/ID/remover" class="btn-favorite-ativo">Favoritado</a>

was added in the URL, after the ID, the name "remove"; the button name changed to "favored"; and the btn-favorite-normal class changed to btn-favorite-active;

"remove" in the URL that will remove the favorites, which when clicked will return {"favorite:0"} and the button would return to its normal state, written "favorite" and with the default link favor.

    
asked by anonymous 15.07.2016 / 17:09

1 answer

3

Initially you need an identifier of this button as you will probably have several buttons like this we will use a class .. And we will put an ID to represent the real ID of the object. Leave the link this way:

<a href="SITE.COM/post/favoritar/10" id="10" class="btn-favorite-normal favoriteLink">Favoritar</a>

Now let's create the events in JQuery, initially we'll wait to load the document. And then we'll create the routines. 

<script>
//Espero o DOM ser carregado!
$(function() {
   //Detecto o clique no botão favoriteLink
   $('body').on('click', '.favoriteLink', function () {

       var objClicado = $(this); //Guardo o objeto em uma variavel porque ele não vai ficar disponível dentro do success do ajax.

       // recuperando qual é a url que tá dentro do link
       var url = objClicado.attr('href');
       var id = objClicado.attr('id');
       //Efetuando a chamada AJAX
       $.ajax({
           url : url,
           dataType: 'JSON',
           type: 'GET',
           beforeSend: function () {
              //Aqui vc pode colocar para mostrar alguma coisa enquanto carrega..
              objClicado.addClass("btn-favorite-loading");
           },
           success : function (retorno) {
               objClicado.removeClass("btn-favorite-loading");
               if(retorno.favorite == 1) {
                   objClicado.attr('href', 'SITE.COM/post/favoritar/'+id +'/remover');
                   objClicado.html('Remover');
               } else {
                  objClicado.attr('href', 'SITE.COM/post/favoritar/'+id);
                  objClicado.html('Favoritar');
               }
           },
           error : function (a,b,c) {
                objClicado.removeClass("btn-favorite-loading");
               alert('Erro: '+a['status']+' '+c);
           }
       });

       return false;

   });
});
</script>
    
15.07.2016 / 19:54
Insert a point in the penultimate item of the variable receive form with var_dump