How To Use Ajax Within Joomla! MVC Framework-III

This article is the third in the series of

“Ajax within Joomla! Framework”.

We came to know from the view file that,

the form submits the request and

that request calls the function listCities() from the ajax file.

Here are the contents of my_ajax.js

function showCities()
{
    document.getElementById("city_loading").style.display = "inline";
    var searchForm = document.getElementById('form_ds');
    country_name = escape(searchForm.country.value);
    if (window.XMLHttpRequest)
    {     // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {     // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    //displayLoading(document.getElementById("city_loading"));
    show_progressbar("city_loading");
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 || xmlhttp.readyState=="complete")
        {
            if(xmlhttp.status == 200)
            {
                  document.getElementById("city_loading").style.display = "none";
                  replace_html('city', xmlhttp.responseText);
            }
            else
            {
                  alert("Error reading data");
            }
        }
    }
xmlhttp.open("GET","index2.php?task=listCities&country_name="+country_name, true);
xmlhttp.send();
}

function replace_html(id, content)
{
      document.getElementById(id).innerHTML = content;
}

function show_progressbar(id)
{
      replace_html(id, '<img src="./components/com_mycomponent/js/progress.gif" border="0" alt="Loading..." />');
}

The contents of the file are explained below:

1. First of all we get the form name by its id, i.e form_ds.
2. Then we get the value of the country selected. These are the two things we require to query the cities of a particular country.
3. We make XMLHttpRequest via the ajax code. We use: Get method to pass the values to the controller. This is same way we use to pass variables between files in Joomla! Programming.
4. We call the method: listCities in the controller. Task means, the function created within controller.php file.
5. One function we’ve created is: show_progressbar, this is used to show progress wheel while we are waiting for the results.
6. We use: document.getElementById(“city_loading”).style.display = “none”; This helps to stop progress wheel when results are loaded.

Now, tomorrow I’ll discuss the controller.php file and its role in ajax within Joomla! Framework.