Sistema de likes.(retornar curtidas via 'JSON')

[rauan100 0]

Bom dia galera, preciso muito da ajuda de vocês, estou desenvolvendo um sistema de curtidas para meu site, os botões de curtir e 'descurtir' estão funcionando tudo normal, o problema que eu tenho, e retornar quantos pessoas curtiram em tempo real(sem atualizar a página), sei que tem como fazer isto com 'JSON', mas não faço ideia de como fazer isto, sou apenas um iniciante no javascript. Queria 'converter' a parte da div "curtir" de php para javascript. Alguém pode ajudar-me.

<?php
$pubs = @mysql_query("SELECT* FROM publish  ORDER BY id desc limit 0,5");
while ($pub=mysql_fetch_assoc($pubs)){
	$email = $pub['user'];
	$saberr = @mysql_query("SELECT * FROM users WHERE email= '$email'");
	$saber = mysql_fetch_assoc($saberr);
	$nome = $saber['nome']." ".$saber['sobrenome'];
	$user = $saber['nome'];
	$id = $pub['id'];
	$saberloves = mysql_query("SELECT * FROM curtidas WHERE pub='$id'");
	$loves = mysql_num_rows($saberloves);
	if($pub['image']==""){
					echo '<div class="pub" id="'.$id.'">
					
					<p><a href="profile.php?id='.$saber['id'].'">'.$nome.'</a> - '.$pub["data"].'</p>
					<span>'.$pub['content'].'</span><br />
				</div>
				<div class="curtir" id="'.$id.'">';
				$email_check = mysql_query("SELECT user FROM curtidas WHERE pub='$id' AND user='$login_cookie'");
				$do_email_check = mysql_num_rows($email_check);
				if ($do_email_check >= 1) {
					$loves = $loves - 1;
					
					echo '<p><button type="button"  name="add" id='.$id.' class="unlike">Curtido</button> | Você e mais '.$loves.' Pessoa(s) curtiram isto</p>';
				}else{
					echo '<p><button type="button"  name="add" id='.$id.' class="like">Curtir</button> | '.$loves.' Pessoa(s) curtiram isto</p>';
				}
				echo '</div>';
	
	}else{
		echo '<div class="pub" id="'.$id.'">
				
					<p><a href="profile.php?id='.$saber['id'].'">'.$nome.'</a> - '.$pub["data"].'</p>
					<span>'.$pub['content'].'</span>
					<img src="upload/'.$pub["image"].'" />
				</div>
				<div class="curtir" id="'.$id.'">';
				$email_check = mysql_query("SELECT user FROM curtidas WHERE pub='$id' AND user='$login_cookie'");
				$do_email_check = mysql_num_rows($email_check);
				if ($do_email_check >= 1) {
					$loves = $loves - 1;
					echo '<p><button type="button"  name="add" id='.$id.' class="unlike">Curtido</button> | Você e mais '.$loves.' Pessoa(s) curtiram isto</p>';
				}else{
					echo '<p><button type="button"  name="add" id='.$id.' class="like">Curtir</button> | '.$loves.' Pessoa(s) curtiram isto</p>';
				}
				echo '</div>';
				
	}
}

?>

[ygor.anjos 23]

Rauan, você pode fazer via Ajax(que retorna JSON)

de uma pesquisada sobre o assunto e veja alguns exemplos, tendo duvidas poste aqui no forum.

[rauan100 0]

Então, tentei fazer um uma pequena função com Ajax, a requisição está quase dando certo, mas surgiu 2 problemas, o meu site é dinâmico, e ele possui várias ids geradas com php, no meu script, ele está pegando apenas o primeiro id, e o outro problema é que ele insere o numero de curtidas varias vezes um do lado do outro. ficando mais ou menos assim "111111 ou 00000"

Edit:Acabei de descobrir o erro de ele está retornando somente uma id de uma publicação, agora falta resolver o segundo problema, que ele ainda continua inserindo todos os dados em uma só publicação, alguém ai que possa me ajudar a resolver este segundo problema.

var curtidas = window.setInterval(curtidas, 1000);
function curtidas(){
	var id_pub = Number(jQuery('.curtir').attr('id'));
	console.log(id_pub);
			jQuery.ajax({
				type: 'POST',
				url: 'sys/curtidas.php',
				datatype: 'JSON',
				data:{curtir: id_pub},
				success: function(data){
					$.each(data, function(i, msg){
					$('.how').append(msg.curtidas);
					})
				}
				
				});
				
			
}

<?php
header("Content-Type: application/json;charset=utf-8");
$curtidas = array();
$pubs = @mysql_query("SELECT* FROM publish");
$login_cookie = $_COOKIE['llogin'];
$id = $_POST['curtir'];
while ($pub=mysql_fetch_assoc($pubs)){
	$saberloves = mysql_query("SELECT * FROM curtidas WHERE pub='$id'");
	$loves = mysql_num_rows($saberloves);
    $curtidas[] = array(
	'curtidas' =>$loves
	);
	die(json_encode($curtidas));
}

?>

[ygor.anjos 23]

o segundo problema esta nessa função:

$.each(data, function(i, msg){
                    $('.how').append(msg.curtidas);
                    })

