I have the following controller and view. I am trying to learn jquery in codeigniter.
The code does not work. So I am hoping someone spot out what I am doing wrong and correct me.
Thanks in advance.
class PhpJqueryBook extends Controller
{
function __construct()
{
parent::Controller(); }
public function index()
{
... }
function dynamic_select_boxes(){
$this->load->view('dynamic_select_boxes');
}
function get_cities(){
switch(@$_POST['country']){
case 'ie': // { ireland
$cities=array('Cork', 'Dublin', 'Galway', 'Limerick',
'Waterford');
break;
// }
case 'uk': // { United Kingdom
$cities=array('Bath', 'Birmingham', 'Bradford',
'Brighton & Hove', 'Bristol',
'Cambridge', 'Canterbury', 'Carlisle',
'Chester', 'Chichester', 'Coventry',
'Derby', 'Durham', 'Ely', 'Exeter',
'Gloucester', 'Hereford', 'Kingston upon Hull',
/* and on and on! */
'Newport', 'St David\'s', 'Swansea');
break;
// }
default: // { else
$cities=false;
// }
}
if(!$cities)echo 'please choose a country first';
else echo '<select name="city"><option>'.join('</option> <option>',$cities).'</select>';
}
}
views/dynamic_select_boxes.php
<?php $this->load->view('inc/header')?>
<form>
<table>
<tr><th>Country</th><td>
<select name="country" id="country">
<option value=""> -- please choose -- </option>
<option value="ie">Ireland</option>
<option value="uk">Great Britain</option>
</select>
</tr>
<tr>
<th>Cities</th>
<td id="cities">please choose a country first</td>
</tr>
</table>
<?php $this->load->view('inc/footer')?>
And this produces the following html.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="http://127.0.0.1/ci_jquery/">
</head>
<body>
<form>
<table>
<tr><th>Country</th><td>
<select name="country" id="country">
<option value=""> -- please choose -- </option>
<option value="ie">Ireland</option>
<option value="uk">Great Britain</option>
</select>
</tr>
<tr>
<th>Cities</th>
<td id="cities">please choose a country first</td>
</tr>
</table>
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(setup_country_change);
function setup_country_change(){
$('#country').change(update_cities);
}
function update_cities(){
var country=$('#country').attr('value');
$.get('phpjquerybook/get_cities/'+country, show_cities);
}
function show_cities(res){
$('#cities').html(res);
}
</script>
</body>
</html>