Not found when using ajax in dynamic dropdown in php

Question

In my php code, I have two dropdowns which is the other one depends on the first one.

Here is the first dropdown:

<select class="form-control style" id="sel" >
    <option style="color: black;" >Select...</option>
    <?php foreach ($dtype as $row ) { ?>
    <option style"color:black;" value="<?php echo $row['donations_type_id'];?>"> <?php echo $row['donations_type_name'];?></option>
    <?php }?>                               
</select>  
<tr>
<td>Available Donation:</td>
<td style="color: black; ">
    <select name='avail' id='avail' class="form-control style" >
        <option style="color:black;" value="">Select...</option>                    
    </select>   
</td>
</tr>

The second dropdown shows the data that corresponds whatever the user selects from the first dropdown.

Here's the script:

<script type="text/javascript">
$(document).ready(function(){
$("#sel").change(function(){  
    $.ajax({         
    data: {id: $(this).val()},  
    type: "POST",  
     url:"<?= base_url() ?>BeneficiaryModule/showAvailable/"+ $(this).val(),  
    success:function(data){  
    $("#avail").html(data);  
    }       
   });  
});
});
</script>

In my controller:

public function showAvailable()
    {
    echo $id = $this->input->post('id', true);
    $data['package'] = $this->Beneficiary_model->getDtype($id);
    $output = null;
    foreach ($data['package'] as $row ) {
        $output.="<option value='".$row->package_id."'>".$row->package_name."</option>";
    }
    echo $output;        
}

And in my model:

public function getDtype($id){
    $this->db->select('package_id','package_name');
    $this->db->from('package_table');
    $this->db->where('package_type', $id);
    $query = $this->db->get();
    return $query->result();
}

When I tried to run the code and debug it through F12, it shows there that POST http://localhost:8999/samp/sampModule/showAvailable/2 404 (Not Found)

Why is it?

Can anyone help me with this error?

Answer 1

$("#sel").change(function(){  
    $.ajax({         
        data: {id: $(this).val()}, 
...
        url:"<?= base_url() ?>BeneficiaryModule/showAvailable/"+ $(this).val(),

Take $(this) out of ajax object. It points now to ajax object itself. Try:

$("#sel").change(function(){  
    var _id = $(this).val();
    $.ajax({         
        data: {id: _id},
...
        url:"<?= base_url() ?>BeneficiaryModule/showAvailable/"+ _id,      

**UPDATED**

Also, if the data is received from the server correctly but dropdown is still not rendered, the issue might be with the dataType property. There may be some problems with the response mime type, that cause the problem with the Intelligent Guess and data is treated as a json or xml string, so you can try to set it explicit:

$("#sel").change(function(){  
    var _id = $(this).val();
    $.ajax({         
        data: {id: _id},  
        type: "POST",  
        dataType: 'html',
        url:"<?= base_url() ?>BeneficiaryModule/showAvailable/"+ _id,  
        success:function(data){  
            $("#avail").html(data);  
        }       
    });

 });