Codeigniter cascading dropdown with data from database - php

Question

I'm need help in making a cascading dropdown that contains data from the database
I found a tutorial about this
and
I've tried this
Controller:
function ajax_call() {
if(!empty($_POST['table'])){
if ($_POST) {
$table = $_POST['table'];
$arrYear = $this->my_model->get_categories($table);
foreach ($arrYear as $years) {
$arrFinal[$years->category2 = $years->category2;
}
echo "<p>2nd Category:<br>";
echo form_dropdown('year',$arrFinal);
echo "</p><br>";
}
else
{
echo "<p>2nd Category:<br>";
echo form_dropdown('year','');
echo "</p><br>";
}
}
}
My view:
$options = array(
'' => 'Select',
'category_one' => 'Category 1',
'category_two' => 'Category 2',
);
echo form_error('table');
echo "<p>Category:<br> ";
echo form_dropdown('table', $options, $this->input->post('table'), 'id="table"');
echo "</p><br>";
Script inside my view:
<script type="text/javascript">
$(document).ready(function(){
$('#table').change(function(){
var selTable = $(this).val(); // selected name from dropdown #table
$.ajax({
url: "ajax_call", // or "resources/ajax_call" - url to fetch the next dropdown
async: false,
type: "POST", // post
data: "table="+selTable, // variable send
dataType: "html", // return type
success: function(data) { // callback function
$('#year').html(data);
}
})
});
});
</script>
My Model:
function get_categories($table) {
$this->db->select('category2')->from($table);
$query = $this->db->get();
return $query->result();
}
My only problem with this is that the 2nd dropdown isn't visible on the page when loaded, and it would only appear when I select on the 1st dropdown.
How can i make set it to appear on the page without selecting on the 1st dropdown?
Can anyone help?

Answer 1

Ok I couldn't figure out how to do what i wanted. So instead i searched around the deep parts of the internet and found this little tutorial that was actually what i needed.
http://supundharmarathne.wordpress.com/2013/03/13/simple-ajax-drop-down-filtering-with-codeigniter/

Answer 2

This is happening because the ajax call to populate your table is only being triggered after the table changes $('#table').change(function(){...}). Try populating the table without waiting for such change; maybe inside $(document).ready(function(){...})

Answer 3

you added a completely obsolete if ($_POST) to your code. You are already checking if a variable in $_POST exists, hence it can never be empty after that. That caused your ELSE statement to relate to the second IF, not the first.
function ajax_call() {
if(!empty($_POST['table'])){
$table = $_POST['table'];
$arrYear = $this->my_model->get_categories($table);
foreach ($arrYear as $years) {
$arrFinal[$years->category2 = $years->category2;
}
echo "<p>2nd Category:<br>";
echo form_dropdown('year',$arrFinal);
echo "</p><br>";
}
else
{
echo "<p>2nd Category:<br>";
echo form_dropdown('year','');
echo "</p><br>";
}
}
and that is why you should always indent your code correctly.