enquanto tiver dados ele vai ir adicionando na tag com a classe HOW

oque você pode tentar é alterar o append por html

e antes de colocar algo mandar limpar o conteúdo dela com o empty

[rauan100 0]

o segundo problema esta nessa função:

$.each(data, function(i, msg){
                    $('.how').append(msg.curtidas);
                    })

enquanto tiver dados ele vai ir adicionando na tag com a classe HOW

oque você pode tentar é alterar o append por html

e antes de colocar algo mandar limpar o conteúdo dela com o empty

Vlw Ygor, este problema foi resolvido, mas tem outro pequeno problema, o script está pegando apenas o primeiro id, e no meu site tem vários ids usando a mesma 'class', como eu poderia fazer, para o script adicionar o numero de curtidas de a cordo com a id da publicação, por exemplo; publicação 1. 0 curtidas, publicação 2. 10 curtidas.

estou usando este comando para pegar a id:

var id_pub = $('.curtir').attr('id');

[ygor.anjos 23]

eu só consigo pensar em uma forma, não pode ser o correto mas funciona kkkkkk

oque você pode fazer é dar uma id dinamicamente para o lugar onde ele deve colocar o numero de curtidas, de preferência a mesma ID da publicação, você pode concatenar tambem, exemplo

<div name="publicacao5" id="5"></div>

<div name="curtidasaqui" id="curtida5"></div>

e no jquery:

$('#curtida'+id_pub).html(msg.curtidas);

n sei se ficou claro oque quis dizer.

[rauan100 0]

Vlw Ygor, este problema foi resolvido, mas tem outro pequeno problema, o script está pegando apenas o primeiro id, e no meu site tem vários ids usando a mesma 'class', como eu poderia fazer, para o script adicionar o numero de curtidas de a cordo com a id da publicação, por exemplo; publicação 1. 0 curtidas, publicação 2. 10 curtidas.

estou usando este comando para pegar a id:

var id_pub = $('.curtir').attr('id');

Fiz um pequeno script, para poder pegar as ids, da class '.curtir'.

	var id_pub = $('.curtir');
	for (var i= 0; 1 < id_pub.length; i++){
		var id_pubb =id_pub[i].id;
		
	}

Mas mesmo assim, as curtidas não adicionadas de acordo com a id da publicação. Acredito que o erro seja neste código.

				success: function(data){
					$.each(data, function(i, msg){
						if(msg.id == id_pubb){
							$('.how').html(msg.curtidas);
						}else{
							
						}
					})
				}

eu só consigo pensar em uma forma, não pode ser o correto mas funciona kkkkkk

oque você pode fazer é dar uma id dinamicamente para o lugar onde ele deve colocar o numero de curtidas, de preferência a mesma ID da publicação, você pode concatenar tambem, exemplo

<div name="publicacao5" id="5"></div>

<div name="curtidasaqui" id="curtida5"></div>

e no jquery:

$('#curtida'+id_pub).html(msg.curtidas);

n sei se ficou claro oque quis dizer.

No meu script a div '.curtir' recebe a mesma id da publicação.

[ygor.anjos 23]

essa é a linha que você fala onde deve colocar oque retornou: $('.how').html(msg.curtidas);

ele esta adicionando onde tem a classe how

altere para ele adicionar onde esta o ID $('#idDaDivAqui').html(msg.curtidas);

[rauan100 0]

essa é a linha que você fala onde deve colocar oque retornou: $('.how').html(msg.curtidas);

ele esta adicionando onde tem a classe how

altere para ele adicionar onde esta o ID $('#idDaDivAqui').html(msg.curtidas);

Fiz um novo código implementando sua dica, e obtive sucesso, o script está funcionando, Muito obrigado.

Aqui está o código:

function curtidas(curtidas, id){
$.each( $( ".curtir" ), function() {
   var id_pub = ( this.id );

			jQuery.ajax({
				type: 'POST',
				url: 'sys/curtidas.php',
				datatype: 'JSON',
				data:{curtidas:curtidas, id:id_pub},
				success: function(data){
					$.each(data, function(i, msg){
						if(msg.id == id_pub){
							$('.how'+id_pub).html(msg.curtidas);
						}
					})
				}
				
				});
				});
					
}

Um pequeno 'problema' é que o script, está mandando vários posts de uma só vez, e não 1 post a cada 5 segundos, ele está mandando quantidade de ids encontradas a cada 5 segundos, por exemplo: Existe 5 publicações, ele está mandando 5 post a cada 5 segundos, meu medo é que isto possa causar sobrecarga no servidor, Alguma outra dica para otimizar o script? rsrs, mais outra vez Muito obrigado.

EDIT: Resolvi o problema, o código final ficou assim:

function curtidas(curtidas, id){

   

			jQuery.ajax({
				type: 'POST',
				url: 'sys/curtidas.php',
				datatype: 'JSON',
				data:{curtidas:curtidas, id:id},
				success: function(data){
					$.each( $( ".curtir" ), function() {
                      var id_pub = ( this.id );
					$.each(data, function(i, msg){
						if(msg.id == id_pub){
							$('.how'+id_pub).html(msg.curtidas);
						}
					})
					});
					
				}
				});
				
				
				
				
					
}