0

Tenho um botão que adiciona o valor +1 na base de dados e que mostra o total de "likes" que o artigo já tem.

 <a class='btn' href=portal/fav.php?id=".$produto['id']."> <span class='badge  bg-red'>".$produto['fav'] . "</span> <i class='fa fa-heart-o'></i> Likes  </a>

Só que desta forma a pagina vai atualizar. Como faço, para quando clicar no botão, ele atualizar, sem atualizar a pagina?

A pagina em php que faz o update é

fav.php
2
  • 2
    Você terá que usar um jQuery que faça isso... Que acesse esse fav.php, faça o update e retorne com o numero atualizado. Usando json é bem facinho de fazer... Vou ver se acho um exemplo pra você! 3/09/2015 às 16:29
  • Nenhuma resposta solucionou o problema? 15/09/2015 às 12:10

2 Respostas 2

1

Você precisa efetuar uma requisição assíncrona, conhecido por AJAX. Utilizando o jQuery, seria algo como:

jQuery(document).ready(function($) {

    $('#fav-add').on('click', function(event) {
        event.preventDefault();

        produtoId = $(this).data('id');

        $.ajax({
            url: 'portal/fav.php',
            type: 'post',
            data: {id : produtoId},
            success: function(data) {
                alert('Sucesso!')
            },
            error: function() {
                alert('Erro!');
            }
        });

    });
});


<a class='btn' id="fav-add" data-id="<?php echo $produto['id'] ?>"> <span class='badge  bg-red'>".$produto['fav'] . "</span> <i class='fa fa-heart-o'></i> Likes  </a>

E com o PHP você obtém o ID e faz o tratamento para a atualização do campo:

<?php

if(isset($_POST)){

    $id = $_POST['id'];

    $query = "UPDATE mytable 
      SET increment = increment + 1 
      WHERE id = $id";

  $this->execute($query);

}
1

Da forma como no exemplo abaixo você ira chamar essa função no botão, e na sua pagina fav.php você monta o update, como não terá nada de retorno ou seja um alert ou algo assim pode deixar o success vazio mesmo, agora caso queira fazer algo após o update é só adicionar no success e na variável data você tem o retorno da fav.php

function atualizaLike(){
    $.ajax({
        url: "fav.php",
        method: "POST",
        data: {},
        async: false,
        success: function (data) {

        },
        error: function () {
            alert("Ocorreu uma falha ao verificar e tente novamente!");
        }
    });
}
3
  • isso correto apenas chamar a função no onclick. 3/09/2015 às 17:11
  • Tendo no meu fav.php alguns echos de sucesso e erro so para controlo, como faço para ele ignorar essas mensagens? 3/09/2015 às 17:26
  • o seu echo estará na variável data do success ai vamos supor que usar um alert ficaria, success: function (data) { alert(data); } 3/09/2015 às 17:33

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .