Difference between revisions of "Adding AJAX to your component"
From Joomla! Documentation
(Add version tag and mark needs review) |
|||
| (7 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
| + | {{version|1.5}}{{review}} | ||
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 45: | ||
newoption.appendChild(newtext); | newoption.appendChild(newtext); | ||
city.appendChild(newoption); | city.appendChild(newoption); | ||
| − | |||
| − | |||
} | } | ||
| Line 54: | Line 56: | ||
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 83: | ||
$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 03:11, 22 April 2013
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.
This page is tagged because it NEEDS REVIEW. You can help the Joomla! Documentation Wiki by contributing to it.
More pages that need help similar to this one are here. NOTE-If you feel the need is satistified, please remove this notice.
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