samedi 25 juin 2016

Cascading dropdownlist for finding car parts make / model /year/trim


I am new to coding and I am working on my first project. I am trying hard to create a 4-tier-dependent dropdown list to find parts by vehicle trim.

After creating the first two dropdowns, I ran my project and discovered that the model dropdown is not populated based on the first dropdown. The getMakes.php and getModels.php codes work. I guess the problem is with the script.js I have looked through over and over and over and I can't seem to get the problem. Please I will appreciate any advice that helps me get over this hurdle. Here is what I have so far:

My form dropdowns:

<div id = "banner"> 
    <select id = "slct1"></select>
    <select id = "slct2"></select>
    <select id = "slct3"></select>
    <select id = "slct4"></select>
</div>
<script src="jquery-1.10.2.min.js"></script>
<script type="text/javascript"  src = "script.js"></script>

config.php:

 <?php
 $username = "root";
 $password = "";
 $host = "localhost";
 $database = "testing";
 ?>

opendb.php:

 <?php
 require "config.php";
 $conn = mysqli_connect($host, $username, $password) or 
 die("Could not       connect");
 mysqli_select_db($conn, $database);
 ?>

closedb.php:

<?php
mysqli_close($conn);
?>

getMakes.php:

<?php
require "opendb.php";
$query = "SELECT name FROM `makes`";
$data = mysqli_query($conn, $query) or die("Error: ".mysqli_error($conn));
$makes = array ();

while ($row = mysqli_fetch_array ($data)) {
    array_push($makes, $row["name"]);
}

echo json_encode($makes);
require "closedb.php";
?>

getModels.php:

<?php
if(isset($_GET["make"])){
    $make = $_GET["make"];

    require "opendb.php";

    $query = "SELECT models.name FROM `models` 
        INNER JOIN makes ON    models.make_id=makes.id 
        WHERE makes.name LIKE '{$make}'";

    $data = mysqli_query($conn, $query);
    $models = array ();

    while ($row = mysqli_fetch_array ($data)) {
        array_push($models, $row["name"]);
    }

    echo json_encode($models);
    require "closedb.php";
}
?>

script.js:

$(document).ready(function(){
    $.getJSON("getMakes.php", success = function(data){
        var options = "";
        for( var i = 0; i < data.length; i++) {
            options+= "<option value='" + data[i].toLowerCase() + "'>"+ data[i]+"</option>";
        }

        $("#slct1").append(options);
        $("#slct1").change();
    });

    $("#slct1").change(function(){
        $.getJSON("getModels.php?make =" + $(this).val(),
            success = function(data){
                var options = "";
                for( var i = 0; i < data.length; i++){
                    options+= "<option value='" + data[i].toLowerCase() + "'>"+ data[i] + "</option>";
                }

                $("#slct2").html("");
                $("#slct2").append(options);
        });
    });
});

Aucun commentaire:

Enregistrer un commentaire