[eluser]jozeunico[/eluser]
Hi, well my problem it's probably that I don't understand good AJAX request with jQuery, even I don't have a clear idea about how to implement jQuery in CI.
I want to make dropdown in cascade (the most classic example it's when you choose your country and automatically populate a second dropdown with it states)
I have this view:
Code:
<html>
<head>
[removed][removed]
[removed][removed]
[removed]
$(document).ready(function() {
var options = {
target: '#estados', // target element(s) to be updated with server response
beforeSubmit: showRequest, // pre-submit callback
success: showResponse // post-submit callback
// other available options:
//url: url // override for form's 'action' attribute
//type: type // 'get' or 'post', override for form's 'method' attribute
//dataType: null // 'xml', 'script', or 'json' (expected server response type)
//clearForm: true // clear all form fields after successful submit
//resetForm: true // reset the form after successful submit
// $.ajax options can be used here too, for example:
//timeout: 3000
};
$('#myForm').ajaxForm(options);
$("#id_country").bind("change", function(){
alert("hola");
});
});
// bind form using 'ajaxForm'
// $("id_countrys").change('#myForm');
/*$('#myForm').submit(function() {
// inside event callbacks 'this' is the DOM element so we first
// wrap it in a jQuery object and then invoke ajaxSubmit
$(this).ajaxSubmit(options);
// !!! Important !!!
// always return false to prevent standard browser submit and page navigation
return false;
}); */
// });
function showRequest(){
//alert("hola");
return true;
}
function showResponse(){
//alert("hola2");
}
[removed]
</head>
<body>
<?php
$attributes = array('class' => 'email', 'id' => 'myForm');
echo form_open('comment', $attributes);
?>
Name: <select name="id_country" id="id_country">
<option value='1'>Mexico</option>
<option value='2'>E.U.A.</option>
</select>
<div id="estados">
Estado:
</div>
<input type="submit" value="Submit Comment"/>
<div id="comentario">
</div>
</form>
</form>
</body>
</html>
And this controller:
Code:
<?php
class Comment extends Controller {
function index(){
$this->load->database();
$this->load->model('UserModel');
$lista_estados = $this->UserModel->getEstados($_POST['id_country']);
$data="";
foreach ($lista_estados->result() as $row){
$data=$data.'<option value="'.$row->id.'">'.$row->estado.'</option>';
}
echo 'Estado:<select name="estado">'.$data.'</select>';
}
}
?>
and also here it's the model
Code:
<?php
class UserModel extends Model{
function getEstados($id_pais){
$sql = "SELECT estado from estados where id_pais='$id_country';";
$resultado = $this->db->query($sql);
return $resultado;
}
}
?>
The database just have 2 tables (estados and pais) here it's the sql for create them and fill them
Code:
CREATE TABLE IF NOT EXISTS `estados` (
`id_pais` int(11) NOT NULL,
`id` int(11) NOT NULL auto_increment,
`estado` varchar(35) collate utf8_unicode_ci NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=8 ;
--
-- Volcar la base de datos para la tabla `estados`
--
INSERT INTO `estados` (`id_pais`, `id`, `estado`) VALUES
(1, 1, 'Arteaga'),
(1, 2, 'Coahuila'),
(1, 3, 'Jalisco'),
(2, 4, 'Allende St'),
(2, 6, 'NavaYork'),
(2, 7, 'Sabinas City');
-- --------------------------------------------------------
--
-- Estructura de tabla para la tabla `pais`
--
CREATE TABLE IF NOT EXISTS `pais` (
`id` int(11) NOT NULL auto_increment,
`pais` varchar(35) collate utf8_unicode_ci NOT NULL,
PRIMARY KEY (`id`),
KEY `id` (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=3 ;
--
-- Volcar la base de datos para la tabla `pais`
--
INSERT INTO `pais` (`id`, `pais`) VALUES
(1, 'Mexico'),
(2, 'E.U.A');
The only thing that my app do it's to populate the a second dropdown, but until make click on the submit button, i want to send the ajax request when change the first dropdown.
Well, any help thank you and thanks for your time too and I'm sorry about my english.
form plugin:
http://malsup.com/jquery/form/#
