Database-driven chained select using xajax

[eluser]Mortred[/eluser]
Just thought I'd share my code.

Before we begin, I must assume you successfully installed xajax in CodeIgniter. To know more about how to install xajax in CodeIgniter, just search this forums.

The actual model files are a bit large so I reduced it only the necessary functions.

Controller (system/application/controllers/mypage.php):

Code:

class Mypage extends Controller {
    function __construct()
    {
        parent::Controller();
    }

    function showFormPage()
    {
        $this->load->library('xajax');
        $this->xajax->registerFunction(array('getCities',&$this,'getCities'));
        $this->xajax->registerFunction(array('getZipCodes',&$this,'getZipCodes'));
        $this->xajax->processRequest();

        $this->load->model('countries');
        $data['country_list'] = $this->countries->getListAll(null, 0, 'html_option');
        $data['xajax_js'] = $this->xajax->getJavascript(base_url());
        $this->load->view('htmlform', $data);
    }

    function getCities($country_id)
    {
        $objResponse = new xajaxResponse();
        $this->load->model('cities');
        $res = $this->cities->getListByCountry(null, 0, $country_id, 'html_option');
        $objResponse->Assign("city_id", "innerHTML", $res);
        return $objResponse;
    }

    function getZipCodes($city_id)
    {
        $objResponse = new xajaxResponse();
        $this->load->model('zipcodes');
        $res = $this->cities->getListByCity(null, 0, $city_id, 'html_option');
        $objResponse->Assign("zipcode_id", "innerHTML", $res);
        return $objResponse;
    }
}

Model (system/application/models/countries.php):

Code:

class Countries extends Model {
    var $table;
    function __construct()
    {
        $this->table = "countries";
        parent::Model();
    }

    function getListAll($limit=NULL, $offset=0, $option)
    {
        if ($limit != NULL)
        {
            $query = $this->db->query("SELECT * FROM ".$this->table." LIMIT ".$limit." OFFSET ".$offset." ");
        }
        else
        {
            $query = $this->db->query("SELECT * FROM ".$this->table." ");
        }
        $res = $query->result_array();
        if ($option=='html_option')
        {
            $list = '';
            for($x=0; $x<count($res); $x++)
            {
                $list .= "<option value='".$res[$x]['id']."'>".$res[$x]['country_name']."</option>";
            }
            return $list;
        }
        else
        {
            return $res;
        }
    }
}

Model (system/application/models/cities.php):

Code:

class Cities extends Model {
    var $table;
    function __construct()
    {
        $this->table = "cities";
        parent::Model();
    }

    function getListByCountry($limit=NULL, $offset=0, $country_id, $option)
    {
        if ($limit != NULL)
        {
            $query = $this->db->query("SELECT * FROM ".$this->table." WHERE country_id = '".$country_id."' LIMIT ".$limit." OFFSET ".$offset." ");
        }
        else
        {
            $query = $this->db->query("SELECT * FROM ".$this->table." WHERE country_id = '".$country_id."' ");
        }
        $res = $query->result_array();
        if ($option=='html_option')
        {
            $list = '';
            for($x=0; $x<count($res); $x++)
            {
                $list .= "<option value='".$res[$x]['id']."'>".$res[$x]['city_name']."</option>";
            }
            return $list;
        }
        else
        {
            return $res;
        }
    }
}

Model (system/application/models/zipcodes.php):

Code:

class ZipCodes extends Model {
    var $table;
    function __construct()
    {
        $this->table = "zipcodes";
        parent::Model();
    }

    function getListByCity($limit=NULL, $offset=0, $city_id, $option)
    {
        if ($limit != NULL)
        {
            $query = $this->db->query("SELECT * FROM ".$this->table." WHERE city_id = '".$city_id."' LIMIT ".$limit." OFFSET ".$offset." ");
        }
        else
        {
            $query = $this->db->query("SELECT * FROM ".$this->table." WHERE city_id = '".$city_id."' ");
        }
        $res = $query->result_array();
        if ($option=='html_option')
        {
            $list = '';
            for($x=0; $x<count($res); $x++)
            {
                $list .= "<option value='".$res[$x]['id']."'>".$res[$x]['zipcode']."</option>";
            }
            return $list;
        }
        else
        {
            return $res;
        }
    }
}

View (system/application/views/htmlform.php):

Code:

<html>
<head>
  <?=$xajax_js;?>
</head>
<body>
    <form action="" method="post">
      Select Country: <select name="country_id" id="country_id" 0nselect="getCities(this.value)">&lt;?=$country_list?&gt;</select><br />
      Select City: <select name="city_id" id="city_id" 0nselect="getZipcodes(this.value)"></select><br />
      Select ZipCode: <select name="zipcode_id" id="zipcode_id"></select><br />
    &lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;

[eluser]FourTeen[/eluser]
thank you for this code, i follow and learn from it, but i still have some problem..

it looks like getCities and getZipCodes cant be called..

i try changing variabel with a value in the query in cities model but nothing happened..

the city combobox still not showing anything..

anyone can help me? thank you.

[eluser]FourTeen[/eluser]
oh i just try again, and find that the problem is not controller but in the view..

we should use xajax_getCities to call the function..

[eluser]phpuser[/eluser]
Hello,

I still having problems to make it work. Changing the call

0nselect="getCities(this.value)"
by
onchange="xajax_getCities(this.value)"

once I select another item the page, hangs on ( the cursor changes to wait state ) and the list of cities does not appear.

Could anyone help me to solve this problem ?

Many Thanks !!

[eluser]Andrei Manescu[/eluser]
Has anyone managed to make this working ?? What is the trick ??

[eluser]Andrei Manescu[/eluser]
I finally managed to get it working, but only on Firefox.

[eluser]shahmy[/eluser]
I would like to thanks for this post. I was try to create two drop downs one is country another one is zone.
In my case the country drop down is load properly but the zone will not load.
please help me.
Thank you.