Adding AJAX to your component
From Joomla! Documentation
(Difference between revisions)
| (6 intermediate revisions by one user not shown) | |||
| Line 1: | Line 1: | ||
To add ajax to your component: | To add ajax to your component: | ||
| − | 1- Make the necessary javascript ajax functionality in your default.php (or other | + | == Phase 1 == |
| + | 1- Make the necessary javascript ajax functionality in your default.php (or other template in components/com_xxx/views/yyy/tmpl/) | ||
ex. | ex. | ||
| − | + | <source lang="javascript"> | |
| + | <script language='javascript'> | ||
| + | |||
function ajxGetCitys(country_id){ | function ajxGetCitys(country_id){ | ||
| Line 41: | Line 44: | ||
newoption.appendChild(newtext); | newoption.appendChild(newtext); | ||
city.appendChild(newoption); | city.appendChild(newoption); | ||
| − | |||
| − | |||
} | } | ||
| Line 54: | Line 55: | ||
xhr.send(null); | xhr.send(null); | ||
} | } | ||
| − | </script> | + | </script></source> |
| − | + | == Phase 2 == | |
| − | 2- in the controller.php add new function (or task)like listcity | + | 2- in the controller.php add new function (or task)like listcity ,see the following example: |
example: | example: | ||
| − | + | <source lang="php"> | |
function listcity() | function listcity() | ||
{ | { | ||
| Line 81: | Line 82: | ||
$mainframe->close(); | $mainframe->close(); | ||
| − | } | + | }</source> |
| + | |||
| + | 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
