Update value in MySQL from PHP using Ajax, change image - php

Question

I've searched the database but haven't really found anything that would answer my question. I'm new with Ajax so I'll try to describe it as good as I can.
I am trying to build a rating system for images with only two options: Accept/Reject.
I have a paginated gallery with 10k images and they all need to be rated (for the competition). There's a special system for rating (accepting/rejecting) and then there's this overview gallery. Every thumbnail that has already been rated should display a clickable text/image, for example "Accepted", depending on the database value. You'd be then able to click on this text/image and it would change to "Rejected" and the mysql database entry would also change at the same time.
Left: initial state of the "Accepted" image. /
Right: changed value of the button (text or image) and updated database.
(source: shrani.si)
So what would be the easiest way to do this? There are hundred images on each paginated site with these buttons below, and you have to be able to change the value back and forth (many times, something like editable star rating system with only two stars, heh).

Answer 1

As you said ajax should be used and I advice you to use jquery functions
Then viewing the images should be simple for you when you loop through the database result
while looping you should test the value of the image is it accpted or rejected in order to link it with the associate JS function that I will talk about later and in that function an ajax request should be made to update that row
function change_status_image(id,status,clicked)
{
$.post("update.php",{image_id:id,image_status:status},function(data){
//your callback to do something like update the value of the button
});
}
This will make an ajax request and sends two variables image_id and image_status in the update.php you should use something like this
$q = mysql_query("UPDATE tbl_name SET column_name = '".mysql_real_escape_string($_POST['image_status'])."' WHERE image_id = '".mysql_real_escape_string($_POST['image_id'])."' ";
about the function make a div or button and link the onclick att to change_status_image
for example
<img onclick="change_status_image(img_id,reverse_current_status)" >

Answer 2

Use jQuery. You need two scripts:
/rate.php
/rate.js
rate.php looks like this:
<?php
// If there are values in $_POST['edits'], then this is an ajax call.
// Otherwise just display the gallery
if ((!empty($_POST['edits']) && (count($_POST['edits']))) {
foreach ($_POST['edits'] as $edit) {
alter_image($edit); // some function to update the database
}
echo "success";
exit;
}
$images = get_images(); // Some function to get the images from the database
?>
<?php foreach ($images as $image): ?>
<div class="gallery-image">
<img src="<?php print $image -> src ?>" />
<button>Accept</button>
<button>Reject</button>
<input name="id" value="<?php print $image -> id ?>"/>
</div>
<?php endforeach; ?>
rate.js looks like this:
$(function() {
// attach click event handler to buttons
$('.gallery-image').on('click', 'button', function() {
var $this = $(this),
ajaxSettings = {
url: '',
type: 'post',
data: {
edits: [
{
id: $this.parent().find('input[name=id]').val(),
action: $this.html()
}
]
},
success: function(response) {
if (response === 'success') {
// something to indicate success
} else {
// something to indicate error
}
}
}
$.ajax(ajaxSettings);
})
})