Using Ajax in Joomla – Joomla Extensions Development

By default Joomla uses Mootools Javascript Framework. So, lets use Mootools library in Joomla to provide Ajax Functionality. In this tutorial, we will learn creating two different things that are useful in different places.

1. Getting data when changing values in Combobox.

2. Saving data when clicking on the button.

Most of the developers use these two functions very often in their sites. So, I am going to talk about using these two things using Ajax. Lets start with Number 1:

1. Getting Data when changing values in a Combobox:

First of all, let me show you what we are going to achieve here. For this please view the image displayed below:

Ajax School Demo

Ajax Combobox Demo 1

Ajax Combobox Demo 2

Ajax Combobox Demo 2

I think it is quite clear that, when we select a School in the first combobox, the Select Class combobox will automatically popup the classes of that school. Which means, we are calling the classes from database when the school is changed using Mootools AJAX library, which comes with Joomla. A similar scenario may occur when you select the country, the name of cities will be displayed in the second combobox.

Lets create this step by step:

Step 1: Now, first of all go to the default.php page of your component, where you have created the two comboboxes as shown above. Add the following code to the page:

JHTML::_('behavior.mootools');

$js = "window.addEvent('domready', function()
{
			$('school_id').addEvent('change',function(e)
			{
				// School Title
				$('school_form').filter_value.value = $('school_id').value;
				$('school_form').filter_on.value = 'school';
				$('school_form').filter_for.value = 'class';
				$('school_form').send({update: $('class_update') });
			});

		});";

$document->addScriptDeclaration($js);

The first line JHTML::_(‘behavior.mootools’); calls the Joomla Mootools library in your page.

Step 2: Next we created a event that triggers whenever the value in the first combobox changes. Remember, the ‘school_id’ in line 5 is the id of first combobx (Select Your School). We have added an onChange Event to that combobox. ‘school_form’ is the name of the form to submit which contains three hidden fields (filter_value, filter_on and filter_for). We have populated the hidden fields with necessary data before submit. Then, the send function is called which sends the data to the server and in return, the update function is called which updates the div with id ‘class_update’.

Next create a form at the end of default.php file that only contains hidden fields and other necessary information:

<form id="school_form" method="post" action="<?php echo JRoute::_('index.php?option=com_school'); ?>">
    <input name="format" type="hidden" value="raw" />
    <input name="view" type="hidden" value="school" />
    <input name="filter_for" type="hidden" value="" />
    <input name="filter_value" type="hidden" value="" />
    <input name="filter_on" type="hidden" value="" />
    <?php echo JHTML::_( 'form.token' ); ?>
</form>

This form doesnot display anything on the page and is used only to send the data of the combobox. Please note that the form that displays combobox with School Names is a different form. First make that form and add this form to the end of the page.

‘com_school’ in the first line is the name of the component that I have used. Besides the three hidden fields discussed above, we have also two other hidden fields, ‘format=raw’ and ‘view=school’. By default Joomla uses, html format to display page contents, but we are using raw format just to display the second combobox and I have created the view named school so, I am passing that value to the form.

Step 3: Now, I have created a view.raw.php page in the school view and added following code to it:

<?php
defined('_JEXEC') or die('Restricted access');

jimport('joomla.application.component.view');

/**
 *
 * School Type View
 *
 */
class SchoolViewSchool extends JView
{
	function display($tpl = 'dropdown')
	{
		$filter_on = JRequest::getVar('filter_on'); // field to filter on
		$filter_value = JRequest::getInt('filter_value'); // value in field to filter on
		$filter_for = JRequest::getVar('filter_for'); // object to filter for

		$allowed_filter_on = array('school');
		$allowed_filter_for = array('class');

		if (!in_array($filter_on, $allowed_filter_on))
		{
			$filter_on = 'school';
		}

		if (!in_array($filter_for, $allowed_filter_for))
		{
			$filter_for = 'class';
		}

		$lists['dropdown'] = JHTML::_('school.classes','','',$filter_for.'_id',$filter_on,$filter_value);

		$this->assignRef('lists', $lists);

		parent :: display($tpl);
	}
}
?>
Step 4: Create a file named default_dropdown.php inside the tmpl folder of the view. Add following code to that file:
<?php

defined('_JEXEC') or die('Restricted access'); 

echo $this->lists['dropdown'];

?>

Step 5: Finally add a span with id to the default.php file of the view, where the combobox from default_dropdown.php file will be displayed after being called by AJAX.

<span id="class_update"></span>
You can leave a response, or trackback from your own site.

2 Responses to “Using Ajax in Joomla – Joomla Extensions Development”

  1. Php2ranjan says:

    I think i got it what I am looking for. Its very difficult to implement yourself. thanks buddy for the tutorials..

  2. Lyddy says:

    A minute saved is a minute eraend, and this saved hours!

Leave a Reply

*

Powered by WordPress | Buy cheap cell phones at iFreeCellPhones.com | Thanks to iCellPhonePlans.com, Facebook Games and Free Ads