Using Ajax to Load Data into a <div> In a Joomla 3.1 Component

Question

I have been trying to figure this out for some time and although I have found various examples online have managed to get completely confused because none seem to quite match what I am trying to do.

I have a Joomla Component that I am building and with a single view on the front end. In the default template ('default.php') two divs are created. One contains a list of items and the other is blank. I have code that lets me click on one of the listed items and return an ID unique to that item. I then want to take that ID and use it in an Ajax call to retrieve an item of data from a table in the database.

The component is called 'com_pub' it's supposed to show a list of pubs and info on each one.

I have a folder called controllers (i.e. 'com_pub/controllers') and in that I have a controller called 'pubitems.php' which just extends the JController class:

<?php
defined('_JEXEC') or die("Resricted Access!");

class PubControllerPubitems extends JController
{
}
?>

This works OK when I display the initial page

I have created a new controller in the 'controllers' folder for the front end, called 'pubitems.json.php' which contains the following code:

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

class ContentFetchPubitems extends JController
{   

public function RetrieveContent()
{
 echo(json_encode($data));
 return;
}
}

I have also created a file 'content_response' in the 'tmpl' folder:

<?php

echo "Dummy Response";

?>

In my 'default.php' file (which is located in the 'tmpl' folder for the view) I have a script that uses JQuery to get the selected id from the list and then make the Ajax call:

<script>
jQuery(".tocli").click(function(){
alert(this.id);
url = 'index.php&option=com_pub&controller=pubitems&task=RetrieveContent&tmpl=content_response&format=raw&dataType=json';
var jqxhr = jQuery.ajax(url,function(result){                     
alert("success");
})
.fail(function() {
alert( "Error: " );
})
.always(function() {
alert( "Finished: " + jqxhr.statusText);
});              
});
</script>

The function that the Ajax call is directed to will obviously have to do more than just echo a message and will get the data from the database when I get the basic thing working.

The jQuery does return the variable 'this.id' and this is correctly shown in the alert, but I'm not even trying to send that in the Ajax call at the moment - I'm just trying to get the call to function at a basic level (if this makes sense).

The other alerts work, but the '.success' one doesn't get triggered, and the '.always' one shows 'Finished : Not Found' and HTTPFox shows that it is a 404 error.

So I think this means that the Ajax call isn't even getting to the 'content_response' file and something in the url is wrong. The underlying problem is that I'm not really getting my head around the construction of the url (there may be other problems too - I am still learning). I've tried changing various elements in the url, but not had any success.

I'm also not clear on whether I've set up the controller and the other files correctly. There appear to be many different approaches to doing this, and a lot of what I've seen is contradicted by other posts, leaving me pretty confused.

I apologize for this being such a long post but I am trying to be as clear as possible about what I am trying to do and what I have done so far. Any guidance on this from someone who really understands Joomla 3.1 would be very much appreciated.

---

This is an update based on additional work I have done following the very helpful comment from Lodder who spotted an error in the URL. Not sure if I'm supposed to do this in this way but someone will probably tell me if I'm not.

Once I corrected the URL I made several other changes based on trial and error and on more web searches:

1) I got rid of the reference to the template (tmpl=content_response) as it dawned on me that I am trying to insert the result of the ajax call into the existing page using jQuery and so don't want to be loading a different template.

2) I changed the 'task' element of the url to include the name of the controller as well as the function that I am calling (so task=pubitems.RetrieveContent instead of just task=RetrieveContent).

3) I got rid of the 'dataType=json' part of the url but left the 'format=raw' in.

4) I created a new controller called pubitems.raw.php to hold the RetrieveContent function.

5) I added some info on the alerts to see if I could get more information on the ajax process.

So now I just have the script in the default.php template, which looks like:

