Ajax in Joomla with jQuery

This article came about while I was building a custom Joomla component at work, the component required a multi step form that stayed on the same page. So data needed to be grabbed from the database and displayed on the screen as the user was filling in the form.

I wont go into the details of making a custom component as that is outside the scope of this article, more information on that can be found here, instead we’ll just grab an article assuming that it belongs to a menu and has the Itemid of 10 (you can call absolutely any component you like, as long as you know the non SEF link to the page you are after).

First of all we need to load jQuery, we’ll load this from Googles server to reduce the load on our own server

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    jQuery.noConflict();
</script>

We’ll also need to setup a new file in the /templates/system/ folder called barebones.php that will be called when we make our Ajax calls instead of the normal template so that the data returned doesn’t include the main template, css, javascript etc. Create the file, and enter in the following:

<?php
/**
* @copyright Copyright (C) 2009 chrisduell.com. All rights reserved.
* @license GNU/GPL, see LICENSE.php
* @author Chris Duell (subooa.com)
* barebones is a stripped template by subooa.
*/
 
// no direct access
    defined( '_JEXEC' ) or die( 'Restricted access' );
?>
<jdoc:include type="component" />

Now to making the Ajax call, you will need a place to put the data once it is loaded, so create a div with the id of “ajax_here”.

Using jQuery, the Ajax call is pretty striaght forward:

jQuery(document).ready(function(){
    jQuery.ajax({
        type: "GET",
        url: "index.php",
        data: "?Itemid=10&tmpl=barebones",
        success: function(html){
            jQuery("#ajax_here").html(html);
        }
    });
});

Quickly stepping through this, we are making a call to index.php and requesting the article associated with Itemid 10, and after the data is received adding it to the div that we created earlier that has the id of “ajax_here”. But most importantly, we explicitly call the “barebones” template so the data returned and entered into the div is ONLY the output for the component, nothing more.

I highly recommend using Firebug as you are developing and testing this so that you can see if the Ajax calls are being correctly made, and the expected results are being returned.

