Uncaught TypeError: Cannot read property 'HTML' of undefined

Question

I'm pulling a module from our Joomla site to host onto our local servers and put back into Joomla as an iframe. I've gotten the source code, set up the database to mirror that of the Joomla. When I try to do a search, I get this error:

Uncaught TypeError: Cannot read property 'HTML' of undefined

This is the js that is being called:

// Functon to perform the actual search based on Method
function displayMethod(searchText, pageNumber) {
    var jqxhr = jQuery.ajax("index.php?option=com_ppsearchusd&view=ppsearchusd&task=displayMethod&format=json&searchText=" + searchText + "&pageNumber=" + pageNumber)
        .success(function (result) {
            jQuery('#searchResults').html(result.data.HTML);
            jQuery('#alphaDiv').css('display', 'none');

            /*jQuery('#searchResults').html(result.data.HTML);
            jQuery('#searchResult-detail').css('display', 'none');
            jQuery('#searchResults').css('display', 'block');
            jQuery('#alphaDiv').css('display', 'none');*/

            jQuery('#searchResults #search-pagination').pagination({
                items: result.data.items,
                itemsOnPage: result.data.itemsOnPage,
                currentPage: result.data.currentPage,
                cssStyle: 'compact-theme',
                hrefTextPrefix: 'javascript:',
                onPageClick: function(pageNumber, event){
                    var searchText = jQuery('#searchTXT').val();
                    updateSearch(searchText, pageNumber);
                }
            });
        })
        .fail(function (jqxhr) {
            alert('status:' + jqxhr.status);
        });
}

If I copy the ajax url and append it (on my local machine) url, it get a blank page, whereas on the actual site, I do get a success JSON response. I'm sure I'm missing something that it is suppose to reference but I'm not sure what. I'm still relatively new to AJAX and js. I'm reviewing the original code and I'm not sure where "HTML" within the

jQuery('#searchResults').html(result.data.HTML);

is defined but I don't see.

Answer 1

When my helper.php file passes data back to the ajax call, with:

echo new JResponseJson($response);

I parse the response like this:

.success(function (result) {
    result = JSON.parse(result);

Then you can access HTML data with: result.data.HTML

Relevant resource: https://docs.joomla.org/JSON_Responses_with_JResponseJson

When I first "came to Joomla" in March of 2018, I needed to write my first ajax driven module. @JamesGarrett got me going with this great answer. (and Lodder gave me great advice too)

---

A note about deprecation from http://api.jquery.com/jquery.parsejson/

As of jQuery 3.0, $.parseJSON is deprecated. To parse JSON strings use the native JSON.parse method instead.

Answer 2

Have you copied the full Joomla site to your local server, or only a module from the live site?

I mean, on your local server where the Joomla is running(?), is there a component also installed which is called "com_ppsearchusd"? (This component is called in the AJAX request above). It looks like that the AJAX call does not find the component (and the requested task) on your local server. That way it cannot work...

The full component with the view, model, controller, helper, or any other component folders should be on your local Joomla to get the AJAX call correctly and it will give the correct response on the request.

After clearing the real problem:

After you explained what you are up to with this and where and how you try to run this jQuery AJAX request, it became relevantly clearer why this was not working for you (the given error message does not matter here at all).

With this AJAX call you actually call the function inside "com_ppsearchusd" component where you should find the requested function which is called displayMethod(). You should find this Joomla/PHP function most probably inside the 'controller' file (which is the controller of the above mentioned component). This function is what you have to focus on and make this function work on your local server. And this is the function you should call via the jQuery AJAX call *(not like you did with this line (this has to be reformulated line in the jQuery code):

var jqxhr = jQuery.ajax("index.php?option=com_ppsearchusd&view=ppsearchusd&task=displayMethod&format=json&searchText=" + searchText + "&pageNumber=" + pageNumber)*

This above AJAX call, this way, will never work on your server if your local server is not running Joomla itself. This is also a very problematic call from another/external server.

The requested, mentioned function from the Controller most probably invokes a function from the Model and then gets the data from the Database and then gives it back as a response data (as result), just to cover the whole cycle of this jQuery call (and that's how 'HTML' finally becomes defined). So you see, a lot of dependencies. It is not just about stripping down a Joomla module.

(a small additonal issue: another problem you might be facing is a security issue, after you solved the above jQuery call. Since usually every AJAX call inside Joomla carries a security token (CSRF token) which is created and carried with the AJAX call and checked by Joomla inside the called function. This security issue is solved within Joomla, but I am not sure how it is solved on your local server without Joomla, but you will figure that out probably if it becomes an issue at all) So it is still a question for me that the response on the AJAX call will be given from your local server or from the live Joomla site server? I do not see this clear yet in your project. Of course the logical answer is that the response will be given from where the called function is. This is a bit confusing subject... for anybody. But I just hope this can show you some direction in this question.