<script>
jQuery(".toc,li").click(function(){
alert(this.id);
var data_to_send = {'id': this.id};
alert(data_to_send);
url = 'index.php?option=com_pub&controller=pubitems&task=pubitems.RetrieveContent&data=data_to_send&format=raw';
var jqxhr = jQuery.ajax(url)
.done(function(result) {
alert("Success: " + jqxhr.status + " " + jqxhr.statusCode() + " " + jqxhr.statusText);
})
.fail(function(result) {
alert("Error: " + jqxhr.status + " " + jqxhr.statusCode() +" " + jqxhr.statusText);
})
.always(function(result) {
alert("Finished: " + result);
}); 
});
</script>

The new controller looks like this:

<?php
defined('_JEXEC') or die("Resricted Access!");

class PubControllerPubitems extends JControllerForm
{
public function RetrieveContent()
{
$app = JFactory::getApplication();
$post_data = $app->input->get('id');
//  $post_data="This is a test";

echo($post_data);
}
}
?>

If I don't comment out the $post_data="This is a test" line, I get 'This is a test' returned from the ajax call and everything works beautifully. If I comment it out, I get nothing, so there is still something wrong with the ajax call either when it is issued from the default.php template, or in the function in the pubitems.raw.php controller. I am still trying to figure that out but would welcome any additional help.

Answer 1

I finally got this to work with a continued process of trial and error and heavy use of Google.

The controller looks like this:

<?php
defined('_JEXEC') or die("Resricted Access!");

class PubControllerPubitems extends JControllerForm
{
public function RetrieveContent()
{
$input = JFactory::getApplication()->input;
$cont_num = $input->get('pub_num', '', 'post');

$db = JFactory::getDBO();
$query = $db->getQuery(true);
$query->select('*');
$query->from('#__pub'); 
$query->where('pubid = ' . $pub_num); 


$db->setQuery($query); 

if ($db->getErrorNum()) {
     $return_Data = $db->getErrorMsg();
     $return_data = "Database Error";
     }
 else 
    {
    $list = $db->loadObjectList();
    foreach ($list as $item) {
    pub_txt = $item->info;
    $return_data = "Database Access Succeeded";
    $return_data = $pub_txt;
    }
    }

echo($return_data);
}
}
?>

I have now discovered that the way database errors are supposed to be trapped is deprecated in Joomla 3.1 and they are supposed to be handled as exceptions but this version works OK apart from that.

I'm repeating the whole of the script section from the template so that it's clear if anyone else wants to do the same thing:

<script>
jQuery(".toc li").click(function(){
var data_to_send = {pub_num: this.id};
url = 'index.php?option=com_pub&controller=pubitems&task=pubitems.RetrieveContent&format=raw';
var jqxhr = jQuery.ajax(url,{
data: data_to_send
    })
    .done(function(result) {
    alert("Success: " + jqxhr.status + " " + jqxhr.statusCode() + " " + jqxhr.statusText);
    jQuery('#name-box').empty();
    $pub_txt = jqxhr.responseText;
    jQuery('#name-box').text($pub_txt);
    })
.fail(function(result) {
alert("Error: " + jqxhr.status + " " + jqxhr.statusCode() +" " + jqxhr.statusText);
})
.always(function(result) {
    alert("Finished: " + jqxhr.responseText);
});
});
</script>

I left in the alerts because I found those very helpful while I was trying to figure out what was going on.

I was changing a lot of things and trying them out, but in the end I think the critical things were:

I included the name of the controller when calling the RetrieveContent function so that it was task = pubitems.RetrieveContent.

I changed the way I was encoding the data. This was difficult to figure out from the info I could find online and I got there in the end by trial and error.

I stopped trying to send the data by including it in the url. Instead I included it separately in the ajax call 'data: data_to_send'. I did this before I figured out a way of encoding the data for the ajax call that worked.

I hope this is some help to others. It took me way too long to work through this, and of course, now I've done it it looks simple, but hopefully this will save someone else a lot of time.

Answer 2

You should indicate the data type for your JInput request.

$cont_num = $input->get('pub_num', 'INT', 'post');

Never trust a input, even when you use a CSRF token you should still force a type. It may not be required by now but it's good habit (and a requirement in my coding guidelines).