CodeIgniter Forums
Repopulate Autoload Dropdown value With Ajax/Jquery - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Using CodeIgniter (https://forum.codeigniter.com/forumdisplay.php?fid=5)
+--- Forum: General Help (https://forum.codeigniter.com/forumdisplay.php?fid=24)
+--- Thread: Repopulate Autoload Dropdown value With Ajax/Jquery (/showthread.php?tid=63955)



Repopulate Autoload Dropdown value With Ajax/Jquery - Codeigniter_Learner - 12-27-2015

I have spent 2 days on this and I am reaching nowhere. I am a new learner and as encouraged by forum members in one of my other post I am using this forum to get hand on CI.

I am new to php and CI. I have this strange problem here. I am able to repopulate dropdown field value upon error on the first dropdown field only because the values for first field are being pulled from "view.php". I also posted this question on stackoverflow but no response Link Here



I have model:

Code:
function getCountry(){
   $this->db->select('v_country_id,v_country_name');
   $this->db->from('vbc_country');
   $this->db->order_by('v_country_name', 'asc');
   $query=$this->db->get();
   return $query;
}
function getData($loadType,$loadId){
   if($loadType=="state") {
       $fieldList='id,v_state_name as name';
       $table='vbc_state';
       $fieldName='country_id';
       $orderByField='v_state_name';                      
   } else if ($loadType == "region") {
       $fieldList='id,v_state_region_name as name';
       $table='vbc_state_region';
       $fieldName='state_id';
       $orderByField='v_state_region_name';
   } else {
       $fieldList='id,v_city_name as name';
       $table='vbc_city';
       $fieldName='state_region_id';
       $orderByField='v_city_name';
   }
   $this->db->select($fieldList);
   $this->db->from($table);
   $this->db->where($fieldName, $loadId);
   $this->db->order_by($orderByField, 'asc');
   $query=$this->db->get();
   return $query;
}

And a controller dashboard.php

Code:
public function loadData()
{
   $loadType=$_POST['loadType'];
   $loadId=$_POST['loadId'];

   $this->load->model('admin/model_users');
   $result=$this->model_users->getData($loadType,$loadId);
   $HTML="";

   if($result->num_rows() > 0){
       foreach($result->result() as $list){
           $HTML.="<option value='".$list->id."'>".$list->name."</option>";
       }
   }
   echo $HTML;
}

And View:

Code:
<?php if($list->num_rows() > 0){ ?>

<select class="full-width" name="v_item_country" onchange="selectState(this.options[this.selectedIndex].value)">
<option value="0">Country</option>
   <?php foreach($list->result() as $listElement): ?>
       <option value="<?= $listElement->v_country_id?>" <?php if($this->session->flashdata('v_item_country') === $listElement->v_country_id) echo('selected')?>><?= $listElement->v_country_name?></option>
   <?php endforeach; ?>
</select>

<select class="full-width" name="v_item_state" id="state_dropdown" onchange="selectRegion(this.options[this.selectedIndex].value)">
   <option value="0">State</option>
</select>

<select class="full-width" name="v_item_city" id="city_dropdown">
   <option value="0">City</option>
</select>

<?php }else{ echo 'No Country Name Found'; } ?>


And I am totaly lost about ajax.jquery.

PLEASE HELP!


RE: Autoload Dropdown With Ajax/Jquery - RobertSF - 12-27-2015

You want the value selected in one dropdown to limit the choices offered in the other dropdown, so if you select Northern region, for example, the other dropdown shouldn't include cities in Texas and Arizona. Most of the action happens in Javascript, not PHP. I don't know much Javascript (which is what JQuery and Ajax are, basically), so I can't show you specific code, but the general idea is this.

1.- In your controller, load the data for both dropdowns into respective PHP arrays.
2.- Format the data for each dropdown into a string that can be inserted into your Javascript code. See the PHP docs for implode.
Code:
In PHP:
$region_list = '"' . implode('", ', $regions) . '"';

In your Javascript code:
var regions = {<?php echo $region_list ?>};
3.- Your Javascript code should be triggered on change by the first dropdown, and from the value in the first dropdown, it should then load the correct options into the second dropdown.

It's not a tutorial, but stackoverflow.com usually has some good answers. This may work.
http://stackoverflow.com/questions/20483470/javascript-dynamic-drop-down-menu-values


RE: Autoload Dropdown With Ajax/Jquery - John_Betong - 12-27-2015

This tutorial may be of interest.

http://www.johns-jokes.com/downloads/sp-e/jb-ajax-search/


RE: Autoload Dropdown With Ajax/Jquery - Codeigniter_Learner - 12-30-2015

(12-27-2015, 02:20 PM)RobertSF Wrote: You want the value selected in one dropdown to limit the choices offered in the other dropdown, so if you select Northern region, for example, the other dropdown shouldn't include cities in Texas and Arizona. Most of the action happens in Javascript, not PHP. I don't know much Javascript (which is what JQuery and Ajax are, basically), so I can't show you specific code, but the general idea is this.

1.- In your controller, load the data for both dropdowns into respective PHP arrays.
2.- Format the data for each dropdown into a string that can be inserted into your Javascript code. See the PHP docs for implode.
Code:
In PHP:
$region_list = '"' . implode('", ', $regions) . '"';

In your Javascript code:
var regions = {<?php echo $region_list ?>};
3.- Your Javascript code should be triggered on change by the first dropdown, and from the value in the first dropdown, it should then load the correct options into the second dropdown.

It's not a tutorial, but stackoverflow.com usually has some good answers. This may work.
http://stackoverflow.com/questions/20483470/javascript-dynamic-drop-down-menu-values

Hi thanks for your reply. I somehow figured out to make dropdown work but they don't repopulate upon error. I posted it on stachoverflow nut no response. Link


RE: Autoload Dropdown With Ajax/Jquery - Codeigniter_Learner - 12-30-2015

(12-27-2015, 05:34 PM)John_Betong Wrote: This tutorial may be of interest.

http://www.johns-jokes.com/downloads/sp-e/jb-ajax-search/

Thanks John. I got it working now. Do you have any idea about how to repopulate dropdown fields upon error? Here is my post on StackOverFlow.


RE: Repopulate Autoload Dropdown value With Ajax/Jquery - RobertSF - 12-30-2015

If you mean to repopulate after CI form validation fails, check this out.
https://www.codeigniter.com/user_guide/libraries/form_validation.html?highlight=error#re-populating-the-form