Ajax Select changer Country - City

[eluser]Unknown[/eluser]
An ajax Select changer for selecting Country - State - City dependign on your needs

Javascript code

Code:

function newAjax()
{
  var xmlHttp=null;
  if (window.ActiveXObject)
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  else
    if (window.XMLHttpRequest)
      xmlHttp = new XMLHttpRequest();
  return xmlHttp;
}

function addEvent(elemento,nomevento,funcion,captura)
{
  if (elemento.attachEvent)
  {
    elemento.attachEvent('on'+nomevento,funcion);
    return true;
  }
  else  
    if (elemento.addEventListener)
    {
      elemento.addEventListener(nomevento,funcion,captura);
      return true;
    }
    else
      return false;
}

function cambiar_select(divId, tagName, selectName, selectId, funcion, parametro, Width, AddEvent)
{
    url = baseurl+'index.php/ajax/'+funcion+'/'+parametro+'/'+tagName;

    ajax = newAjax();
    ajax.onreadystatechange = function()
    {
        var div = document.getElementById(divId);
        div[removed] = '';
        
        if(ajax.readyState == 4)
        {
            var xml = ajax.responseXML;
            var opt = xml.getElementsByTagName(tagName);
            var select = document.createElement('select');
            select.name = selectName;
            select.id = selectId;
            select.style.width = Width;
            
            var seleccione = document.createElement('option');
            var texto = document.createTextNode('Seleccione');
            seleccione.appendChild(texto);
            seleccione.value = 'seleccione';
            select.appendChild(seleccione);
            div.appendChild(select);
            
            if(parametro != 'seleccione')
            {
                for(i=0;i<opt.length;i++)
                {
                    var option = document.createElement('option');
                    var text = document.createTextNode(opt[i].firstChild.nodeValue);
                    option.appendChild(text);
                    select.appendChild(option);
                }
                if(AddEvent == true)
                {
                    addUrl = baseurl+'index.php/ajax/'+funcion+'_addEvent';
                    addEv = newAjax();
                    addEv<img src="'+baseurl+'images/cargando.gif" />';
        }
    }
    
    ajax.open('GET',url, true);
    ajax.send(null);
}

The controller most be something like this

Code:

class Ajax extends Controller
{
    function __CONSTRUCT()
    {
        parent::Controller();
    }
    
    function changeCountry($country,$tagName)
    {
        sleep(1);
        $xml="<?xml version=\"1.0\"?>\n";
        $xml.="<marco>\n";
        if($cities = $this->db->get_where('cities',array('country'=>$country))->result())
        {
            foreach($cities as $row)
            {
                $xml.= "<".$tagName.">".$row->city."</".$tagName.">\n";
            }
        }
        else
        {
            $xml.="<".$tagName.">There're no cities in the DB</".$tagName.">";
        }
        $xml.="</marco>\n";
        header('Content-Type: text/xml');
        echo $xml;
    }
}

When calling the function you must add the event onChange to the select like this

Code:

form_dropdown('estado',$estados,'','id="estado" onchange="cambiar_select(\'changeCountry\',\'ciudad\',\'ciudad\',\'ciudad_\',\'sel_edo\',this.value,\'450px\',true);"')

And after that you must write a function called for this example

Code:

function changeCountry_addEvent()
{
echo cambiar_select(\'changeCountry\',\'ciudad\',\'ciudad\',\'ciudad_\',\'sel_edo\',this.value,\'450px\',true);"')
}

[eluser]Satlavida[/eluser]
oww thanks i was looking for this...