We Keep Coding

Dynamically load second bootstrap selectpicker based on user input of first selectpicker in codeigniter

I want to load data from the database to the second selectpicker based on the input id of the first selectpicker. In the database id of the first selectpicker is the foreign key of the second selectpicker.
View file
1st selectpicker
<select name="depot_select" id="depot_select" class="selectpicker" data-live-search="true" value="<?php echo set_value('depot_select');?>">
<option value="">No Depot Selected</option>
<?php echo $depots['depot'] ?>
</select>
2nd selectpicker
<select class="selectpicker" data-live-search="true" name="route_select" id="route_select" value="<?php echo set_value('route_select');?>">
<option value="">No Route Selected</option>
<?php echo $routes['route']?>
</select>
Ajax
function fetchDepot(){
$.ajax({
type :'POST',
url : '<?php echo base_url('transporter_dashboard/bus/get_depots'); ?>',
dataType: 'json',
success : function(data)
{
$('#depot_select').empty();
var example = $('#depot_select').selectpicker('val', data['data']);
console.log("depot_select" + example);
if(!$.isEmptyObject(data))
{
$.each(data, function(i,o)
{
var depot = $('#depot_select').append('<option value="'+ o['dpt_id'] +'">'+o['dpt_name'] +' </option>');
});
}
$('#depot_select').selectpicker('refresh');
fetchRoute();
},
error: function()
{
alert('error occour..........!');
}
});
}
function fetchRoute()
{
$.ajax(
{
type :'POST',
url :'<?php echo base_url('transporter_dashboard/bus/get_routes'); ?>',
data : { dpt_id : $('#depot_select option:selected').val()},
dataType: 'json',
success : function(data)
{
$('#route_select').empty();
$('#route_select').selectpicker('val', data['data']);
if(!$.isEmptyObject(data))
{
$.each(data, function(i,o)
{
var route = $('#route_select').append('<option value="'+ o['rot_id'] +'">'+ o['rot_name'] +'</option>');
});
}
$('#route_select').selectpicker('refresh');
},
error: function(data){
alert('error occour..........!');
}
});
}
Controller
function get_depots()
{
echo json_encode($this->bus_model->get_depots());
}
function get_routes()
{
if ($this->input->post('dpt_id'))
{
echo json_encode($this->bus_model->get_routes($this->input->post('dpt_id')));
}
}
Model
function get_depots()
{
$this->db->select('*');
$data = $this->db->get('depots')->result_array();
return $data;
}
function get_routes($id)
{
$data = array();
$this->db->select('*');
$this->db->where('dpt_id',$id);
$data = $this->db->get('routes')->result_array();
return $data;
}
According to the above code, only the id of the first option goes to the backend every time despite what option is selected. Then database load only those data which belongs to the id of the first option.

Finally, I found the answer to this question. We need to call fetchRoute() function inside of the $( document ).ready()

Dependent Dropdownlist in codeigniter

I need to fill the states list on a dropdown when country is selected.
My code
view
<div class="form-group col-md-6">
<label for="inputEmail4" class="uppercase pull-left m-0">Country</label>
<!-- <input type="text" id="country" name="country" required value="<?php echo $row_all->country;?>" placeholder="Please enter your country name"> -->
<select name="country" id="country" required>
<option value="">--select country--</option>
<?php
if($countries->num_rows()>0)
{
foreach ($countries->result() as $countries_row) {
?>
<option <?php if($countries_row->id==$row_all->countryid){ echo "selected"; }?> value="<?php echo $countries_row->id;?>"><?php echo $countries_row->name;?></option>
<?php
} } ?>
</select>
</div>
<div class="form-group col-md-6">
<label for="inputPassword4" class="uppercase pull-left m-0">State</label>
<select name="state" id="state" >
</select>
</div>
<script type='text/javascript'>
// baseURL variable
var baseURL= "<?php echo base_url();?>";
$(document).ready(function(){
// City change
$('#country').change(function(){
var country = $(this).val();
alert(country);
// AJAX request
$.ajax({
url:'<?php echo base_url()?>main/get_states',
method: 'post',
data: {country: country},
dataType: 'json',
success: function(response){
alert(response);
// Remove options
//$('#state').find('option').not(':first').remove();
//$('#city').find('option').not(':first').remove();
// Add options
$.each(response,function(get_states,data){
$('#state').append('<option value="'+data['id']+'">'+data['name']+'</option>');
});
}
});
});
});
</script>
controller
function get_states()
{
$this->load->helper('url');
$postData = $this->input->post();
$this->load->model('candidate_model');
$data = $this->candidate_model->fetch_states($postData);
echo json_encode($data);
}
Model
candidates_model
function fetch_states($postData)
{
//$query = $this->db->query("SELECT * FROM states");
//return $query;
$response = array();
// Select record
$this->db->select('id,name');
$this->db->where('country_id', $postData['country']);
$q = $this->db->get('states');
$response = $q->result_array();
$response= json_encode($response);
return $response;
}
Model returns value from database and it is also can be access from the view.
I alert the response and it returns array like {"id":"36","name":"delhi"}.
I need to fill this results to dropdown with id states
Any help? Thanks in advance

