Ajax(ify) Combox populated by PHP array - php

Question

I'm still learning how Ajax works, and as such I'm having a lot of trouble taking my current PHP combo box, and making it Ajaxified. The combo box choices are populated by a PHP array, and represent the number of images I wish to display on a page. Right now all the code is in one PHP file, although I'm pretty sure when it's in Ajax, it will have to be in two pages.
Oh, and if you could use jQuery, it would be much appreciated.
<?php
$curPage = 0;
if(isset($_GET['page'])){
$curPage = (int) $_GET['page'];
}
// values of combobox in an array
$imgNum_values = array('12','16','20');
if(isset($_GET['imgs']) && in_array($_GET['imgs'], $imgNum_values))
{
$selected_imgNum = $_GET['imgs'];
}else{
// input default value, if empty the first variable will be shown
$selected_imgNum = '';
}
$option_num = count($imgNum_values);
echo '
<form name=imgNum method="get" action="new_arrivals_img.php">
<label>number of images per page:</label>
<select name="imgs" onChange="imgNum.submit();">';
for($x = 0; $x < $option_num; $x++)
{
// print the options
echo '
<option value="'.$imgNum_values[$x].'"'.($imgNum_values[$x] == $selected_imgNum ?
' selected="selected"' : '').'>'.$imgNum_values[$x].'</option>';
}
echo '
</select>
<input type="hidden" name="page" value="<?php echo $curPage; ?>" />
</form>';
?>
Below is the PHP query etc for the images displayed. I don't need the below section changed into Ajax at the moment, unless it's essential to the above code being changed into Ajax.
<?php
if((int) $_GET['imgs'] > 0){
$limit = (int) $_GET['imgs'];
} else {
$limit = 12;
}
$mysql_link = mysql_connect("localhost", "root", "root");
mysql_select_db("new_arrivals_imgs") or die("Could not select database");
$query = mysql_query("SELECT `imgURL`,`imgTitle` FROM `images` ".
"ORDER BY `imgDate` DESC LIMIT " . $limit * $curPage . ", $limit") or die(mysql_error());
if(!$query) {
echo "Cannot retrieve information from database.";
} else {
while($row = mysql_fetch_assoc($query)) {
echo "<li><a href='new_arrivals_img/".$row['imgURL']."' class='gallery' title='".$row['imgTitle']."'><img src='new_arrivals_img/thumbnails/".$row['imgURL']."'></a></li>";
}
}
?>
Thanks so much for any help.

Answer 1

I'll give you an example on how you could do this with jQuery:
The HTML:
<form>
<label>Images Number:</label>
<select id="imgNum" name="imgNum">
<option value="12">12</option>
<option value="16">16</option>
<option value="20">20</option>
</select>
</form>
<div id="imgTray"></div>
The JavaScript(jQuery):
//Bind the onChange event to Fetch images on combox selection
$("#imgNum").change(function(){
//The combo box
var sel = $(this);
//Selected value
var value = sel.value();
//Feth the images
$.get("get_images.php",{imgs: value}, function(data){
//Add images(or what ever the script output is) to the document
$("#imgTray").html(data);
});
})
//You should store the current selected option in a cookie
//For the sake of the example i'll set the default permanently to 12
var imgNum_selected = 12;
//set the initial selected option and trigger the event
$("#imgNum [value='"+imgNum_selected+"']")
.prop("selected","selected")
.change();
I'll assumed you know where to put the jQuery code
The PHP(get_images.php):
<?php
if((int) $_GET['imgs'] > 0){
$limit = (int) $_GET['imgs'];
} else {
$limit = 12;
}
$mysql_link = mysql_connect("localhost", "root", "root");
mysql_select_db("new_arrivals_imgs") or die("Could not select database");
$query = mysql_query("SELECT `imgURL`,`imgTitle` FROM `images` ".
"ORDER BY `imgDate` DESC LIMIT " . $limit * $curPage . ", $limit") or die(mysql_error());
if(!$query) {
echo "Cannot retrieve information from database.";
} else {
while($row = mysql_fetch_assoc($query)) {
echo "<li><a href='new_arrivals_img/".$row['imgURL']."' class='gallery' title='".$row['imgTitle']."'><img src='new_arrivals_img/thumbnails/".$row['imgURL']."'></a></li>";
}
}
?>
And by the way i did not test this, i hope you find something useful