[eluser]bubbafoley[/eluser]
[quote author="Leonel Folmer" date="1299742277"]I'm sorry for having caused such confusion, in fact only bubbafoley understand my question, this is exactly the example he mentioned that I seek. need a working example with CodeIgniter.[/quote]
I got your back. Here's my version.
application/controllers/welcome.php
Code:
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Welcome extends CI_Controller {
public function __construct()
{
parent::__construct();
$this->load->helper('url');
}
public function index()
{
$this->load->view('welcome_message');
}
public function combobox()
{
$name = $this->input->get('_name');
$value = $this->input->get('_value');
$this->load->model('combo_m');
echo json_encode( $this->combo_m->get_dropdown($name, $value) );
}
}
Code:
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Combo_m extends CI_Model {
function __construct()
{
parent::__construct();
$this->load->database();
}
function get_dropdown($name, $value)
{
$arr = array();
switch($name)
{
case 'country' :
$query = $this->db->where('country_id', $value)
->get('states');
if($query->num_rows() > 0)
{
foreach($query->result() as $row)
{
$arr[] = array($row->id => $row->name);
}
}
else
{
$arr[] = array('0' => 'No state');
}
break;
case 'state' :
$query = $this->db->where('state_id', $value)
->get('cities');
if($query->num_rows() > 0)
{
foreach($query->result() as $row)
{
$arr[] = array($row->id => $row->name);
}
}
else
{
$arr[] = array('0' => 'No city');
}
break;
default :
$arr[] = array(
array('1' => 'Data 1'),
array('2' => 'Data 2'),
array('3' => 'Data 3')
);
break;
}
return $arr;
}
}
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Welcome to CodeIgniter</title>
<script language="JavaScript" type="text/javascript" src="/assets/js/jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="/assets/js/jquery.chainedSelects.js"></script>
<script language="JavaScript" type="text/javascript">
$(function()
{
$('#country').chainSelect('#state','<?php echo site_url('welcome/combobox') ?>',
{
before:function (target) //before request hide the target combobox and display the loading message
{
$("#loading").css("display","block");
$(target).css("display","none");
},
after:function (target) //after request show the target combobox and hide the loading message
{
$("#loading").css("display","none");
$(target).css("display","inline");
}
});
$('#state').chainSelect('#city','<?php echo site_url('welcome/combobox') ?>',
{
before:function (target)
{
$("#loading").css("display","block");
$(target).css("display","none");
},
after:function (target)
{
$("#loading").css("display","none");
$(target).css("display","inline");
}
});
});
</script>
<style type="text/css">
body {
background-color: #fff;
margin: 40px;
font-family: Lucida Grande, Verdana, Sans-serif;
font-size: 14px;
color: #4F5155;
}
a {
color: #003399;
background-color: transparent;
font-weight: normal;
}
h1 {
color: #444;
background-color: transparent;
border-bottom: 1px solid #D0D0D0;
font-size: 16px;
font-weight: bold;
margin: 24px 0 2px 0;
padding: 5px 0 6px 0;
}
code {
font-family: Monaco, Verdana, Sans-serif;
font-size: 12px;
background-color: #f9f9f9;
border: 1px solid #D0D0D0;
color: #002166;
display: block;
margin: 14px 0 14px 0;
padding: 12px 10px 12px 10px;
}
#loading
{
position:absolute;
top:0px;
right:0px;
background:#ff0000;
color:#fff;
font-size:14px;
font-familly:Arial;
padding:2px;
display:none;
}
</style>
</head>
<body>
<div id="loading">Loading ...</div>
<h1>Chained select demo</h1>
<form name="formname" method="post" action="">
<!-- country combobox -->
<select id="country" name="country">
<option value="1" selected>France</option>
<option value="2">Romania</option>
<option value="3">Usa</option>
<option value="4">Brazil</option>
</select>
<!-- state combobox is chained by country combobox-->
<select name="state" id="state" style="display:none"></select>
<!-- city combobox is chained by state combobox-->
<select name="city" id="city" style="display:none"></select>
</form>
<p><br />Page rendered in {elapsed_time} seconds</p>
</body>
</html>