Try This,
Model :
function fetch_states($country)
{
$this->db->select('id,name');
$this->db->where('country_id', $country);
$q = $this->db->get('states');
if ($q->num_rows() > 0) {
return $q->result_array();
}else{
return array();
}
}
Controller :
function get_states()
{
$this->load->helper('url');
$postData = $this->input->post();
$this->load->model('candidate_model');
$country = $postData['country'];
$state = $this->candidate_model->fetch_states($country);
$respose_array['state'] = $state;
echo json_encode($response_array);
exit();
}
View ajax code :
$.ajax({
url:'<?php echo base_url()?>main/get_states',
method: 'post',
data: {country: country},
dataType: 'json',
success: function(response){
$.each(JSON.parse(response.state),function(i,item){
$('#state').append('<option value="'+item.id+'">'+item.name+'</option>');
});
}
});

Dynamic drop down using single table in codeIgniter

Table
Here when I select Category 1 from drop down I should get district names which comes under Category 1 and for Category 2 I should get districts of Category 2 and so on....
As of now in my code i'm pulling out all district names from my district table master by using district codes. But I should get district names based on category selection.
View:
<select class="form-control" name="category" id='cat_id'>
<?php
foreach($query1 as $row)
{
echo '<option value="'.$row->category.'">'.$row->category.'</option>';
}
?>
</select>
<select name="placename" id="placename">
<?php
foreach($query2 as $row)
{
echo '<option value="'.$row->district_name.'">'.$row-
>district_name.'</option>';
}
?>
</select>
Model:
function viewcatplace()
{
$this->db->select("district.district_name");
$this->db->from('district');
$this->db->join('jc_place_master', 'district.district_code =
jc_place_master.district');
$query = $this->db->get();
return $query->result();
}
Controller:
public function viewcatplace()
{
$this->load->model('JcMeetingExpense_model');
$data['query1'] = $this->JcMeetingExpense_model->viewcatprice();
$data['query2'] = $this->JcMeetingExpense_model->viewcatplace();
$this->load->view('JcMeetingExpense/place_view',$data);
}

You can use this demo for your solution : https://www.codexworld.com/dynamic-dependent-dropdown-codeigniter-jquery-ajax/

It can be only done by ajax:
In controller:
public function index()
{
$web = array();
$web['title'] = 'Select tool';
$web['content'] = 'web/category_index';
// $web['data'] = $this->Common_model->get_all('category','*','','');
$web['data'] = $this->db->query('SELECT DISTINCT category FROM category')->result();
$this->load->view('web_template', $web);
}
Load the category data in select option:
<select class="form-control" id="select_category">
<option value="" disabled selected>Select category</option>
<?php if (isset($data) && !empty($data)) : ?>
<?php foreach ($data as $key => $value) : ?>
<option value="<?php echo $value->category; ?>"><?php echo $value->category; ?></option>
<?php endforeach; ?>
<?php endif; ?>
</select>
<select class="form-control" id="append_district"></select>
Using jquery change event get the data using ajax call:
<script type="text/javascript">
$(document).on('change',"#select_category",function (e) {
var optVal= $("#select_category option:selected").val();
if (optVal) {
$.ajax({
type: "post",
url: "getCategoryDetails",
cache: false,
data: {'category' : optVal},
success: function(json){
try {
var obj = jQuery.parseJSON(json);
$('#append_district').empty();
var append_data = '';
if (obj.length > 0) {
$.each(obj, function( index, value ) {
append_data += '<option value="'+value.district+'">'+value.district+'</option>'
});
$('#append_district').append(append_data);
}
} catch(e) {
console.log('Exception while request..');
}
},
error: function(){
console.log('Error while request..');
}
});
}
});
</script>
The data can be get by JSON format.In controller add this method:
public function getCategoryDetails() {
$category = $_POST['category'];
$categoryData = $this->db->query('SELECT district FROM category where category="'.$category.'"')->result();
echo json_encode ($categoryData) ;
}

Receive post data ajax with php

I'm trying to receive post data with php from ajax in same page but seems like i have some issues that i have no idea to solve them
here is my html/php code :
<select style="width:auto; margin-left:6%;" class="form-control" name="n-omran-select" id="num_omrane">
<option value='' >Choisir...</option>
<?php
while ($row = $result->fetch_assoc())
{
echo "<option value=".$row['N_omran'].">".$row['N_omran']."</option>";
}
?>
</select><br>
<?php
if (isset($_POST["selectName"])) { // try to receive post values but it seems that's not working
$selectOption = $_POST["selectName"];
$query = "SELECT nom,prenom,tel,adress,matricule_assu FROM `personnel` WHERE N_omran ='$selectOption'";
$result = mysqli_query($db,$query);
$row=mysqli_fetch_array($result,MYSQLI_ASSOC);
if ($row) {
echo " <h4>Nom : {$row['nom']}</h4>
<h4>Prénom : {$row['prenom']}</h4>
<h4>Téléphone : {$row['tel']} </h4>
<h4>Maticule d'assurance : {$row['matricule_assu']}</h4>
<h4>Adresse : {$row['adress']}</h4>";
}
} ?>
And here is my Ajax post request :
$('#num_omrane').on('change', function () {
var n_omrane = $('#num_omrane').val();
if(n_omrane != ''){
$.ajax({
type: "POST",
url: "index.php",
data: {selectName: n_omrane},
success: function () {
alert("Post request successfully done")
}
});
}
});

the code below can replace all your data with the new ones with clean writing :)
// get data from Database
<?php
if (isset($_POST["selectName"])) { // try to receive post values but it seems that's not working
$selectOption = $_POST["selectName"];
$query = "SELECT nom,prenom,tel,adress,matricule_assu FROM `personnel` WHERE N_omran ='$selectOption'";
$result = mysqli_query($db,$query);
$row = mysqli_fetch_array($result,MYSQLI_ASSOC);
} ?>
// show rows to be selected
<select style="width:auto; margin-left:6%;" class="form-control" name="n-omran-select" id="num_omrane">
<option value='' >Choisir...</option>
<?php while ($row = $result->fetch_assoc()) { ?>
<option value="<?= $row['N_omran'] ?>"> <?= $row['N_omran'] ?></option>
<?php } ?>
</select><br>
// show recieved data
<?php if ($row) { ?>
<div id="informations">
<h4>Nom : <span id="nom"><?= $row['nom'] ?></span></h4>
<h4>Prénom : <span id="prenom"><?= $row['prenom'] ?></span></h4>
<h4>Téléphone : <span id="tel"><?= $row['tel'] ?> </span></h4>
<h4>Maticule d'assurance : <span id="matricule_assu"><?= $row['matricule_assu'] ?></span></h4>
<h4>Adresse : <span id="adress"><?= $row['adress'] ?></span></h4>
</div>
<?php } ?>
// script for making ajax call
<script>
$('#num_omrane').on('change', function () {
var n_omrane = $('#num_omrane').val();
if(n_omrane != ''){
$.ajax({
type: "POST",
url: "index.php",
data: {selectName: n_omrane},
success: function (response) {
$("#nom").text(response.nom);
$("#prenom").text(response.prenom);
$("#tel").text(response.tel);
$("#matricule_assu").text(response.matricule_assu);
$("#adress").text(response.adress);
}
});
}
});
</script>

