Drop Down Lists
This page demonstrates the usage of xajax in Code Igniter to create cascading drop down lists like the CascadingDropDown in Atlas. This example also shows how to handle the postback with initial values to populate the drop down lists.
Model: car_model.php
<?php
class car_model extends Model
{
function car_model()
{
parent::Model();
}
function get_car_makes()
{
$this->db->use_table('car_make');
$this->db->orderby('name', 'asc');
$query = $this->db->get();
return ($query);
}
function get_car_models($car_make_id)
{
$this->db->use_table('car_model');
$this->db->where('car_make_id', $car_make_id);
$this->db->orderby('name', 'asc');
$query = $this->db->get();
return ($query);
}
function get_car_colors($car_model_id)
{
$this->db->use_table('car_color');
$this->db->where('car_model_id', $car_model_id);
$this->db->orderby('name', 'asc');
$query = $this->db->get();
return ($query);
}
}
?>
Controller: dropdownlist.php
<?php
class dropdownlist extends Controller
{
var $data;
function dropdownlist()
{
parent::Controller();
$this->load->helper(array('form'));
$this->load->model('car_model', 'car_model', true);
}
function index()
{
// XAJAX
$this->_load_xajax();
// car makes
$this->data['car_make_dropdownlist'] = $this->build_car_make_dropdownlist('0');
// car models
$this->data['div_car_model'] = "";
// car colors
$this->data['div_car_color'] = "";
// submit button
$this->data['div_submit'] = "";
// result
$this->data['txt_result'] = "";
// load misc data
$this->_load_misc_data();
// load views
$this->_load_views();
$this->load->view('site_layout', $this->data);
}
function postback()
{
// XAJAX
$this->_load_xajax();
// car makes
$car_make_id = (isset($_POST['car_make'])) ? ($_POST['car_make']) : ('0');
$this->data['car_make_dropdownlist'] = $this->build_car_make_dropdownlist($car_make_id);
// car models
$car_model_id = (isset($_POST['car_model'])) ? ($_POST['car_model']) : ('0');
$this->data['div_car_model'] = $this->build_car_model_dropdownlist($car_make_id, $car_model_id);
// car colors
$car_color_id = (isset($_POST['car_color'])) ? ($_POST['car_color']) : ('0');
$this->data['div_car_color'] = $this->build_car_color_dropdownlist($car_model_id, $car_color_id);
// submit button
$this->data['div_submit'] = "<input type='submit' value='Submit' />";
// result
$this->data['txt_result'] = "PostBack: Make ID = $car_make_id, Model ID = $car_model_id, Color ID = $car_color_id";
// load misc data
$this->_load_misc_data();
// load views
$this->_load_views();
$this->load->view('site_layout', $this->data);
}
function _load_xajax()
{
$this->load->library('xajax');
$this->xajax->registerFunction(array("car_make_onchange", &$this, "car_make_onchange"));
$this->xajax->registerFunction(array("car_model_onchange", &$this, "car_model_onchange"));
$this->xajax->registerFunction(array("car_color_onchange", &$this, "car_color_onchange"));
$this->xajax->processRequests();
$this->data['xajax_js'] = $this->xajax->getJavascript(null, '/js/xajax.js');
}
function _load_misc_data()
{
$this->data['head_title'] = WEBSITE_NAME . " - Examples: Drop Down Lists";
$this->data['highlighted_controller'] = highlight_file("dropdownlist.php", TRUE);
// load example MVC
$example = new example('dropdownlist', true);
$this->data['highlighted_model'] = $example->model;
$this->data['highlighted_view'] = $example->view;
}
function _load_views()
{
$this->data['subheader'] = $this->load->view('examples_subheader', $this->data, true);
$this->data['sidebar'] = $this->load->view('examples_sidebar', $this->data, true);
$this->data['body_content'] = $this->load->view('dropdownlist_tpl', $this->data, true);
}
function car_make_onchange($car_make_id)
{
$objResponse = new xajaxResponse();
if ($car_make_id != '0')
{
$output = $this->build_car_model_dropdownlist($car_make_id, '0');
$objResponse->addAssign("div_car_model", "innerHTML", $output);
}
else
{
$objResponse->addAssign("div_car_model", "innerHTML", "");
}
$objResponse->addAssign("div_car_color", "innerHTML", "");
$objResponse->addAssign("txt_result", "innerHTML", "");
$objResponse->addAssign("div_submit", "innerHTML", "");
return $objResponse;
}
function car_model_onchange($car_model_id)
{
$objResponse = new xajaxResponse();
if ($car_model_id != '0')
{
$output = $this->build_car_color_dropdownlist($car_model_id, '0');
$objResponse->addAssign("div_car_color", "innerHTML", $output);
}
else
{
$objResponse->addAssign("div_car_color", "innerHTML", "");
}
$objResponse->addAssign("txt_result", "innerHTML", "");
$objResponse->addAssign("div_submit", "innerHTML", "");
return $objResponse;
}
function car_color_onchange($car_make, $car_model, $car_color, $car_color_id)
{
$objResponse = new xajaxResponse();
if ($car_color_id != '0')
{
$objResponse->addAssign("txt_result", "innerHTML", "You have choosen " . $car_color. " " . $car_make . " " . $car_model . ". Nice car!");
$objResponse->addAssign("div_submit", "innerHTML", "<input type='submit' value='Submit' />");
}
else
{
$objResponse->addAssign("txt_result", "innerHTML", "");
$objResponse->addAssign("div_submit", "innerHTML", "");
}
return $objResponse;
}
function build_car_make_dropdownlist($car_make_id)
{
$output = "<select id='car_make' name='car_make' style='width:200px;' onchange='xajax_car_make_onchange(this[this.selectedIndex].value);'>";
$output .= $this->new_option('Please select a make', '0', $car_make_id);
$query = $this->car_model->get_car_makes();
foreach ($query->result() as $row)
{
$output .= $this->new_option($row->name, $row->id, $car_make_id);
}
$output .= "</select'>";
return ($output);
}
function build_car_model_dropdownlist($car_make_id, $car_model_id)
{
$query = $this->car_model->get_car_models($car_make_id);
$output = "<select id='car_model' name='car_model' style='width:200px;' onchange='xajax_car_model_onchange(this[this.selectedIndex].value);'>";
$output .= $this->new_option('Please select a model', '0', $car_model_id);
if ($query->num_rows() > 0)
{
foreach ($query->result() as $row)
{
$output .= $this->new_option($row->name, $row->id, $car_model_id);
}
}
$output .= "</select'>";
return ($output);
}
function build_car_color_dropdownlist($car_model_id, $car_color_id)
{
$query = $this->car_model->get_car_colors($car_model_id);
$output = "<select id='car_color' name='car_color' style='width:200px;' onchange='xajax_car_color_onchange(document.getElementById(\"car_make\")[document.getElementById(\"car_make\").selectedIndex].text, document.getElementById(\"car_model\")[document.getElementById(\"car_model\").selectedIndex].text, this[this.selectedIndex].text, this[this.selectedIndex].value);'>";
$output .= $this->new_option('Please select a color', 0, $car_color_id);
if ($query->num_rows() > 0)
{
foreach ($query->result() as $row)
{
$output .= $this->new_option($row->name, $row->id, $car_color_id);
}
}
$output .= "</select'>";
return ($output);
}
function new_option($text, $value, $value_cmp)
{
$output = "<option value=\"" . $value . "\"";
if ($value === $value_cmp)
{
$output .= " selected";
}
$output .= ">" . $text . "</option>";
return ($output);
}
}
?>
View: dropdownlist_tpl.php
<script type="text/javascript">
<!--
xajax.loadingFunction = function(){xajax.$('loading_message').style.display='block';};
xajax.doneLoadingFunction = function(){xajax.$('loading_message').style.display='none';};
// -->
</script>
<div id="loading_message" class="loadingMessage">Loading ...</div>
<h1 id="introduction">Drop Down Lists</h1>
<p>
This page demonstrates the usage of <?=XAJAX_LINK_POPUP?> in <?=CODE_IGNITER_LINK_POPUP?> to create cascading drop down lists like the <a href="http://atlas.asp.net/atlastoolkit/CascadingDropDown/CascadingDropDown.aspx" target="_new">CascadingDropDown</a> in <a href="http://atlas.asp.net/" target="_new">Atlas</a>. This example also shows how to handle the postback with initial values to populate the drop down lists.
</p>
<form id="form_car" method="post" action="/dropdownlist/postback">
<table>
<tr>
<td>Make: </td>
<td><?=$car_make_dropdownlist?></td>
</tr>
<tr>
<td>Model: </td>
<td><div id="div_car_model"><?=$div_car_model?></div></td>
</tr>
<tr>
<td>Color: </td>
<td><div id="div_car_color"><?=$div_car_color?></div></td>
</tr>
<tr>
<td> </td>
<td><div id="div_submit"><?=$div_submit?></div></td>
</tr>
</table>
</form>
<br/>
<div id="txt_result"><?=$txt_result?></div>
<h1 id="introduction">Controller: car_model.php</h1>
<p>
<?=$highlighted_model?>
</p>
<h1 id="introduction">Controller: dropdownlist.php</h1>
<p>
<?=$highlighted_controller?>
</p>
<h1 id="introduction">View: dropdownlist_tpl.php</h1>
<p>
<?=$highlighted_view?>
</p>