How can I execute a mysql request on click? - php

Question

<?php
require 'connect.inc.php';
$query = "SELECT `item`, `up`, `down` FROM mytable ORDER BY RAND() LIMIT 1";
$query_run = mysql_query($query);
if ($query_run = mysql_query($query)) {
while ($query_row = mysql_fetch_assoc($query_run)) {
$item = $query_row['item'];
$up = $query_row['up'];
$down = $query_row['down'];
?>
<div id="one">
<div id="votes">
<?php
echo "$up votes";
?>
</div>
</div>
<div id="or">
<div id="item">
<?php echo $item ?>
</div>
</div>
<div id="two">
<div id="votes">
<?php
echo "$down votes";
?>
</div>
</div>
<?php }
} else {
echo mysql_error();
}
?>
This is my code. I need to make it so when a user clicks the div id="one" or id="two" execute this sql query (if div one was clicked (same thing for two))
UPDATE mytable SET up=$up+1 WHERE id="1(can be any id)"
Also, can I do that math in an sql query?
Thanks

Answer 1

Alright so this consist of 3 parts:
1.html.
2.JS/ajax.
3.php.
1.) HTML.
<div data-action="up" class="clicker" id="<?php echo $item; ?>">
<div id="votes">
<?php
echo "$up votes";
?>
</div>
</div>
<div id="or">
<div id="item">
<?php echo $item ?>
</div>
</div>
<div data-action="down" class="clicker" id="<?php echo $item; ?>">
<div id="votes">
<?php
echo "$down votes";
?>
</div>
</div>
2.) JS/Ajax.
<script type='text/javascript' >
$('.clicker').click(function (){
doAjaxCall($(this).attr('id'), $(this).attr('data-action'));
});
function doAjaxCall(varID, vote){
var pageUrl = document.URL;
ar post = '{"ajax":"yes", "varID":' + varID + ', "vote":' + vote + '}';// Incase you want to pass dynamic ID
$.post(pageUrl,post,function(data){
var response = $.parseJSON( data )
if(response.success){
//do whatever you like.
alert('baaaam');
}
});
}
</script>
3.) php.
if($_POST['ajax'] == 'yes'){
$field = $_POST['vote'];
$query = "UPDATE mytable SET `$field` = `$field` +1 WHERE id=".$_POST['var_id'];
$query_run = mysql_query($query);
$return = array();
$return['success'] = false;
if($query_run){
$return['success'] = true;
}
echo json_encode($return);
die()
}
Update whole Page
if($_POST['ajax'] == 'yes'){
$field = $_POST['vote'];
$query = "UPDATE mytable SET `$field` = `$field` +1 WHERE id=".$_POST['var_id'];
$query_run = mysql_query($query);
$return = array();
$return['success'] = false;
if($query_run){
$return['success'] = true;
}
echo json_encode($return);
die()
}
$query = "SELECT `item`, `up`, `down` FROM mytable ORDER BY RAND() LIMIT 1";
$query_run = mysql_query($query);
if ($query_run = mysql_query($query)) {
while ($query_row = mysql_fetch_assoc($query_run)) {
$item = $query_row['item'];
$up = $query_row['up'];
$down = $query_row['down'];
?>
<div data-action="up" class="clicker" id="<?php echo $item; ?>">
<div id="votes">
<?php
echo "$up votes";
?>
</div>
</div>
<div id="or">
<div id="item">
<?php echo $item ?>
</div>
</div>
<div data-action="down" class="clicker" id="<?php echo $item; ?>">
<div id="votes">
<?php
echo "$down votes";
?>
</div>
</div>
<script type='text/javascript' >
$('.clicker').click(function (){
doAjaxCall($(this).attr('id'), $(this).attr('data-action'));
});
function doAjaxCall(varID, vote){
var pageUrl = document.URL;
var post = '{"ajax":"yes", "varID":' + varID + ', "vote":' + vote + '}';// Incase you want to pass dynamic ID
$.post(pageUrl,post,function(data){
var response = $.parseJSON( data )
if(response.success){
//do whatever you like.
alert('baaaam');
}
});
}
</script>
<?php }
} else {
echo mysql_error();
}
?>
Basically this is the whole thing. if you want i can also put the pieces together for you.

Answer 2

You can add and onClick() event in javascript/jquery. Then, do a POST like this
$("#div1").onClick(function(){
var info = $(this).val();
$.post("fileWithQuery.php",{toUpdate: info},function(data){ // (fileName to post, variables to send via POST, callBack function)
// Show a message
});
});
You just need to create that php file.