Amir Rachman Amir Rachman - 6 months ago 57
Ajax Question

How to hide form_dropdown in codeigniter

I want to hide form drop down after second selection, because that second combo box it already selected in earlier. Currently i make it to be like this.

$data['year'] = NULL;


but what i need is that variable is disappear after is selected the dropdown 1.

enter image description here

Below is my code.

Controller

function carbyyear() {
$arrCaryear = $this->modelRegister->loadcaryear();

$arrcaryear[''] = 'Please Select';
foreach ($arrCaryear as $caryears) {
$arrcaryear[$caryears->year] = $caryears->year;
}

$data['year'] = $arrcaryear;

$this->load->view('abc',$data);
}

function ajax_car_make() {

if (isset($_POST) && isset($_POST['year'])) {

$year = $_POST['year'];
$arrMakes = $this->modelRegister->loadcarmake($year);

//print_r($arrModels);
$arrmakes[''] = 'Please Select';
foreach ($arrMakes as $makes) {
$arrmakes[$makes->make] = $makes->make;
}

print form_dropdown('make',$arrmakes);

$data['year'] = NULL;

$this->load->view('abc',$data);

} else {
redirect('site');
}
}

function ajax_car_model() {

if (isset($_POST) && isset($_POST['make'])) {

$make = $_POST['make'];
$arrModels = $this->modelRegister->loadmodelfrombrand($make);

//print_r($arrModels);
$arrmodels[''] = 'Please Select';
foreach ($arrModels as $models) {
$arrmodels[$models->model] = $models->model;
}

print form_dropdown('model',$arrmodels);
} else {
redirect('site');
}
}


View

<body>
<div id="container">
<div id="body">
<article>
<table style="margin:0 auto;width:50%" >
<tr>
<td align="center" height="50">
<div id="yearcombox">
<?php

$js = 'id="year" onChange="showMake(this);;"';
echo form_dropdown('year',$year);

?>
</div>

</td>
</tr>
<tr>
<td align="center" height="50"><div id="makecombox"></div> </td>
</tr>
<tr>
<td align="center" height="50"><div id="modelcombox"></div> </td>
</tr>
</table>
</article>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function () {
$('#yearcombox select').change(function () {
var selYear = $(this).val();
console.log(selYear);
$.ajax({
url: "ajax_car_make",
async: false,
type: "POST",
data: "year="+selYear,
dataType: "html",
beforeSend: function(data) {
$('#makecombox').html('<img src="<?php echo base_url(); ?>/template/images/loader.gif" alt="" width="24" height="24">');
},
success: function(data) {

$('#makecombox').html(data);

},
})
});
});

$(document).ready(function () {
$('#makecombox select').change(function () {
var selMake = $(this).val();
console.log(selMake);
$.ajax({
url: "ajax_car_model",
async: false,
type: "POST",
data: "make="+selMake,
dataType: "html",
beforeSend: function(data) {
$('#modelcombox').html('<img src="<?php echo base_url(); ?>/template/images/loader.gif" alt="" width="24" height="24">');
},
success: function(data) {

$('#modelcombox').html(data);

},
})
});
});



</script>
</body>

Answer

No need to load view in ajax response

function ajax_car_make()
{
   if (isset($_POST) && isset($_POST['year'])) {
    $year = $_POST['year'];
    $arrMakes = $this->modelRegister->loadcarmake($year);
    //print_r($arrModels);
    $arrmakes[''] = 'Please Select';
    foreach ($arrMakes as $makes) {
        $arrmakes[$makes->make] = $makes->make;
    }
    echo form_dropdown('make',$arrmakes);

    } else {
    echo false;
}   

}

Change $('#makecombox select').change(function () {

to

$('body').on('change','#makecombox select',function () {