Joomla! Documentation - User contributions [en]

J1.5:Adding AJAX to your component

2009-05-21T07:00:42Z

Amama:

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.
<source lang="javascript">
<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></source>

== Phase 2 ==
2- in the controller.php add new function (or task)like listcity ,see the following example:

example:
<source lang="php">
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();

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

J1.5:Adding AJAX to your component

2008-08-08T08:21:13Z

Amama: /* Phase 1 */

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.
<source lang="javascript">
<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></source>

== Phase 2 ==
2- in the controller.php add new function (or task)like listcity in the above example:

example:
<source lang="php">
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();

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

J1.5:Adding AJAX to your component

2008-07-30T14:16:33Z

Amama:

To add ajax to your component:

== Phase 1 ==
1- Make the necessary javascript ajax functionality in your default.php (or other layout)

ex.
<source lang="javascript">
<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></source>

== Phase 2 ==
2- in the controller.php add new function (or task)like listcity in the above example:

example:
<source lang="php">
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();

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

J1.5:Adding AJAX to your component

2008-07-30T14:14:45Z

Amama:

J1.5:Adding AJAX to your component

2008-07-30T14:11:34Z

Amama:

To add ajax to your component:

== Phase 1 ==
1- Make the necessary javascript ajax functionality in your default.php (or other layout)

ex.
<source lang="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);

// alert( myoption.getAttributeNode('id').value+ " " + myoption.childNodes[0].nodeValue);

}

}
}

xhr.open("GET","index2.php?option=com_user&task=listcity&country_id="+country_id,true);
xhr.send(null);
}</source>

== Phase 2 ==
2- in the controller.php add new function (or task)like listcity in the above example:

example:
<source lang="php">
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();

}</source>

3- Here i have a methode getStates($country_id) in the register model to extract the list countries from my bdd ,you can adapt it to your needs .Good luck

J1.5:Adding AJAX to your component

2008-07-30T13:50:59Z

Amama:

To add ajax to your component:

1- Make the necessary javascript ajax functionality in your default.php (or other layout)

ex.

<script>
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);

// alert( myoption.getAttributeNode('id').value+ " " + myoption.childNodes[0].nodeValue);

}

}
}

xhr.open("GET","index2.php?option=com_user&task=listcity&country_id="+country_id,true);
xhr.send(null);
}
</script>

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 adapt to your needs and test .Good luck

J1.5:Adding AJAX to your component

2008-07-30T13:48:59Z

Amama:

To add ajax to your component:

1- Make the necessary javascript ajax functionality in your default.php (or other layout)

ex.
<script>
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);

// alert( myoption.getAttributeNode('id').value+ " " + myoption.childNodes[0].nodeValue);

}

}
}

xhr.open("GET","index2.php?option=com_user&task=listcity&country_id="+country_id,true);
xhr.send(null);
}
</script>

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) to extract the list countries ,you can adapt to your needs and test .Good luck

J1.5:Adding AJAX to your component

2008-07-30T13:44:38Z

Amama:

To add ajax to your component:

1- Make the necessary javascript ajax functionality in your default.php (or other layout)

ex.
<script>
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);

// alert( myoption.getAttributeNode('id').value+ " " + myoption.childNodes[0].nodeValue);

}

}
}

xhr.open("GET","index2.php?option=com_user&task=listcity&country_id="+country_id,true);
xhr.send(null);
}
</script>

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- adapt to your needs and test .Good luck