Simple AJAX call to a component giving 403 (Forbidden) error

Question

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

Answer 1

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.

Answer 2

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",