Adding AJAX to your component

Revision as of 08:48, 30 July 2008

To add ajax to your component:

1- Make the necessary javascript ajax functionality in your default.php (or other layout)

 ex. 
   <script>

function ajxGetCitys(country_id){

   var xhr = getXhr();
   // On défini ce qu'on va faire quand on aura la réponse
   xhr.onreadystatechange = function(){
     // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
    
     if(xhr.readyState == 4 && xhr.status == 200){
         var city=document.getElementById('city');
         
         try //Internet Explorer
         {
           xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
           xmlDoc.async="false";
           xmlDoc.loadXML(xhr.responseText);
         }
       catch(e)
         {
         try //Firefox, Mozilla, Opera, etc.
           {
             parser=new DOMParser();
             xmlDoc=parser.parseFromString(xhr.responseText,"text/xml");
           }
         catch(e) {alert(e.message)}
         }
       
         var options =xmlDoc.getElementsByTagName('options').item(0);
         city.innerHTML=;
       
         for (i=0; i < options.childNodes.length; i++){          
           var newoption=document.createElement("option");
           var myoption=options.childNodes[i];
           var newtext=document.createTextNode(myoption.childNodes[0].nodeValue);
           newoption.setAttribute("value",myoption.getAttributeNode('id').value)
           newoption.appendChild(newtext);
           city.appendChild(newoption);
         
          // alert( myoption.getAttributeNode('id').value+ " " + myoption.childNodes[0].nodeValue);
          
         }
       
           
     }
   }
   
   
     xhr.open("GET","index2.php?option=com_user&task=listcity&country_id="+country_id,true);
     xhr.send(null);

} </script>

2- in the controller.php add new function (or task)like listcity in the above example:

example:

function listcity()

 { 
 
    global $mainframe;
    $country_id=JRequest::getVar( 'country_id');
    $model = $this->getModel('register');
    $states = $model->getStates($country_id);
    
    $return = "<?xml version=\"1.0\" encoding=\"utf8\" ?>";
    $return .= "<options>";
    $return .= "<option id='0'>".JText::_( '---Select city---' )."</option>";
    if(is_array($states)) {
       foreach ($states as $state) {
        	$return .="<option id='".$state->state_id."'>".JText::_($state->state_name)."</option>";
       }
     }
     $return .= "</options>";
     echo $return;      
     $mainframe->close();
  
 }

3- Here i have a methode getStates($country_id) to extract the list countries ,you can adapt to your needs and test .Good luck