2

Disclaimer: I'm pretty new to Joomla and web-development, so I probably am making a dumb beginner mistake. So far I've worked through much of the MVC tutorial in the Joomla documentation, and I've read answers to the What is the proper way to make an AJAX call in component? question, but I'm still having trouble.

I am modifying an existing component (J2Store) so I'm not using com_ajax. I want a JavaScript script to be able to use a method in a subcontroller (com_j2store/controllers/products.php) to retrieve data. In my subcontroller class I have a dummy method for testing this out:

site/components/com_j2store/controllers/products.php

<?php
/**
 * @package J2Store
 * @copyright Copyright (c)2014-17 Ramesh Elamathi / J2Store.org
 * @license GNU GPL v3 or later
 */
// No direct access to this file
use Joomla\Registry\Format\Json;

defined('_JEXEC') or die;

require_once(JPATH_ADMINISTRATOR.'/components/com_j2store/controllers/productbase.php');
class J2StoreControllerProducts extends J2StoreControllerProductsBase
{
...

  // My method
  public function doSomething(){
    echo "something";
  }

}

Based on what I've read I cobbled together the following AJAX call:

site/templates/my_template/js/user.js

// menu select options

jQuery(document).ready(function() {
  ...

  jQuery.ajax({
    url: "index.php?option=com_j2store&format=raw&task=products.doSomething", 
    type: "GET",
    success: function(response){ 
      alert(response); 
    }
  });

  ...
}

(This is a project I inherited and the previous developer made the choice to create and put code in the user.js template file. I am putting my code in this file as well because I'm modifying what he did.)

What I expect to happen when I trigger the AJAX call is an alert window popping up and saying "something". However when the AJAX call is triggered the console logs a 403 (Forbidden) error, and the line number it gives is indeed the line number of the AJAX call.

Because of my inexperience and how many different aspects are involved in this problem it's hard for me to know what's causing the issue. In particular I don't know if I've structured my code incorrectly in the Joomla structure or if my AJAX call is just wrong. Hopefully someone can help clarify things for me.

update mixahlos pointed out that my old url "index.php?option=com_j2store&format=raw&controller=products&task=doSomething" was incorrect, but I'm still getting the error

2

As you just begin to develop a joomla component you really got into a heavy duty job right away. J2Store is a quite well built component (I like that and use that), however it's built with using FOF (and on the top of that, with the old FOF and by a quite advanced developer guy). So you will have few additional things to study and a bit of a headache too (chronic :) ).

I did not yet test the following but as far as I know this component, try to create your ajax call url like this:

url: 'index.php?option=com_j2store&view=products&task=doSomething',

This should make the required call to the targeted J2Store controller function according to me, even if it does not look like that. Give me some feedback.

... still testing the calls on local host...

If you run your Joomla on localhost, then it's better to use the url in the call with opening backslash, like:

url: '/index.php?option=com_j2store&view=callback&task=callback&method=doSomething',

First, it is not a bad idea to place and test your doSomething() function inside the J2Store callback controller class (callback.php) since this component is using this class mostly for ajax calls as I see. You will find this class among the component controllers.

class J2StoreControllerCallback extends F0FController
{
}

If I call a function here in this class with the above url, then I got 200 OK response. And as I see, in this class, the csrf protection is also turned off which can help you with successful ajax calls too. Interesting things...

So I put the following ajax call script in the components/com_j2store/templates/default/default.php

<script type="text/javascript">
     $ = jQuery.noConflict();        
        $(document).ready(function() {
            $('#mybutton2').on('click', function() {
                $.ajax({
                    url: '/index.php?option=com_j2store&view=callback&task=callback&method=doSomething',
                    cache: false,
                    type: 'GET',                        
                    success: function(data) {
                        alert('its good');
                        console.log(data);
                    },
                    error: function(){
                        console.log('its not working');
                    },
                });
            });
        });

</script>

I just also placed a button in this same template file (in the top div somewhere) for testing the ajax call:

<div>
     <button class="btn btn-primary" type="button" id="mybutton2">MyButton</button>
</div>

The above template is the main product list template of the shop. So the ajax call gets through here, however many test should be done still, from where and to which class the ajax calls should be made to and a few of the other things... I just hope you can follow this.

Now, just to really close this question, we have a successful ajax call to one of the J2Store controller(callback.php) which is immediately checking the call and redirecting the call to the Model(components/com_j2store/models/callback.php), which Model receives the call and check if it has any $method corresponding, defined in this class, same as in the method defined in the ajax call. So I placed our doSomething() function in the bottom of this callback model class (models/callback.php):

function doSomething() 
{
        $mymessage = 'this is from the callback function';
        echo new JResponseJson($mymessage);
        $status = true;
        return $status;
}

And in this callback model Class's function:function runCallback($method){} I inserted a 3 liner if checking at line 23, which looks like this:

if ($rawDataGet['method'] == 'doSomething')
{
    $this->doSomething();
    return true;
}

And now my doSomething() function is running and I get whatever response I define in my doSomething() function. So this is how ajax calls should work within an MVC which is structured this way with FOF.

  • Thanks Zollie, I tried your url but I'm still getting the same error. Some other discussions I looked at mentioned that doing AJAX calls on localhost can be weird and I am on localhost, could that be the issue? I'm also looking at the J2Store developer documentation but it's pretty sparse. – you Nov 22 '18 at 7:34
  • 1
    No, the additional problem I see that in order to make a successful ajax call to a specific component function, you have to make the call from inside that particular component. in Joomla you cannot make just ajax calls from everywhere this way. That would be a relatively high security problem in Joomla if it was that way. So what i can spot out in your try is that you try to start this call from a wrong place. Otherwise it should work. – Zollie Nov 22 '18 at 7:45
  • 1
    As I checked it further, yes, the local host is also causing problems for this call. – Zollie Nov 22 '18 at 9:00
  • 1
    Actually without that view defined, the ajax call still should reach the controller function. In your browser console you have to check the request and response url, if there is any problem with that. So the url called is really the url what you want? for me this exact ajax call give 200 OK response. However then the response is FAILED at the moment. – Zollie Nov 22 '18 at 20:12
  • 1
    @you - I finalized my answer with running your doSomething() function from the Model(callback). Just to really close this question well. – Zollie Nov 23 '18 at 9:20
1

Looks like the url in your Ajax call is wrong. You shouldn't use the controller as a var in the url but as prefix followed by the task. Also after the "?" goes the option and then the rest of url vars.

Try to Replace :

url: "index.php?format=raw&option=com_j2store&controller=products&task=doSomething",

With

url: "index.php?option=com_j2store&format=raw&task=products.doSomething",
  • I tried your url and I'm getting the same result as before, but thanks still for correcting that. I'll change the url in my question so it's more correct. – you Nov 22 '18 at 1:05

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.