I have the following combo box which sets the number of images displayed per page. I had the original php code working, but I am having a lot of trouble using jQuery to change it to Ajax.
It appears the combo box part is working, but it's hard to tell as the images are not displaying. I'm hoping someone can help me.
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 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();
//Fetch the images
$.get("get_images.php",{imgs: value}, function(data){
//Add images 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();
The PHP
<?php
if((int) $_GET['imgs'] > 0){
$limit = (int) $_GET['imgs'];
} else {
$limit = 12;
}
$curPage = 0;
if(isset($_GET['page'])){
$curPage = (int) $_GET['page'];
}
$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 in adva开发者_如何学编程nce for any help you can provide.
You have a typo, the method is val()
, not value()
:
var value = sel.val();
For example (without the AJAX stuff): http://jsfiddle.net/ambiguous/u3c9G/
精彩评论