$json_data=file_get_contents('php://input');
$json=json_decode($json_data,true);
if(array_key_exists("selectName",$json)){
$selectOption =$json["selectName"];
}

Choosing a chained select option with jquery using Codeigniter

I'm not much good at jquery and ajax, and I'm now having difficulties on a select box. I use CI and My code is below.
Another select box "category" data will be show according to the "brand". How can I carry data from "brand" and show data in "category" with jquery?
View
<select name="brand" class="form-control" id="brand" required>
<?php
if($items) {
foreach($items as $key) {
?>
<option value="<?php echo $key->brand_id ?>">
<?php echo $key->brand_name ?>
</option>
<?php
}
}
?>
</select>
<select name="category" class="form-control" id="category" required>
</select>
Ajax
<script>
$(function() {
$("#brand").on('change', function() {
var brand = $(this).val();
$.ajax ({
type: "post",
url: "<?php echo base_url(); ?>receiving/showCategory",
dataType: 'json',
data: 'brand='+brand,
success: function(msg) {
var options;
for(var i = 0; i<msg.length; i++) {
options = '<option>'+msg.category[i].category_name+'</option'>;
}
$('#category').html(options);
}
});
});
});
</script>
Controller
function showCategory() {
$brand_id = $this->input->post('brand');
$data['category'] = $this->item_model->category($brand_id);
echo json_encode($data);
}
My category table contains: category_id, category_name, brand_id.

