phpjquerycounterclick-counting

click counter in php using jquery

I am new to JQuery and trying to create a counter which counts the number of clicks and updates the counter in the database by one. I have created a button, on click of that i am sending the counter's value to the database. and trying to get the updated count at my first page.

my code is - 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Implementing counter</title>
</head>

<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

<? session_start()?>
<? ob_start()?>
<? 
if($_SERVER['HTTP_HOST']=='localhost'){
$host="localhost";

$user="root";

$pass="";

$dbas="db_name";

mysql_connect($host,$user,$pass,$dbas);
mysql_select_db($dbas);
}
?> 


<script>
$(document).ready(function(){
$("#count").click(function(){
saveData();
$("#counter").load();
});

function saveData(){  
$.ajax({
       type: "POST",
   url: "counter.php",
   data: { count: "1"}
    })
    .done(function( count ) {
    alert( "Counter Plus: " + count );
    })
    .fail(function() {
    alert( "error" );
    });
}
});
</script>
<br />
<button id="count">Add Counter</button><br>
<div id="counter">
<?
$fetch1=mysql_query("select `count` from user");
$fetch2=mysql_fetch_array($fetch1);
$counter=$fetch2['count'];
echo "You have ".$counter." Clicks";
?>
</div><br><br>

</body>
</html>

My counter.php looks like -

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Counter</title>
</head>

<body>

<? session_start()?>
<? ob_start()?>
<? 
if($_SERVER['HTTP_HOST']=='localhost'){
$host="localhost";

$user="root";

$pass="";

$dbas="db_name";

mysql_connect($host,$user,$pass,$dbas);
mysql_select_db($dbas);
}
?> 


<?
if (isset($_POST['count'])) { // Form has been submitted.
    $count = $_POST['count'];
$n=0;
$fetch1=mysql_query("select `count` from user");
$fetch2=mysql_fetch_array($fetch1);
$n1=$fetch2['count'];
$n=$n1+$count;
// INSERT THE DATA 
$query = "UPDATE user SET `count`='{$n}'";
// Confirm if the query is successful.
$result = mysql_query($query);
echo "Counter Updated by 1";
}
?>


</body>
</html>

when i click the button, the counter.php is called, counter is updated, but my < div > is not updated. the counter.php page is shown as a dialog over my screen.

My first page & when i click the button, it looks like this -

first page looks like this

when i click the button, it looks like this -

Tell me what is going wrong??

Solution

  • Remove HTML Tag's FROM counter.php

    <? session_start()?>
<? ob_start()?>
<? 
if($_SERVER['HTTP_HOST']=='localhost'){
$host="localhost";

$user="root";

$pass="";

$dbas="db_name";

mysql_connect($host,$user,$pass,$dbas);
mysql_select_db($dbas);
}
?> 


<?
if (isset($_POST['count'])) { // Form has been submitted.
    $count = $_POST['count'];
$n=0;
$fetch1=mysql_query("select `count` from user");
$fetch2=mysql_fetch_array($fetch1);
$n1=$fetch2['count'];
$n=$n1+$count;
// INSERT THE DATA 
$query = "UPDATE user SET `count`='{$n}'";
// Confirm if the query is successful.
$result = mysql_query($query);
echo $n;
}
?>

    AND replace ajax code with below

    function saveData(){  
$.ajax({
       type: "POST",
   url: "counter.php",
   data: { count: "1"}
    })
    .done(function( count ) {
   $("#counter").html( "Counter Plus: " + count );
    })
    .fail(function() {
   // alert( "error" );
    });
}
});