Question

I am having trouble getting ajax to work with my “dynamic combo box.” First here is the code:
The View:

<?php echo form_open('control_form/add_all'); ?>
    <label for="make">State<span class="red">*</span></label>
    <select id="make" name="make" >
        <option value=""></option>
        <?php
        foreach($makeOptions->result() as $make){
            echo '<option value="' . $make->make_id . '">' . $make->make . '</option>';
        }
        ?>
    </select>
    <label for="model">City<span class="red">*</span></label>
    <!--this will be filled based on the tree selection above-->
    <select id="model" name="model"> 
        <option value=""></option>
    </select>
    <label for="f_membername">Member Name<span class="red">*</span></label>
    <!--<input type="text" name="f_membername"/>-->
    <?php echo form_close(); ?>

The View Controller:

    function dropDown(){
         if ($this->ion_auth->requireAdmin())         
        $data = array('title' => 'DropDown', 'main_content' =>     'admin/dropDown');        
        $data['makeOptions'] = $this->vehicle_model->getMake(Null, Null);
        $data['modelOptions'] = $this->vehicle_model->getModel(Null, Null, NULL, Null);            
        $this->load->view('admin/includes/template', $data);          
}

The Ajax controller:

   function get_model($make){    
    header('Content-Type: application/x-json; charset=utf-8');
    echo(json_encode($this->vehicle_model->getModelByMake ($make)));
} 

The Jquery:

$('#model').hide();
 $('#make').change(function(){
var make_id = $('#make').val();
if (make_id != ""){
    var post_url = "http://pulsedrivers.com/admin/get_model/" + make_id;
    $.ajax({
        type: "POST",
         url: post_url,
         success: function(models) //we're calling the response json array 'cities'
          {
            $('#model').empty();
            $('#model').show();
               $.each(models,function(model_id,model) 
               {
                var opt = $('<option />'); // here we're creating a new select option for each group
                  opt.val(model_id);
                  opt.text(model);
                  $('#model').append(opt); 
            });
           } //end success
     }); //end AJAX
} else {
    $('#model').empty();
    $('#model').hide();
}//end if
}); //end change 

The Model (used by get_model controller):

function getModelByMake ($make, $tree = null){
    $this->db->select('model_id, model, make_id');

    if($tree != NULL){
        $this->db->where('make_id', $make);
    }
        $this->db->where('make_id', $make);
    $query = $this->db->get('model');
    $models = array();

    if($query->result()){
        foreach ($query->result() as $model) {
            $models[$model->model_id] = $model->model;
        }
        return $models;
    } else {
        return FALSE;
    }
}

The view contains two dropdowns, one displays makes, the other the corresponding models. The models are not showing up after a make is selected. Firebug does not show any errors during the process.

Things already checked: jquery works, the script loads.

The controller get_models returns an array like this 1:Corvette, 2:Camaro so that seems its works correctly as well.

Any help is gratefully appreciated, thanks!

Answer 1

Turns out my script was incorrect. For future reference to fellow noobies like myseleft to jquery and ajax. If you want your script to start on page open, wrap your code with this function:

 $(document).ready(function(){
 });

Also, Codeigniter related, turn CSFR Token to false. (development purposes only, once you go live you will need to set it to true for security reasons). I will now need to look up how to use my script with CSFR token set to true.