Adding AJAX to your component

From Joomla! Documentation
Revision as of 09:16, 30 July 2008 by Amama (Talk | contribs)

Jump to: navigation, search

To add ajax to your component:

Phase 1

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

 ex. 
<script language='javascript'>   
 
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);
 
          }
 
 
      }
    }
 
 
      xhr.open("GET","index2.php?option=com_user&task=listcity&country_id="+country_id,true);
      xhr.send(null);
}
</script>


Phase 2

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) in the register model to extract the list countries from my bdd ,you can do it another way and adapt to your needs .Good luck

Personal tools
Namespaces

Variants
Actions
Navigation
Joomla! Sites
Toolbox