This article is quite basic on purpose, however if you would like more information just leave a comment.

  • isaiah

    This sure seems like a simple way to employ ajax in Joomla! Thanks so much for sharing!

    I’ve seen some components create system plugins for processing ajax because creating a new entry point can lead to system vulnerabilities.

    Is this approach safe and secure?

    Thanks again!

    • http://subooa.com Chris Duell

      It’s probably best to include your own specific security on whatever you are doing with the ajax. Typically though, hacks are on known vulnerabilities. If your code is custom, there’s not a very high chance of it getting hacked.

  • isaiah

    This sure seems like a simple way to employ ajax in Joomla! Thanks so much for sharing!

    I’ve seen some components create system plugins for processing ajax because creating a new entry point can lead to system vulnerabilities.

    Is this approach safe and secure?

    Thanks again!

    • http://subooa.com Chris Duell

      It’s probably best to include your own specific security on whatever you are doing with the ajax. Typically though, hacks are on known vulnerabilities. If your code is custom, there’s not a very high chance of it getting hacked.

  • http://www.websitegreasemonkey.com Greyholme

    I’m new to using Joomla and after the first few bumps have really started to like it. Can anyone provide me a few suggestions for templates?

  • http://www.websitegreasemonkey.com Greyholme

    I’m new to using Joomla and after the first few bumps have really started to like it. Can anyone provide me a few suggestions for templates?

  • Nico

    Thank you for putting me on the right path. I’ll investigate on how to setup an external trigger to run the function. Your help will always be welcome.

  • Nico

    Thank you for putting me on the right path. I’ll investigate on how to setup an external trigger to run the function. Your help will always be welcome.

  • Aurora Grajeda

    Thank you for sharing the script, it works, but… (Isn’t there always one?)

    The component I use is ‘div’ and the ‘id’ as the item – what happens id, that when I load my test file with the call, it gets ‘all’ of the items and this doesn’t fit what I want the script to do (My test file has several ‘items’)

    What I need is to retrieve a ‘selected’ item out of an array/list in an index or master doc/txt file, the list/s will have hundreds of ‘items’ and I want to ‘GET’ only one at the time with a simple javascript statement such as: barebones.php?item=#jquery in the call.

    Is it possible to modify barebones.php so I wouldn’t have to create hundreds of JS Files with the individual jqueries? (This could work but just to think at creating that many files…

    I hope you can help.

    TXs again,

    • http://subooa.com Chris Duell

      This really is just designed to be a very stripped back template, which you can load into your site. The content that is output is the same as when you would call the page normally except minus the menu etc etc.
      So I think that is more something that you will need to work into your component and send with the ajax call another parameter, you’ll be able to use that to pick and choose what your component outputs.

  • Aurora Grajeda

    Thank you for sharing the script, it works, but… (Isn’t there always one?)

    The component I use is ‘div’ and the ‘id’ as the item – what happens id, that when I load my test file with the call, it gets ‘all’ of the items and this doesn’t fit what I want the script to do (My test file has several ‘items’)

    What I need is to retrieve a ‘selected’ item out of an array/list in an index or master doc/txt file, the list/s will have hundreds of ‘items’ and I want to ‘GET’ only one at the time with a simple javascript statement such as: barebones.php?item=#jquery in the call.

    Is it possible to modify barebones.php so I wouldn’t have to create hundreds of JS Files with the individual jqueries? (This could work but just to think at creating that many files…

    I hope you can help.

    TXs again,

    • http://subooa.com Chris Duell

      This really is just designed to be a very stripped back template, which you can load into your site. The content that is output is the same as when you would call the page normally except minus the menu etc etc.
      So I think that is more something that you will need to work into your component and send with the ajax call another parameter, you’ll be able to use that to pick and choose what your component outputs.

  • Aurora Grajeda

    Thank you very much Chris – sorry it took me this long to check out if there was an answer (Working in the ‘salt mines’ and have not much of a life besides that).

    I’m still working on how to make it work best, my project’s tests work fine, except….

    Some of the sections contain a lot of material (Content-text) And what I want to do is to lighten the load by ‘Getting’ the content (Text), as it is requested and not load everything at once, as it is the case now – even with 10% of the content in an individual test page (Without all of the other sections), this page alone takes about 8 – 10 sec. to load,

    Anyway, I’m going to keep looking for a design which allows for faster load time and that displays the content as per individual requests just as efficiently.

    I’m still a newbie at PHP and I’m learning as I go along by reading and practicing with the excellent tutorials online, but even with the little that I know, I glimpse that my.idea may not work as I expecte, because I want to Dynamically make the ‘GET’ calls for components, since there will be literally hundreds of ‘Dynamic GET’ requests in the same page, I think that all of these requests will be processed as the page loads, thus defeating the aims of the original idea.

    PHP challenged as I am, I think that this will have the same results as loading the whole content-index-page/s as it is now (I’m using JS with Doc write stmts, your script, which works very well, could do the same… I think.
    One option would be to get user’s action via links, kind of ‘more info…’ to load into the DIV with your script or JS files – this way, the individual components will be.loaded by the User’s requests.
    I’ll explore this a little bit more, but there will have to be hundreds of pages, as it would be if I continue to use the method I’m using now, which is why I decided to look .into PHP for a possible better way.

    If you were to be interested to see how really crazy I am, in a couple of weeks or so, I’d give you a link to my test site (I need to add ‘about’ content and a few more things, right now I’m mostly organizing the material (very labor-intensive, even with the batch processing methods that I have created, ‘stuff’ still needs to be entered into different programs to then process or manipulate it))

    In any event, once more, thank you for the attention you have given me.

    I wish the best for you.

  • Aurora Grajeda

    Thank you very much Chris – sorry it took me this long to check out if there was an answer (Working in the ‘salt mines’ and have not much of a life besides that).

    I’m still working on how to make it work best, my project’s tests work fine, except….

    Some of the sections contain a lot of material (Content-text) And what I want to do is to lighten the load by ‘Getting’ the content (Text), as it is requested and not load everything at once, as it is the case now – even with 10% of the content in an individual test page (Without all of the other sections), this page alone takes about 8 – 10 sec. to load,

    Anyway, I’m going to keep looking for a design which allows for faster load time and that displays the content as per individual requests just as efficiently.

    I’m still a newbie at PHP and I’m learning as I go along by reading and practicing with the excellent tutorials online, but even with the little that I know, I glimpse that my.idea may not work as I expecte, because I want to Dynamically make the ‘GET’ calls for components, since there will be literally hundreds of ‘Dynamic GET’ requests in the same page, I think that all of these requests will be processed as the page loads, thus defeating the aims of the original idea.

    PHP challenged as I am, I think that this will have the same results as loading the whole content-index-page/s as it is now (I’m using JS with Doc write stmts, your script, which works very well, could do the same… I think.
    One option would be to get user’s action via links, kind of ‘more info…’ to load into the DIV with your script or JS files – this way, the individual components will be.loaded by the User’s requests.
    I’ll explore this a little bit more, but there will have to be hundreds of pages, as it would be if I continue to use the method I’m using now, which is why I decided to look .into PHP for a possible better way.

    If you were to be interested to see how really crazy I am, in a couple of weeks or so, I’d give you a link to my test site (I need to add ‘about’ content and a few more things, right now I’m mostly organizing the material (very labor-intensive, even with the batch processing methods that I have created, ‘stuff’ still needs to be entered into different programs to then process or manipulate it))

    In any event, once more, thank you for the attention you have given me.

    I wish the best for you.

  • newbie

    Would it be possible to see complete demo component?

    • http://www.subooa.com.au Chris Duell

      This post is about four and a half years old, I don’t do Joomla development any longer so wouldn’t be able to quickly create a full demo for you, sorry.

  • http://sitedesign.joomir.com/ Ahmad Balavipour

    Thanks alot, very good and simple article about using ajax in joomla.