refresh div based on link click with data pulled from php file - php

Question

I have an image scroller with a selection of images in it. These images are pulled out of the database. Above the scroller are a list of folders.
When the user click a new folder I want the list of images to update without refreshing the page. I have had a go at making this with ajax but its confusing me a little and is not working at all. Here is what i have got so far
first the default html/php page
the images that are there now a just for test. these will be the default images in no folder when the query is written
About.php
the folders list
<div id="folders">
<ul id="foldername">
<li>test0</li>
<li>test1</li>
<li>test2</li>
</ul>
</div>
then the scroller
<div id="scrolimg">
<img name="" src="" width="150" height="150" alt="" class="singlscrolimg" />
</div>
getImage.php
include('../Connections/dbcon.php');
mysql_select_db($database_dbcon, $dbcon);
$query_rs_image = "SELECT * FROM images WHERE imgfolder='".$_GET['id']."' AND status='1'";
$rs_image = mysql_query($query_rs_image, $dbcon) or die(mysql_error());
$row_rs_image = mysql_fetch_assoc($rs_image);
$totalRows_rs_image = mysql_num_rows($rs_image);
do { ?>
<img name="<?php echo $row_rs_image['imgname']; ?>" src="/images/uploads/<?php echo $row_rs_image['smfile']; ?>" alt="<?php echo $row_rs_image['imgname']; ?>" />
<?php } while ($row_rs_image = mysql_fetch_assoc($rs_image)); ?>
and at the top of about.php
<script>
function getImages(id)
{
$.ajax({
type: "GET",
url: 'getImage.php',
data: "id=" + id,
success: function(data) {
$('#scrolimg').html(data);
}
});
}
</script>