How to build like counter using jquery? - php

Question

I'm looking to make a like counter as like in facebook. I will load various posts from database with message id. i want to make like(here it is "pray") counter and it should do behind the page using jquery and ajax. I cant get specific message id(mid). here the code is
jQuery:
$(document).ready(function () {
$("div.pray").click( function()
{
var mid=$(this).val();
$.ajax(
{
type:"POST",
url:"increment.php",
data:'mid='+mid,
success:function ()
{
$("div.pray").text("Prayed");
}
});
});
PHP:
session_start();
if(isset($_SESSION['usrid']))
{
$usr = $_SESSION['usrid'];
include('dbcon.php');
$cot = "select * from posts where userid=$usr LIMIT 10";// order by eventDate DESC, eventHour DESC" LIMIT0,10";
$ex = mysql_query($cot,$con);
while($cont=mysql_fetch_array($ex))
{
$date = date_create($cont['date']);
$mid=$cont['mid'];
echo "<div id='posts'>";
echo $cont['message'];
echo $photo;
echo "<div class='pray'>";
echo "<input type='hidden' class='mid' value='$mid'>";
echo "<a href='#'>Pray</a></div>";
echo "Prayed(".$cont['prayers'].") &nbsp &nbsp";
echo date_format($date, 'd-m-Y H:i:s');
echo "<hr>";
echo "</div>";
}
}
else
{
echo "Login to see";
}
?>
i want to replace only the message which i clicked as pray and also it should load current number of prayed.

Answer 1

put your javascript AFTER your php script and check. If that fails, change your .click() handler to,
$(document).on('click', 'div.pray', function(){
var mid=$(this).children('.mid').val();
$.ajax(
{
type:"POST",
url:"increment.php",
data:'mid='+mid,
success:function ()
{
$("div.pray").text("Prayed");
}
});
//rest of your code
})
Notice, I've changed the first line from
var mid=$(this).val();
To
var mid=$(this).children('.mid').val();
As, $(this) will select the div.pray and not the input.mid element.

Answer 2

In the html code try something like this:
echo "<a href='increment.php?mid=$mid'>Pray</a></div>";
In javascript:
$(document).on('click', 'div.pray', function(e){
e.preventDefault();
var $target = $(e.target).closest('a');
$.ajax({
type:"POST",
url: $target.attr('href'),
success:function (data){
$target.closest("div.pray").html(data);
}
});
});
In the ajax response the html code should go into the div.pray