Joomla! Documentation™

Implementing a simple ajax functionality using mootools 1.3 in joomla 1.6

Step #1 Add ajax code to view html page

components/com_xxx/views/view/default.php

<?php
    JHTML::_('behavior.mootools'); /* to load mootools */
    $ajax = "
    /* <![CDATA[ */
   window.addEvent('domready', function() {
        $('start_ajax').addEvent('click', function(e) {
            e.stop();    
            var url = 'index.php?option=com_xxxx&view=xxxxxx&task=updateAjax&format=raw';
            var x = new Request({
                url: url, 
                method: 'post', 
		onSuccess: function(responseText){
		    document.getElementById('ajax_container').innerHTML = responseText;
		}
            }).send();      //  To pass values :    }).send('country_id=' + document.getElementById('country_id').value );
        });
    })
    /* ]]> */
    " ;
     $doc = & JFactory::getDocument();
    $doc->addScriptDeclaration( $ajax );
?>

<div><a id="start_ajax" href="#">Click here</a> to start Ajax request</div>
<div id="ajax_container">
    Here is the ajax output
</div>

Step #2: Add a task function to controller

components/com_xxxx/controller.php

function updateAjax() {
//      $country_id=JRequest::getVar('country_id');
        echo date('Y-m-d D H:i:s');
}