PHPAPU

SEARCH_IMAGES.PHP


<?php
// Get the file name
$filename = $_GET['filename'];
// Find all the images
$images = glob("images/file/path/*_{$filename}");
// Return the images as json
echo json_encode($images);
?>



//////////////////////////////////////////////

UPDATE.PHP


<?php
if (!empty($_GET['id']) && !empty($_GET['value'])) {

    $id = $_GET['id'];
    $value = $_GET['value'];

    try {

        $objDb = new PDO('mysql:host=localhost;dbname=cars', 'root', 'password');
        $objDb->exec('SET CHARACTER SET utf8');

        $sql = "SELECT *
                FROM `categories`
                WHERE `master` = ".$value;
        $statement = $objDb->prepare($sql);
        $statement->execute(array($value));
        $list = $statement->fetchAll(PDO::FETCH_ASSOC);

        if (!empty($list)) {

            $out = array('<option value="">Select one</option>');

            foreach($list as $row) {
                $out[] = '<option value="'.$row['id'].'">'.$row['name'].'</option>';
            }

            echo json_encode(array('error' => false, 'list' => implode('', $out)));

        } else {
            echo json_encode(array('error' => true));
        }

    } catch(PDOException $e) {
        echo json_encode(array('error' => true));
    }

} else {
    echo json_encode(array('error' => true));
}

?>



/////////////////////////////////////////////////////

CORE.JS


var formObject = {
    run : function(obj) {
        if (obj.val() === '') {
            obj.nextAll('.update').html('<option value="">----</option>').attr('disabled', true);
        } else {
            var id = obj.attr('id');
            var v = obj.val();
            jQuery.getJSON('mod/update.php', { id : id, value : v }, function(data) {
                if (!data.error) {
                    obj.next('.update').html(data.list).removeAttr('disabled');
                } else {
                    obj.nextAll('.update').html('<option value="">----</option>').attr('disabled', true);
                }
            });
        }
    }
};
$(function() {

    $('.update').live('change', function() {
        formObject.run($(this));
    });

});

////////////////////////////////////////////////////////////

INDEX.PHP

<?php

try {

    $objDb = new PDO('mysql:host=localhost;dbname=cars', 'root', 'password');
    $objDb->exec('SET CHARACTER SET utf8');

    $sql = "SELECT *
            FROM `categories`
            WHERE `master` = 0";
    $statement = $objDb->query($sql);
    $list = $statement->fetchAll(PDO::FETCH_ASSOC);

} catch(PDOException $e) {
    echo 'There was a problem';
}


?>


<form action="" method="post">

        <select name="gender" id="gender" class="update">
            <option value="">Select one</option>
            <?php if (!empty($list)) { ?>
                <?php foreach($list as $row) { ?>
                    <option value="<?php echo $row['id']; ?>">
                        <?php echo $row['name']; ?>
                    </option>
                <?php } ?>
            <?php } ?>
        </select>

        <select name="category" id="category" class="update"
            disabled="disabled">
            <option value="">Please choose brand first!</option>
        </select>



    </form>



<script type="text/javascript">

// Every time a category is selected we request the files
$('#category').on('change', function() {
    // If we have an element with images loaded, lets delete it
    var searchResult = $("#search-result").empty();
    // Now we serialize the form data, add an id to the form
    var searchBrand = $('#gender').find('option:selected').text();
    var searchModel = $('#category').find('option:selected').text();
    var fileName = searchBrand + '.' + searchModel + '.jpg';
    var searchData = { filename: fileName };
    // Now we create the ajax request with the form data
    var request = $.getJSON('mod/search_images.php', searchData);
    // If the request success we show the images
    request.done(function(data) {
        // For each image found we add a new image to the DOM
        $.each(data, function(index, image_uri) {
            // First let's create the image element
            var img = $("<img>", {
                "class": "result-image",
                "src": image_uri
            });
            // Then we append it to the DOM
            searchResult.append( img );
        });
    });
    // If the search fails, we notify that no results were found
    request.fails(function() {
        alert('No results found');
    });
});

</script>