how to get and pass variable through onclick event to update db - php

Question

I have a page full of images that end with _off.jpg. I have an onclick event that when an image is clicked, it will change the image to the _on.jpg version of the image(an image that is grayed out). That part works fine. I also want it to call an update.php page where I'll update the database using variables passed in for that image that was clicked.
The problem is that I'm having trouble getting the variable for the image clicked to pass through to the update.php page.
here is the jquery function to swap each image with the ajax call to update.php
jQuery(function(){
$(".img-swap").live('click', function() {
if ($(this).attr("class") == "img-swap") {
this.src = this.src.replace("_off","_on")
$.ajax({
type: "get",
url: "updatelist.php"
});
} else {
this.src = this.src.replace("_on","_off");
}
$(this).toggleClass("on");
});
});
And here is the part that is calling the images from the directory
$files = glob("movieposters/*_off.*");
for ($i=0; $i<count($files); $i++)
{ $num = $files[$i];
echo '<img src="'.$num.'" border="3" style="border-color:#ffffff" class="img-swap">';

Answer 1

I think this will do what you want...
Display images
<?php
// Load list
$_fileList = glob( "movieposters/*_off.*" );
foreach ( $_fileList as $_file )
echo '<img src="' . $_file . '" border="3" style="border-color:#ffffff" class="img-swap">';
?>
Swap them...
<script>
$(function(){
$('.img-swap').live('click', function() {
var _src = $(this).attr('src');
if (-1 == _src.indexOf('_on')) {
$(this).attr('src',_src.replace('_on','_off')).removeClass('on');
} else {
$(this).attr('src',_src.replace('_off','_on')).addClass('on');
}
// Update server
$.get( 'updatelist.php?image='+escape(_src));
});
});
</script>
Then your server script (updatelist.php):
<?php
$_clickedFile = $_GET['image'];
...
?>

Answer 2

Here's a quick example of an AJAX request:
$.ajax({
type: "GET",
url: "file.php",
data: "foo=three&bar=asdfg",
success: function(data) {
alert('Response was: ' + data);
}
});
The part that sets the variables to be sent is right here, "foo=three&bar=asdfg", so if you want to send the src= of the image, this sort of request might work:
$.ajax({
type: "GET",
url: "file.php",
data: "name=" + encode($(this).attr('src')),
success: function(data) {
alert('Response was: ' + data);
}
});
Note that I used encode(). You need to encode your requests.