How to build like counter using jquery?

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&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