dependent drop down list in are not working
my controller
<?php
class User extends CI_Controller {
public function __construct() {
parent::__construct();
$this -> load -> model('country_model');
}
function index()
{
$data['countries'] = $this -> country_model -> get_countries();
$this -> load -> view('post_view', $data);
}
function get_cities($country){
$this->load->model('city_model');
header('Content-Type: application/x-json; charset=utf-8');
echo(json_encode($this->city_model->get_cities($country)));
}
}
model
<?php
class Country_model extends CI_Model {
public function __construct() {
$this -> load -> database();
}
function get_countries() {
$this -> db -> select('id, country_name');
$query = $this -> db -> get('countries');
$countries = array();
if ($query -> result()) {
foreach ($query->result() as $country) {
$countries[$country -> id] = $country -> country_name;
}
return $countries;
} else
{
return FALSE;
}
}
}
my city model
<?php
class City_model extends CI_Model {
public function __construct() {
$this -> load -> database();
}
function get_cities($country = null){
$this->db->select('id, city_name');
if($country != NULL){
$this->db->where('country_id', $country);
}
$query = $this->db->get('cities');
$cities = array();
if($query->result()){
foreach ($query->result() as $city) {
$cities[$city->id] = $city->city_name;
}
return $cities;
}else{
return FALSE;
}
}
}
?>
and my view (post_view)
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">// <![CDATA[
$(document).ready(function(){
$('#country').change(function(){ //any select change on the dropdown with id country trigger this code
$("#cities > option").remove(); //first of all clear select items
var country_id = $('#country').val(); // here we are taking country id of the selected one.
$.ajax({
type: "POST",
url: "Co/"+country_id, //here we are calling our user controller and get_cities method with the country_id
success: function(cities) //we're calling the response json array 'cities'
{
$.each(cities,function(id,city) //here we're doing a foeach loop round each city with id as the key and city as the value
{
var opt = $('<option />'); // here we're creating a new select option with for each city
opt.val(id);
opt.text(city);
$('#cities').append(opt); //here we will append these new select options to a dropdown with the id 'cities'
});
}
});
});
});
// ]]>
</script>
</head>
<body>
<form method="get">
<label for="category">Parent Category</label>
<select name="countries" id="parent_cat">
<?php foreach($countries as $m)
{
?>
<option value="<?php echo $m->id; ?>"><?php echo $m->category_name; ?></option>
<?php
}
?>
</select>
</form>
<?php $countries['#'] = 'Please Select'; ?>
<label for="country">Country: </label>
<?php form_dropdown('country_id', $countries, '#', 'id="country"'); ?><br />
<?php $cities['#'] = 'Please Select'; ?>
<label for="city">City: </label><?php echo form_dropdown('city_id', $cities, '#', 'id="cities"'); ?><br />
</body>
</html
my country db
id country_name
1 India
2 Sri Lanka
my city db
id city_name country_id
1 Mumbai 1
2 Kolkatta 1
3 Colombo 2
4 Matara 2
Because you did not create it, add this line to your views/post_view.php file :
<?php echo form_dropdown('country_id', $countries, '') ?>
Related
I'm trying to make a select option in CodeIgniter, and want to make it autocomplete fill. How do I do that?
This is my code:
Model:
public function get_nama_customer(){
$data = array();
$query = $this->db->get('tabel_customer');
if($query->num_rows() > 0){
foreach($query->result_array() as $row){
$data[] = $row;
}
}
$query->free_result();
return $data;
}
Controller:
public function add_data()
{
$this->load->model('model_tabel_material');
$data['tabel_customer'] = $this->model_tabel_material->get_nama_customer();
$this->load->view('datamaster/tabel_material/v_add_material', $data);
}
public function do_add()
{
$nama_customer = $_POST['nama_customer'];
$data_add = array(
"nama_customer" => $nama_customer,
);
$temp = $this->model_tabel_material->insert_data('tabel_material', $data_add);
if($temp >=1){
redirect('tabel_material/controller_tabel_material/index');
}
}
View:
<select class="form-control" name="nama_customer" id="nama_customer" required>
<?php if(count($tabel_customer)){ ?>
<option value=''>--Pilih Customer--</option>
<?php foreach ($tabel_customer as $list){ ?>
<?php
echo "<option value='".$list['nama_customer']."'>".$list['nama_customer']."</option>";
?>
<?php } ?>
<?php } ?>
</select>
controller
car.php
<?php
class Car extends CI_Controller {
public function __construct()
{
parent::__construct();
$this->load->database();
$this->load->helper('url');
$this->load->helper('form');
$this->load->model('company_model');
}
public function index()
{
//starts by running the query for the countries
//dropdown
$data['companydrop'] = $this->company_model->company();
//loads up the view with the query results
$this->load->view('car_view', $data);
}
//call to fill the second dropdown with the cities
public function car_model()
{
//set selected country id from POST
echo $company_id = $this->input->post('company_id',TRUE);
//run the query for the cities we specified earlier
$cardata['cardrop']=$this->company_model->car($company_id);
print_r($cardata);
$output = null;
foreach ($cardata['cardrop'] as $row)
{
//here we build a dropdown item line for each
// query result
$output .= "<option value='".$row->car_model."'>".$row->car_model."</option>";
}
echo $output;
}
}
?>
model
company_model
<?php
class Company_model extends CI_Model {
public function __construct()
{
$this->load->database();
}
//fill your contry dropdown
public function company()
{
$this->db->select('company_id,company_name');
$this->db->from('company');
$query = $this->db->get();
// the query mean select cat_id,category from
//category
foreach($query->result_array() as $row){
$data[$row['company_id']]=$row['company_name'];
}
// the fetching data from database is return
return $data;
}
//fill your cities dropdown depending on the selected city
public function car($company_id=string)
{
$this->db->select('car_id,car_model');
$this->db->from('car');
$this->db->where('company',$company_id);
$query = $this->db->get();
return $query->result();
}
}
?>
view
car_view
<html>
<head>
<title>car dealers</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#companydrop").change(function(){
/*dropdown post *///
$.ajax({
url:"<?php echo base_url();?>index.php/car/car_model",
data: {id:$(this).val()},
type: "POST",
success:function(data){
$("#cardrop").html(data);
alert(data);
}
});
});
});
</script>
<style>
body{
no-repeat;
background:url(../../../video-fallback-background.jpg)
}
</style>
</head>
<body>
<!--company dropdown-->
<?php echo form_dropdown('companydrop',$companydrop,'','class="required" id="companydrop"'); ?>
<br />
<br />
<!--car dropdown-->
<select name="cardrop" id="cardrop">
<option value="">Select</option>
</select>
<br />
</body>
</html>
dynamic dropdown is not working as the first select which is the
company name is working as it is fetched from database,but car model is not working,it not fetched to the dropdown.i need to fetch the car company model from database and then after selecting the company the model of that specified company has to be listed in the second dropdown.i have created database in phpmyadmin and created two table car and company,in company copany_id and company_name where as in car has car_id,car_name and company_id
Check this sample code for creating dropdown in codeigniter.
<?php
$js = 'id="unicode" class="form-control"';
$unicode = array(
'2' => 'No',
'1' => 'Yes'
);
echo form_dropdown('unicode', $unicode, set_value('unicode'), $js);
?>
Here Dropdown id is unicode,class is form-control.
Html will look like :
<select name="unicode" id="unicode" class="form-control">
<option value="2">No</option>
<option value="1">Yes</option>
</select>
You can get you values from db in an array and then store it in a variable like $unicode.Hope this helps.Check this ref link
For setting another dropdown based on first dropdown:
$("#dropdown1").change(function () {
var end = this.value;
$('#dropdown2').val(end );
});
In Your Car Controller Please remove print_r($cardata); first.
Then see in your console what response you are getting from the call. I suggest you to get data in json format and parse it on client end. It is the best practice.
i corrected the code and finally it worked,i will post the correct code, if it helps anyone in future.thanks to everyone who tried to help me..
controller
car.php
<?php
class Car extends CI_Controller {
public function __construct()
{
parent::__construct();
$this->load->database();
$this->load->helper('url');
$this->load->helper('form');
$this->load->model('company_model');
}
public function index()
{
$data['companydrop'] = $this->company_model->company();
$this->load->view('car_view', $data);
}
public function car_model()
{
$company_id = $this->input->post('company_id',TRUE);
$cardata['cardrop']=$this->company_model->car($company_id);
$output = null;
foreach ($cardata['cardrop'] as $row)
{
$output .= "<option value='".$row->car_model."'>".$row->car_model."</option>";
}
echo $output;
}
}
?>
model
company_model
<?php
class Company_model extends CI_Model {
public function __construct()
{
$this->load->database();
}
public function company()
{
$this->db->select('company_id,company_name');
$this->db->from('company');
$query = $this->db->get();
foreach($query->result_array() as $row){
$data[$row['company_id']]=$row['company_name'];
}
return $data;
}
public function car($company_id)
{
$this->db->select('car_id,car_model');
$this->db->from('car');
$this->db->where('company_id',$company_id);
$query = $this->db->get();
return $query->result();
}
}
?>
view
car_view
<html>
<head>
<title>car dealers</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#companydrop").change(function(){
/*dropdown post *///
$.ajax({
url:"<?php echo base_url();?>index.php/car/car_model",
data: {company_id:$(this).val()},
type: "POST",
success:function(data){
$('#cardrop option[value!=0]').remove()
$("#cardrop").append(data);
}
});
});
});
</script>
<style>
body{
no-repeat;
background:url(../../../video-fallback-background.jpg)
}
</style>
</head>
<body>
<center><font color="#333366"><strong></strong><h2>CR Motors</h2></font></center>
<center><font color="#FF8000"><h3>Select the car to purchase...</h3></center></font>
<!--company dropdown-->
<tr>
<td>
<font color="#00FF99">
Select the company</font>
<?php echo form_dropdown('companydrop',$companydrop,'','class="required" id="companydrop"'); ?> </td>
</tr>
<br />
<br />
<!--car dropdown-->
<tr>
<td>
<font color="#00FF99">
Select the model</font>
<select name="cardrop" id="cardrop">
<option value="0">Select</option>
</select>
</td>
</tr>
<br />
</body>
</html>
i'm trying populate all the course present in the database which has higher course_id than the selected one in first dropdown.
course.php (controller)
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Course extends MX_Controller {
public function __construct() {
parent::__construct();
$this -> load -> model('course_model');
}
public function index() {
$data['courses'] = $this -> course_model -> get_course();
$this -> load -> view('dropdisplay', $data);
}
public function get_next_course($course){
$this->load->model('nextcourse_model');
header('Content-Type: application/x-json; charset=utf-8');
echo(json_encode($this->nextcourse_model->get_course($course)));
}
}
course_model.php (model)
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Course_model extends CI_Model {
public function __construct() {
$this -> load -> database();
echo "course_model <br/><br/>";
}
function get_course()
{
$this -> db -> select('course_id, course_name');
$query = $this -> db -> get('course');
$courses = array();
if ($query -> result())
{
foreach ($query->result() as $course)
{
$courses[$course -> course_id] = $course -> course_name;
}
return $courses;
}
else
{
return FALSE;
}
}
}
?>
nextcourse_model.php (model)
<?php if (!defined('BASEPATH')) exit('No direct script access allowed');
class Nextcourse_model extends CI_Model {
public function __construct() {
$this->load->database();
echo "nextcourse_model <br/><br/>";
}
function get_course($cour, $tree = null) {
$this->db->select('course_id, course_name');
$this-db->from('course');
$this->db->where('course_id >', $cour);
if ($tree != NULL) {
$this->db->where('course_id', $cour);
}
$query = $this->db->get('course');
$nextcourses = array();
if ($query->result()) {
foreach ($query->result() as $value) {
$nextcourses[$value->course_id] = $value->course_name;
}
return $nextcourses;
} else {
return FALSE;
}
}
}
?>
dropdisplay.php (view)
<html>
<head>
<title>Course</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">// <![CDATA[
// $(document).ready(function(){
var course_id;
$(document).ready(function() {
$('#course').change(function() {
$("#whatnext > option").remove();
// course_id = $('#course').val();
course_id = $('this').val();
});
});
//$('#check').change(function(){
// $("#whatnext > option").remove();
//var course_id = $('#course').val();
function getcondition(id)
{
if (id == 1)
{ //alert(id);
// alert(course_id);
$.ajax({
type: "POST",
url: "localhost/coursepath/course/get_next_course/" + course_id, // passing this course_id to course controller
//data: '&course_id='+course_id,
success: function(nextcourses)
{
alert(course_id);
$.each(nextcourses, function(id, course)
{
var opt = $('<option />');
opt.val(id);
opt.text(course);
$('#whatnext').append(opt);
});
}
});
}
else if (id == 2)
{
// alert("course_id=" + course_id);
}
}
// ]]>
</script>
</head>
<body>
<?php $courses['#'] = 'Please Select'; ?>
<label for="course">What am I: </label>
<?php echo form_dropdown('course_id', $courses, '#', 'id="course"'); ?><br />
<label for="next_course">Category: </label>
<select id="check" class="bot" onchange="getcondition(this.value);">
<!-- <select id="check" class="bot"> -->
<option value="" selected=selected> Select Category</option>
<option value="1"> Course</option>
<option value="2"> Job</option>
</select><br />
<?php $whatnext['#'] = 'Please Select'; ?> <br />
<label for="next_course">What I want to be: </label>
<?php echo form_dropdown('stream_id', $whatnext, '#', 'id="whatnext"'); ?><br />
</body>
</html>
I am trying to create ajax dropdown in three layers state, city and location in codeigniter 2.1.4. The first layer is working fine I am able to fetch the city list from state id but unable to fetch location from city id. I thing I am doing some mistake in the ajax I need help. My code is mentioned below:
view
<div id="innerdiv1">
<label>State</label>
<br />
<select name="state_id" id="state_id">
<option value="">-- Select State --</option>
<?php foreach ($states as $all_states): ?>
<option value="<?=$all_states['id'];?>"><?=$all_states['state'];?></option>
<?php endforeach ?>
</select>
</div>
<div id="innerdiv2">
<label>City</label>
<br />
<div id="city">
<select name="city_id" id="city_id">
<option value="">-- Select City-- </option>
</select>
</div>
</div>
<div id="innerdiv1">
<label>Location</label>
<br />
<div id="location">
<select name="location_id" id="location_id">
<option value="">-- Select Location-- </option>
</select>
</div>
</div>
Ajax
$(document).ready(function () {
$('#state_id').change(function () {
var selState = $(this).val();
console.log(selState);
$.ajax({
url: "pages/get_cities",
async: false,
type: "POST",
data: "state="+selState,
dataType: "html",
success: function(data) {
$('#city').html(data);
}
})
});
$('#city_id').change(function () {
var selCity = $(this).val();
alert(selCity);
console.log(selCity);
$.ajax({
url: "pages/get_locations",
async: false,
type: "POST",
data: "cities="+selCity,
dataType: "html",
success: function(data) {
$('#location').html(data);
}
})
});
});
</script>
city model
<?php
class City_model extends CI_Model {
public function __construct() {
$this -> load -> database();
//$this->output->enable_profiler(TRUE);
}
function get_cities($state){
if($state != NULL){
$this->db->where('state_id', $state);
$query = $this->db->get('city');
$cities = array();
$html = '';
if($query->result())
{
$html .= '<select id="city_id" name="city_id">';
$html .= '<option value="">-- Select City --</option>';
foreach ($query->result() as $city)
{
//$cities[$city->id] = $city->city;
$html .= '<option value="'.$city->id .'">'.$city->city.'</option>';
}
$html .= '</select>';
return $html;
}
else
{
return FALSE;
}
}
else
{
$html = '<option value="">--Select City--</option>';
return $html;
}
}
}
Controller
class Pages extends CI_Controller {
public function __construct()
{
parent::__construct();
$this->load->model('home_model');
$this->load->model('sub_cat_model');
$this->load->model('state_model');
$this->load->model('city_model');
$this->load->model('location_model');
$this->load->library('email');
}
public function index()
{
$data['state'] = $this->home_model->get_state();
$data['title'] = 'Rimi Classified - Home';
$this->load->view('templates/header', $data);
$this->load->view('index', $data);
$this->load->view('templates/footer', $data);
}
public function sign_up()
{
$data['states'] = $this->state_model->get_states();
$data['error'] = '';
$data['title'] = 'Rimi Classified - Sign up';
$this->load->view('templates/header1', $data);
$this->load->view('sign-up', $data);
$this->load->view('templates/footer', $data);
}
public function get_cities()
{
$state_id = $this->input->post('state');
echo $this->city_model->get_cities($state_id);
}
public function get_locations()
{
$city_id = $this->input->post('cities');
echo $this->location_model->get_locations($city_id);
}
}
Replace
$('#city_id').live("change", function () {
with below code
$(document).on("change", "#city_id", function(){
try to add an alert statement in your first ajax call's success function. also add an error function to know that the first AJAX call is completing successfully.
Use the documentation from here to check if you've correctly implemented the AJAX model.
Jquery-Ajax
i am suffering greatly but still unable to make a dependent dropdown box in Codeigniter .
Here is the schema :
groups(group_id,group)
forum(forum_id,subject)
group_forum(group_id,forum_id)
Here is my code :
model
function get_group(){
$query = $this->db->get('group');
return $query->result();
}
function get_subject_by_group($id)
{
$subjects=array();
$this->db->from('forum');
$this->db->join('group_forum','group_forum.forum_id=forum.forum_id','group_id='.$id);
$q=$this->db->get();
foreach($q->result() as $y)
{
$subjects[$y['forum_id']] = $y['subject'];
}
return $subjects;
}
}
Controller:
<?php
class C_control_form extends CI_Controller {
function add_all(){
#Validate entry form information
$this->load->model('Model_form');
$this->form_validation->set_rules('f_group', 'Group', 'trim|required');
$this->form_validation->set_rules('f_forum', 'Forum', 'trim|required');
$data['groups'] = $this->Model_form->get_group(); //gets the available groups for the dropdown
if ($this->form_validation->run() == FALSE)
{
$this->load->view('header_for_combo',$data);
$this->load->view('view_form_all', $data);
$this->load->view('footer_for_combo',$data);
}
else
{
#Add Member to Database
$this->Model_form->add_all();
$this->load->view('view_form_success');
}
}
function get_subjects($group)
{
//echo "hi";
$this->load->model('Model_form');
header('Content-Type: application/x-json; charset=utf-8');
echo (json_encode($this->Model_form->get_subject_by_group($group)));
}
}
?>
View
<html>
<head>
<script type="text/javascript" src="<?php echo base_url("js/jquery-1.7.2.min.js"); ?>" ></script>
<script type="text/javascript">
// $('#f_group, #f_forum').hide();
$(document).ready(function(){
$('#f_group').change(function(){
var group_id = $('#f_group').val();
if (group_id != ""){
var post_url = "index.php/c_control_form/get_subjects/"+group_id;
// var post_url = "<?php echo base_url();?>"+"c_control_form/get_subjects"+group_id;
$.ajax({
type: 'POST',
url: post_url,
dataType : 'json',
success: function(subjects) //we're calling the response json array 'cities'
{
$("#f_forum > option").remove();
// $('#f_forum').empty();
// $('#f_forum, #f_forum_label').show();
$.each(subjects,function(forum_id,subject)
{
var opt = $('<option/>'); // here we're creating a new select option for each group
opt.val(forum_id);
//alert(id);
opt.text(subject);
$('#f_forum').append(opt);
});
} //end success
}); //end AJAX
} else {
$('#f_forum').empty();
// $('#f_forum, #f_forum_label').hide();
}//end if
}); //end change
});
</script>
</head>
<body>
<?php echo form_open('c_control_form/add_all'); ?>
<p>
<label for="f_group">Group<span class="red">*</span></label>
<select id="f_group" name="f_group">
<option value=""></option>
<?php
foreach($groups as $group){
echo '<option value="' . $group->group_id . '">' . $group->group_name.'</option>';
}
?>
</select>
</p>
<p>
<label for="f_forum">Subject<span class="red">*</span></label>
<select id="f_forum" name="f_forum" id="f_forum_label">
<option value=""></option>
</select>
</p>
<?php echo form_close(); ?>
</body>
Please change
$subjects[$y['forum_id']] = $y['subject'];
to
$subjects[$y->forum_id] = $y->subject;
in the model file. Also spaces or newlines in model php file after and before the php tags.
EDIT: Added below
function(subjects){
var select = $('#f_forum').empty();
$.each(subjects.values, function(i,item) {
select.append( '<option value="'
+ item.id
+ '">'
+ item.name
+ '</option>' );
});