Repopulate Autoload Dropdown value With Ajax/Jquery

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!

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/20483...enu-values

Hey, don't work without a PHP debugger. Several free IDEs have this features built in. Two are NetBeans and CodeLobster. Without a debugger, it's like you're driving with a blindfold on -- you are going to crash!

This tutorial may be of interest.

http://www.johns-jokes.com/downloads/sp-...ax-search/

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/20483...enu-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

This tutorial may be of interest.

http://www.johns-jokes.com/downloads/sp-...ax-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.

If you mean to repopulate after CI form validation fails, check this out.
https://www.codeigniter.com/user_guide/l...g-the-form

Hey, don't work without a PHP debugger. Several free IDEs have this features built in. Two are NetBeans and CodeLobster. Without a debugger, it's like you're driving with a blindfold on -- you are going to crash!