CODEWITHSUNDEEP
phpjquerycounterclick-counting
Gaurav Manral
Gaurav Manral

Reputation: 600

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

Upvotes: 0

Views: 4918

Answers (6)

Basit
Basit

Reputation: 1840

What you're doing is you are using javascript function 'alert', hence the dialog box appears whenever you press the Add Counter button. Change your code to following:

function saveData(){  
   $.ajax({
      type: "POST",
      url: "counter.php",
      data: "count=1",
      success: function(data)
      {
          $('#counter').html(data);
      },
      error: function()
      {
          //alert("error");
      }
  });

});

Also, exclude all the HTML tags from the counter.php page and viola!

Upvotes: 1

Sunil Silumala
Sunil Silumala

Reputation: 917

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" );
    });
}
});

Upvotes: 1

Kalpit
Kalpit

Reputation: 4936

from your counter.php you are returning some string... do like this..

counter.php 

    $query = "UPDATE user SET `count`='{$n}'";
    $result = mysql_query($query);
    echo $n; //here $n has updated count value

in jquery 

   success : function (count)
   { 
     $("#counter").html("you have "+count+" clicks");
   }

hope will help you

Upvotes: 1

user2009750
user2009750

Reputation: 3187

You need to return total count from your counter.php not the whole html markup

Your counter.php should output

Total count = 25

then in your jquery .done callback put this instead of alert

$("#counter").html(count);

Upvotes: 1

lighter
lighter

Reputation: 2806

You can change div content at success

function saveData(){  
  $.ajax({
    type: "POST",
    url: "counter.php",
    data: { count: "1"},
    success: function(data) {
      $('#div').html(data);
    },
    error: function(error) {
      alert(error);
    }
  });
}

Upvotes: 1

internals-in
internals-in

Reputation: 5038

you are using alert !! use .html() find and try this!!

   //alert( "Counter Plus: " + count );
    $("#counter").html( "Counter Plus: " + count );

Upvotes: 1

Related Questions