Ajax Form Submission in Joomla 2.5 with jQuery

I’m developing a custom c-commerce component for Joomla 2.5, and today was struggling with using Ajax from my admin lists. I wanted to make small changes to the list via Ajax without having to reload the entire page – publish state, deletes, quick edits, etc. To handle the Ajax form submissions, I was using jQuery and the jQuery Form Plugin.

The problems I ran into mostly had to do with working around the built-in Joomla JavaScript and admin form submission handling. Perhaps there’s a better way, but here is how I got things to work:

  1. Manually call Joomla’s core scripts in the view’s layout file.
  2. Override the Joomla functions “Joomla.submitbutton” and “submitbutton”.
  3. Intercept form submissions from inside the Joomla.submitbutton function.
  4. Update the necessary hidden fields manually and push through the form via Ajax.

1. Manually call Joomla’s core scripts in the view’s layout file.

This step was necessary when overriding the Joomla functions with my own. Without doing this, Joomla’s functions will be imported last, and will override your, erm, overrides. It’s easy enough to to – include this bit of PHP at the top of your view’s layout file:

<?php
$document =& JFactory::getDocument();
JHTML::_('behavior.mootools');
$document->addScript('/path/to/my_javascript.js');
?>

So, first you use JHTML to bring in the core Joomla JS files, then you attach your own JS file afterwards to handle the overrides.

Override the Joomla functions “Joomla.submitbutton” and “submitbutton”.

The primary override will be to the new Joomla.submitbutton method. Mine looked something like this:

Joomla.submitbutton = function(task){
	if (task == 'publish' || task == 'unpublish'){
		jQuery('input[name=format]', jQuery('#adminForm')).val('json');
		jQuery('input[name=task]', jQuery('#adminForm')).val(task);
		jQuery('#adminForm').ajaxSubmit();
	} else Joomla.submitform(task);
	return false;
};

This example intercepts form submissions for the publish or unpublish tasks. My form has a hidden field named “format” with the default value of “html” for a normal form submission. The script above first changes that to a format of “json”, and then my Controller can check for the format field and send the correct response and view.

I’m also having to manually set the “task” hidden field, since we’re stealing that functionality from Joomla’s core scripts. Finally, we do the ajaxSubmit call (this assumes you’ve already added jQuery and the jQuery Form Plugin to your document). In my real world script, I also passed some parameters to the ajaxSubmit() function, such as the callback functions for successful submissions and errors.

For me, this all worked when using the list checkboxes and the toolbar buttons at the top, but not when clicking the publish or unpublish column graphics in the list. The problem there seemed to be that the publish/unpublish graphics were going through the Joomla listItemTask() function, which, for whatever reason, was still using the older submitbutton() function (not attached to the Joomla object). This override was pretty simple – I just routed it through to the other:

function submitbutton(task) {
	return Joomla.submitbutton(task);
}

That got things working for me. My ajaxSubmit() callbacks handled the refresh of the list, and there are obviously some app-specific details I’ve left out, but hopefully this helps point someone (or me, later) in the right direction.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>