Actions

J1.5

Difference between revisions of "Adding AJAX to your component"

From Joomla! Documentation

(Remove version and needs review as in 1.5 ns)
 
(2 intermediate revisions by one user not shown)
Line 86: Line 86:
 
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
 
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]]
+
[[Category:Archived version Joomla! 1.5]]

Latest revision as of 06:31, 28 May 2013

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