Adding AJAX to your component

From Joomla! Documentation
(Difference between revisions)
Jump to: navigation, search
(Phase 1)
(One intermediate revision by one user not shown)
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
 +
 
 +
[[Category:Tutorials]][[Category:Component Development]]

Revision as of 04:04, 20 September 2010

To add ajax to your component:

Phase 1

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

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

Personal tools
Namespaces

Variants
Actions
Navigation
Joomla! Sites
Toolbox