J1.5

Difference between revisions of "Adding AJAX to your component"

From Joomla! Documentation

Line 58: Line 58:
  
 
== Phase 2 ==
 
== Phase 2 ==
2- in the controller.php add new function (or task)like listcity in the above example:
+
2- in the controller.php add new function (or task)like listcity ,see the following example:
  
 
example:
 
example:
Line 84: Line 84:
 
   }</source>
 
   }</source>
  
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
+
3- Here  i have a method 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

Revision as of 02:00, 21 May 2009

The "J1.5" namespace is an archived namespace. This page contains information for a Joomla! version which is no longer supported. It exists only as a historical reference, it will not be improved and its content may be incomplete and/or contain broken links.

To add ajax to your component:

Phase 1[edit]

1- Make the necessary javascript ajax functionality in your default.php (or other template in components/com_xxx/views/yyy/tmpl/)

 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[edit]

2- in the controller.php add new function (or task)like listcity ,see the following 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 method 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