Hi there! :)
I'm encountering an issue with my code. I am trying to create a dropdown filter using ajax, php, and json. The first dropdown menu (for selecting the build year of a car) is populated through php. The second dropdown menu allows users to choose the brand of the car, and is loaded via ajax and php. While everything is functioning correctly, the styling applied by ajax is not rendering on the element. Any suggestions on how I can resolve this?
AJAX Code
function displayBrand(sel) {
var selectedYear = sel.options[sel.selectedIndex].value;
$("#output1").html( "" );
$("#output2").html( "" );
if (selectedYear.length > 0 ) {
$.ajax({
type: "POST",
url: "fetch_state.php",
data: "selectedYear="+selectedYear,
cache: false,
beforeSend: function () {
$('#output1').html('<img src="loader.gif" alt="" width="24" height="24">');
},
success: function(html) {
$("#output1").html( html );
$("#output1").addClass( "section colm colm6");
}
});
}
}
PHP Code
require("configure.php");
$car_brand = ($_REQUEST["selectedYear"] <> "") ? trim( addslashes($_REQUEST["selectedYear"])) : "";
if ($car_brand <> "" ) {
$sql = "SELECT DISTINCT make FROM VehicleModelYear WHERE year = ".$car_brand ." ORDER BY make desc";
$count = mysql_num_rows( mysql_query($sql) );
if ($count > 0 ) {
$query = mysql_query($sql);
?>
<div class="section colm colm6">
<label for="carBrand" class="field-label">(*) Brand</label>
<select name="brand" onchange="showCity(this);">
<option value="">Select brand</option>
<?php while ($rs = mysql_fetch_array($query)) { ?>
<option value="<?php echo $rs["make"]; ?>"><?php echo $rs["make"]; ?></option>
<?php } ?>
</select>
<i class="arrow double"></i>
</label>
</div>
<?php
}
}
?>
HTML Code // Placeholder for the second dropdown, loaded via ajax..
<div id="output1">
</div><!-- end section -->