2011-08-20 129 views
0

我有以下组合框,它设置每页显示的图像数量。我有原始的PHP代码工作,但我使用jQuery将其更改为Ajax时遇到了很多麻烦。jQuery Ajax组合框不工作

它显示组合框部分正在工作,但很难说因为图像不显示。 我希望有人能帮助我。

的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> 

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(); 

的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>"; 
     } 
    } 

?> 

预先感谢任何帮你提供。

回答

2

你有一个错字,方法是val(),不value()

var value = sel.val(); 

例如(没有AJAX的东西):http://jsfiddle.net/ambiguous/u3c9G/

+0

天才!我不敢相信这很简单。非常感谢你。 – stefmikhail

+0

快速的问题。我有一个单独的Ajax文档用于分页。它的工作完美,但我想将此功能与分页功能集成在一起。这是否会导致完全重写?或者是否可以将此代码与其他代码放在一起?我需要在单独的文件中使用php吗?我想知道,因为他们需要共享当前页面和每页图像等常用信息。 – stefmikhail

+0

@stefmikhail:我不得不说“也许”。很难说没有更多的细节。 –