Favorite facebook style button

Question

How to create a favorite Facebook like button that after clicking is marked and sends the request to the database in background, something like this:

The First button is the normal state and the second is after being clicked and inserted into the database that the post was liked, all this in background without refresh, I’m doing this in a small MVC application, so as the background communication would be?

<a href="post/like/" class="btn_nornal">Favoritar</a>

Answer 1

You can use AJAX request to do this.

I suggest you create 3 classes for the button.

• A class for the normal state (let’s say, default)
• A loading class while the operation is still running in the background (let’s say, waiting)
• A class of completed (let’s say, completed)

The script would be something like:

$("#favorite").on("click", function(){
   $("#favorite").addClass("esperando");
   $.post($("#favorite").attr("href"), {
      //aqui algum dado para ser enviado para o servidor
      id: "3213",
      user: "user1",
      data: new Date()
}).done(function(data){
   //Se retorno for ok, setar a classe do botao para concluido
   $("#favorite").addClass("concluido").
   $("#favorite").removeClass("default");
   $("#favorite").removeClass("esperando");
}).fail(function(data){
   //Se algo deu errado, setar botao para default novamente
   $("#favorite").removeClass("esperando");
   $("#favorite").removeClass("concluido");
   $("#favorite").addClass("default");
});
}

To improve management, it is interesting to save the value of $("#favorite") in some variable, so you don’t need to use the Jquery selector at all times.

Answer 2

There’s "n" ways to do this, but a simple way to get this by using jQuery is like this:

<a href="javascript:void(0);" class="btn_nornal">Favoritar</a>

In the example below it makes a request "autoload" ajax, when loading the page that checks the status:

  $(function(){
      var user_id = '123'; 
      //checa o status ao carregar a página...
       actionFavorite('checar', user_id);
      //favorita
       $('.btn_normal').on('click', function(){
          actionFavorite('favoritar', user_id);
       });
    });

    function actionFavorite(action, user_id) {
    $.post('check-or-add-status-favorite.php',{action:action, id:user_id},function(e){
           var statusClass = jQuery.parseJSON(e);
              if (statusClass.status == 'active') {
                 $('.btn_normal').addClass(statusClass.status);
                 $('.btn_normal').text(statusClass.txt)
              } else {
                 $('.btn_normal').removeClass('active');
                 $('.btn_normal').text(statusClass.txt)
              }
       });
    } 

and in PHP:

<?php
$action = $_POST['action'];
$user_id = $_POST['id'];
$status = 'active';
$txt = 'Favoritos';

if ($action == 'checar') {
   $consulta = $pdo->query("SELECT status_favorito
                            from usuarios
                            WHERE id_usuario=:id_usuario;");
   $consulta->bindParam(':id_usuario',(int) $user_id, PDO::PARAM_INT);
   $consulta->execute();
   $row = $consulta->fetch(PDO::FETCH_ASSOC);
    //se já for gravado, será: 'active', caso constrário, ele emprimirá ''; 
   if ($row['status_favorito'] == 'active') {
       $txt = 'Favoritos';
   } else {
     //reseta se não estiver ativo
     $status = '';
     $txt = 'Favoritar';
   }
   echo json_encode(array(
                     'status' =>  $status,
                     'txt' =>  $txt
                         ));
} else {
 //faz update se ação: 'favoritar'
 $consulta = $pdo->query("UPDATE usuarios SET
                           status_favorito=:status
                          WHERE id_usuario=:id_usuario;");
 $consulta->bindParam(':status',$status, PDO::PARAM_STR);
 $consulta->bindParam(':id_usuario',(int) $user_id, PDO::PARAM_INT);
 $consulta->execute();
 echo json_encode(array('status' => $status, 'txt'=> $txt ));
}

Answer 3

Following Andrew’s line of reasoning, I’ve added some of the best practices.

I created this practical example, http://jsfiddle.net/2c6ok23e/4/ and hope to have helped.

Hug