updating div without page refresh - php

Question

i have a php script that counts button clicks to a txt file. this is working just fine.
On my html page i am displaying the clicks as such :
<?php
include ('counter.php');
?>
<div class="count_right" id="one"></div>
<div class="count_left" id="two"></div>
<form action="" method="post" id="form" >
<button class="vote_right" name="clicks1" ></button>
</form>
<form action="" method="post" id="form2" >
<button class="vote_left" name="clicks2"></button>
</form>
the php
<?php
if( isset($_POST['clicks1']) ) {
incrementClickCount1();
}
function getClickCount1()
{
return (int)file_get_contents("count_files/clickcount1.txt");
}
function incrementClickCount1()
{
$count = getClickCount1() + 1;
file_put_contents("count_files/clickcount1.txt", $count);
}
if( isset($_POST['clicks2']) ) {
incrementClickCount2();
}
function getClickCount2()
{
return (int)file_get_contents("count_files/clickcount2.txt");
}
function incrementClickCount2()
{
$count2 = getClickCount2() + 1;
file_put_contents("count_files/clickcount2.txt", $count2);
}
?>
and the js (EDITED)
<script type="text/javascript">
var valueOne = "<?php echo getClickCount1(); ?>";
var valueTwo = "<?php echo getClickCount2(); ?>";
$('#one').html(valueOne);
$('#two').html(valueTwo);
$('.vote_right').click(function(){
$.ajax({
type: "POST",
url: "counter.php",
data: valueOne,
cache: false,
success: function(data)
{
$("#one").html(data);
} });
</script>
tried also adding
e.preventDefault();
but then the button wont work.
My problam is that i dont want the page to refresh when the button is clicked. insted i would like the div to refresh with the new data.
I have tried usin ajax but with no success. its either the page refreshes or the data wont update.
Any suggestions?

Answer 1

Use type=button to not submit the form when clicking buttons (and thus prevent page reloading).
<button type="button" class="vote_right" name="clicks1" ></button>

Answer 2

The below shows how to write two of the 4 api calls you need to add to your website.
Main Page:
<?php
include ('counter.php');
?>
<div class="count_right" id="one"></div>
<div class="count_left" id="two"></div>
<button class="vote_right" name="clicks1" onclick="addCount1()"></button>
<button class="vote_left" name="clicks2" onclick="addCount2()"></button>
JS:
<script type="text/javascript">
var valueOne = //use ajax (GET) to call the page for count1;
var valueTwo = //use ajax (GET) to call the page for count2;
$(document).ready(function(){
$('#one').html(valueOne);
$('#two').html(valueTwo);
});
function addCount1(){
//use ajax (POST/PUT) to call a page that adds 1 to your text file thing for count1
}
function addCount2(){
//use ajax (POST/PUT) to call a page that adds 1 to your text file thing for count2
}
</script>
New API Page (for count1):
<?php
class IntegerValue implements JsonSerializable {
public function __construct($number) {
$this->number = (integer) $number;
}
public function jsonSerialize() {
return $this->number;
}
}
echo json_encode(new IntegerValue(getClickCount1()), JSON_PRETTY_PRINT);
?>
New API page (for count2):
<?php
class IntegerValue implements JsonSerializable {
public function __construct($number) {
$this->number = (integer) $number;
}
public function jsonSerialize() {
return $this->number;
}
}
echo json_encode(new IntegerValue(getClickCount2()), JSON_PRETTY_PRINT);
?>
How PHP and JavaScript work
On initial page load:
The process flow looks like this:
Server Side code (php) -> sends data to client -> browser begins rendering and executing JS
On form Submit:
Client Executes code (javascript) -> Sends data to server -> Server gets data and processes (PHP)
Because of this if you don't want the page to "refresh" you'd have to use JavaScript and the best way of handling this is AJAX if you use a form you are going to get a refresh also known as a POST-BACK. Otherwise with AJAX you can easily just send a POST or a GET and it won't refresh.

Answer 3

No need to put with in form tag for ajax async request.
Use only
<?php
include ('counter.php');
?>
<div class="count_right" id="one"></div>
<div class="count_left" id="two"></div>
<button class="vote_right" name="clicks1" ></button>
<button class="vote_left" name="clicks2"></button>