use ajax onchange. .in your view file..
<select name="brand" class="form-control" id="brand" required onchange="brand(this.value,'divid')">
<?php
if($items) {
foreach($items as $key) {
?>
<option value="<?php echo $key->brand_id ?>">
<?php echo $key->brand_name ?>
</option>
<?php
}
}
?>
</select>
<div id="divid">
<select name="category" class="form-control" id="category" required>
<option>Select Category</option>
</select>
</div>
<script>
function brand(id,divid)
{
$.ajax({
type: "POST",
data: "pid="+id,
url: '<?php echo base_url(); ?>receiving/showCategory ?>',
success: function(html){
$('#'+divid).html(html);
}
});
}
</script>
in your function showCategory() :
<div id="divid">
<select name="category" class="form-control" id="category" required>
$brandid = $this->input->post('pid');
//you can pass this brand id to your query and echo the category in option value//
<option>//your result //</option>
</select>
</div>

You need to concat the all values in success function like
options += '<option>'+msg.category[i].category_name+'</option'>;
$('#category').html(options);

Look like your code is correct, but need to change a little bit in ajax request.
You need to parse the data return into parseJson first. The options variable in for loop should concatenate with += code. See example below:
<script>
$(function() {
$("#brand").on('change', function() {
var brand = $(this).val();
$.ajax ({
type: "post",
url: "<?php echo base_url(); ?>receiving/showCategory",
dataType: 'json',
data: 'brand='+brand,
success: function(msg) {
var data = $.parseJSON(msg),options;
for(var i = 0; i<data.length; i++) {
options += '<option>'+data.category[i].category_name+'</option'>;
}
$('#category').html(options);
}
});
});
});
</script>
In case you have a problem with this code, you should change variable in codeigniter part for the variable that hold the results. You can see my working code below as an example :
Js Code
$.ajax({
type : 'POST',
url : '<?php echo base_url();?>controller/function_name',
dateType : 'json',
data : {depart_id : _depart_id.val()},
success : function(data){
var json_data = $.parseJSON(data),
options;
for(var i = 0; i<json_data.length; i++){
options += '<option value="'+json_data[i].destination_id+'">'+json_data[i].location+'</option>';
}
_destination_id.html(options);
}
});
Here is codeigniter code(php)
$destination = $this->custom_model->get_destination_distinct($table,$where);
echo json_encode($destination);