Ajax (ify) Combox, заполненный массивом PHP

Question

Я все еще изучаю, как работает Ajax, и поэтому у меня много проблем с тем, чтобы взять мой текущий комбинированный список PHP и сделать его Ajaxified. Выбор поля со списком заполняется массивом PHP и представляет количество изображений, которые я хочу отобразить на странице. Прямо сейчас весь код находится в одном файле PHP, хотя я вполне уверен, что когда он находится в Ajax, он должен быть на двух страницах.

О, и если бы вы могли использовать jQuery, это было бы очень ценно.

<?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>';

?>

Ниже приведен запрос PHP и т. Д. Для отображаемых изображений. Мне не нужно, чтобы приведенный ниже раздел был изменен на Ajax на данный момент, если только это не является необходимым для изменения приведенного выше кода на 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>";
      }
    }

?>

Большое спасибо за любую помощь.

Answer 1

Я приведу пример того, как вы можете сделать это с помощью jQuery:

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>

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

Я предполагаю, что вы знаете, куда поместить код jQuery

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

?>

И, кстати, я не проверял это, я надеюсь, вы найдете что-нибудь полезное