J1.5:Adding AJAX to your component

From Joomla! Documentation
(Difference between revisions)
Jump to: navigation, search
(Phase 1)
Line 2: Line 2:
  
 
== Phase 1 ==
 
== Phase 1 ==
1- Make the necessary javascript ajax functionality in your default.php (or other layout)
+
1- Make the necessary javascript ajax functionality in your default.php (or other template in components/com_xxx/views/yyy/tmpl/)
  
 
   ex.  
 
   ex.  
Line 56: Line 56:
 
}
 
}
 
</script></source>
 
</script></source>
 
  
 
== Phase 2 ==
 
== Phase 2 ==

Revision as of 03:21, 8 August 2008

Replacement filing cabinet.png
This Namespace has been archived - Please Do Not Edit or Create Pages in this namespace. Pages contain information for a Joomla! version which is no longer supported. It exists only as a historical reference, will not be improved and its content may be incomplete.

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 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