Using Ajax with PHP and MySQL - php

Question

I would like to fetch information from a database with AJAX with html buttons, without having to refresh the browser.
I can make it work via HTML with the code below, but I want to do it via Ajax.
I have the following code in the same file, example.html;
<form action="?" method="get">
<input id="Button1" type="hidden" name="q" value="%U/%Y"/>
<input id="Button1" style="width: auto" type="button" value="Weekly stats">
</form>
<form action="?" method="get">
<input id="Button2" type="hidden" name="q" value="%M/%Y"/>
<input id="Button2" style="width: auto" type="submit" value="Monthly Stats">
</form>
<br>
<?php
//execute a mysql query to retrieve all the users from users table
//if query fails stop further execution and show mysql error
if ($_GET['q'] == '') {
$q = '%M/%Y';
}
else {
$q = $_GET['q'] ;
}
$query=mysql_query("SELECT DATE_FORMAT((post_date), '".$q."') 'Date',
SUM(balance) 'Balance'
FROM posts
GROUP BY Date
LIMIT 0, 25") or die(mysql_error());
//if we get any results we show them in table data
if(mysql_num_rows($query)>0):
?>
<table id="lastTips" class="main" cellspacing="0" width= "100%">
<thead>
<tr>
<th align="center">Date</th>
<th align="center">Balance</th>
</tr>
</thead>
<tbody>
<?php
//while we going through each row we display info
while($row=mysql_fetch_object($query)):?>
<tr>
<td align="center"><?php echo $row->Date;?></td>
<td align="center"><?php echo $row->Balance;?></td>
</tr>
<?php endwhile;?>
</tbody>
</table>
<?php
//if we can't get results we show information
else: ?>
<h3>No Results found.</h3>
<?php endif; ?>
I have tried several jquery functions without success, I have seen examples which call a separate file, but in my case I need to have the above code in the same file.
Can someone help me?
Thanks

Answer 1

I think you should split the code on two files.
First "index.html" ( with html/js ):
<
script type="text/javascript">
$('#btn-week').click(function(){
$.post("result.php", { date: "%U/%Y" }).done(function(data)
{
formatResponse(data);
}
);
});
$('#btn-month').click(function(){
$.post("result.php", { date: "%M/%Y" }).done(function(data)
{
formatResponse(data);
}
);
});
function formatResponse( values ){
var result = jQuery.parseJSON(data);//parse json response
var element = $("#lastTips tbody");
element.html('');//to clean previous result
for ( var i in result ){
element.append('<tr><td align="center">' + values.date + '</td><td align="center">' + values.balance + '</td></tr>');//append to table
}
}
</script>
<input id="btn-week" style="width: auto" type="button" value="Weekly stats">
<input id="btn-month" style="width: auto" type="submit" value="Monthly Stats">
<table id="lastTips" class="main" cellspacing="0" width= "100%">
<thead>
<tr>
<th align="center">Date</th>
<th align="center">Balance</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Second "result.php" with php:
<?php
//execute a mysql query to retrieve all the users from users table
//if query fails stop further execution and show mysql error
if ($_POST['q'] == '') {
$q = '%M/%Y';
}
else {
$q = $_POST['q'] ;
}
$query=mysql_query("SELECT DATE_FORMAT((post_date), '".$q."') 'Date',
SUM(balance) 'Balance'
FROM posts
GROUP BY Date
LIMIT 0, 25") or die(mysql_error());
echo json_encode(mysql_fetch_array($query));
I doesn't have tested the code.
One warning, the html file cannot have two elements with same id ;)

Answer 2

You should use AjaxForm plug-in for jQuery:
$('.my-ajax-form').ajaxForm(function(data){
alert(data);
// do some thing with data here.
})