HEEEEELP Integrating Chained Selects not working

[eluser]Gewa[/eluser]
I need a region->city chained select.

I have found this one http://www.dhtmlgoodies.com/index.html?w...ned_select

and I liked it.

Code:

<style type="text/css">
body{ background-repeat:no-repeat; font-family: Trebuchet MS, Lucida
Sans Unicode, Arial, sans-serif; height:100%; background-color: #FFF;
margin:0px; padding:0px;
}
select{ width:150px;
}
</style>
[removed][removed]
[removed]
/************************************************************************************************************
Ajax chained select
Copyright (C) 2006 DTHMLGoodies.com, Alf Magne Kalleland
This library is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License as published by the Free Software Foundation; either
version 2.1 of the License, or (at your option) any later version.
This library is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
Lesser General Public License for more details.
You should have received a copy of the GNU Lesser General Public
License along with this library; if not, write to the Free Software
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA
02110-1301 USA
Dhtmlgoodies.com., hereby disclaims all copyright interest in this
script
written by Alf Magne Kalleland.
Alf Magne Kalleland, 2006
Owner of DHTMLgoodies.com
************************************************************************************************************/
var ajax = new Array();
function getCityList(sel)
{ var countryCode = sel.options[sel.selectedIndex].value;
document.getElementById('dhtmlgoodies_city').options.length = 0; //
Empty city select box if(countryCode.length>0){ var index =
ajax.length; ajax[index] = new sack(); ajax[index].requestFile =
'/ajax_functions/get_regions/+'countryCode; // Specifying which file to
get ajax[index].onCompletion = function(){ createCities(index) }; //
Specify function that will be executed after file has been found
ajax[index].runAJAX(); // Execute AJAX function }
}
function createCities(index)
{ var obj = document.getElementById('dhtmlgoodies_city');
eval(ajax[index].response); // Executing the response from Ajax as
Javascript code }
function getSubCategoryList(sel)
{ var category = sel.options[sel.selectedIndex].value;
document.getElementById('dhtmlgoodies_subcategory').options.length = 0;
// Empty city select box if(category.length>0){ var index =
ajax.length; ajax[index] = new sack(); ajax[index].requestFile =
'getSubCategories.php?category='+category; // Specifying which file to
get ajax[index].onCompletion = function(){ createSubCategories(index)
}; // Specify function that will be executed after file has been found
ajax[index].runAJAX(); // Execute AJAX function }
}
function createSubCategories(index)
{ var obj = document.getElementById('dhtmlgoodies_subcategory');
eval(ajax[index].response); // Executing the response from Ajax as
Javascript code } [removed]

I have put this Script in Header as it says in tutorial,

then I have changed

Code:

ajax[index].requestFile = 'getCities.php?countryCode='+countryCode;

to

Code:

ajax[index].requestFile =
'/ajax_functions/get_regions/+'countryCode

as you see above.



in my ajax_functions.php controller I have added

Code:

function get_regions($country_code){


switch($country_code){
    
    case "no":
      echo "obj.options[obj.options.length] = new Option('Bergen','1');\n";
      echo "obj.options[obj.options.length] = new Option('Haugesund','2');\n";
      echo "obj.options[obj.options.length] = new Option('Oslo','3');\n";
      echo "obj.options[obj.options.length] = new Option('Stavanger','4');\n";
      
      break;
    case "dk":
      
      echo "obj.options[obj.options.length] = new Option('Aalborg','11');\n";
      echo "obj.options[obj.options.length] = new Option('Copenhagen','12');\n";
      echo "obj.options[obj.options.length] = new Option('Odense','13');\n";
      
      break;
    case "us":
      
      echo "obj.options[obj.options.length] = new Option('Atlanta','21');\n";
      echo "obj.options[obj.options.length] = new Option('Chicago','22');\n";
      echo "obj.options[obj.options.length] = new Option('Denver','23');\n";
      echo "obj.options[obj.options.length] = new Option('Los Angeles','24');\n";
      echo "obj.options[obj.options.length] = new Option('New York','25');\n";
      echo "obj.options[obj.options.length] = new Option('San Fransisco','26');\n";
      echo "obj.options[obj.options.length] = new Option('Seattle','27');\n";
      
      break;
  }  






















}

my form lookls like this

[eluser]Gewa[/eluser]

Code:

<div class="reg_form">

            &lt;? echo "".form_open_multipart("/tenders/do_add_tender");?&gt;

            &lt;input name="type" value="0" type="hidden"&gt;



            <div class="title">

          Add Place

            </div>

          

            <div class="line">

                <div class="name">Country <font color="red">*</font></div>

                <div class="value"><select id="dhtmlgoodies_country" name="dhtmlgoodies_country">
            <option value="">Select a country</option>
            <option value="dk">Denmark</option>
            <option value="no">Norway</option>
            <option value="us">US</option>
        </select></div>
                       <div class="hint">Country</div>
                     </div>
                     <div class="line">  
                                           <div class="name">City <font color="red">*</font></div>

                <div class="value"><select id="dhtmlgoodies_city" name="dhtmlgoodies_city">
        
        </select>
        </div>
        <div class="hint" >City <font color="red">*</font></div>
        
        
        
                      </div>


                
            </div>..............&lt;/form&gt;

            <div class="line">

Why its not working?

[eluser]thinkigniter[/eluser]
Try changing your PHP code to...

Code:

function get_regions($country_code){


switch(TRUE){
    
    case ($country_code == "no"):
      echo "obj.options[obj.options.length] = new Option('Bergen','1');\n";
      echo "obj.options[obj.options.length] = new Option('Haugesund','2');\n";
      echo "obj.options[obj.options.length] = new Option('Oslo','3');\n";
      echo "obj.options[obj.options.length] = new Option('Stavanger','4');\n";
      
      break;
    case ($country_code == "dk"):
      
      echo "obj.options[obj.options.length] = new Option('Aalborg','11');\n";
      echo "obj.options[obj.options.length] = new Option('Copenhagen','12');\n";
      echo "obj.options[obj.options.length] = new Option('Odense','13');\n";
      
      break;
    case ($country_code == "us"):
      
      echo "obj.options[obj.options.length] = new Option('Atlanta','21');\n";
      echo "obj.options[obj.options.length] = new Option('Chicago','22');\n";
      echo "obj.options[obj.options.length] = new Option('Denver','23');\n";
      echo "obj.options[obj.options.length] = new Option('Los Angeles','24');\n";
      echo "obj.options[obj.options.length] = new Option('New York','25');\n";
      echo "obj.options[obj.options.length] = new Option('San Fransisco','26');\n";
      echo "obj.options[obj.options.length] = new Option('Seattle','27');\n";
      
      break;
  }

Go directly to your php page via our url
eg.
http://localhost/ajax_functions/get_regions/no


also try changing

Code:

ajax[index].requestFile = '/ajax_functions/get_regions/+'countryCode

To

Code:

ajax[index].requestFile = '/ajax_functions/get_regions/'+countryCode

}

[eluser]Gewa[/eluser]
doesn't help. in Mozilla Debugger I read GetCityList is not defined

[eluser]thinkigniter[/eluser]
Ok, I got this working...

1. Include the ajax Library for New Sack() in the beginning of your JS code

2. Also change your JS code to...

Code:

var ajax = new Array();
var site_url = '<?php echo site_url();?>';
    function getCityList(sel)
    {
var countryCode = sel.options[sel.selectedIndex].value;
document.getElementById('dhtmlgoodies_city').options.length = 0;         if(countryCode.length > 0)
        {
var index = ajax.length;
ajax[index] = new sack();
ajax[index].requestFile = site_url+'/ajax_functions/get_regions/'+countryCode ;
ajax[index].onCompletion = function(){ createCities(index) }
ajax[index].runAJAX();
        }
    }
    function createCities(index)
    {
var obj = document.getElementById('dhtmlgoodies_city');
eval(ajax[index].response);
    }

3. Also change your form code...

Code:

<div class="value"><select id="dhtmlgoodies_country" name="dhtmlgoodies_country">
            <option value="">Select a country</option>
            <option value="dk">Denmark</option>
            <option value="no">Norway</option>
            <option value="us">US</option>
        </select></div>

notice the onChange="getCityList(this)" section

[eluser]Gewa[/eluser]
thanks a lot...