How to post checkout data to component using Ajax?

Question

$.ajax({
    url: Joomla.getOptions('system.paths').base+'/index.php?option=mypage&view=cartcheckout&task=cartcheckout_autoSave&tmpl=component&stepId='+stepId,
    type: 'POST',
    //async:false,
    data:values,
    dataType: 'json',

    success: function(response)
    {
        // do something
    },
    error: function(response)
    {
        // show ckout error msg
        console.log(' ERROR!!' );
        return e.preventDefault();
    }
});

My Joomla version is 3.9.3 Stable. I am getting error message on console

ERROR!!

Is my url correct?

Joomla.getOptions('system.paths').base+'/index.php?option=mypage&view=cartcheckout&task=cartcheckout_autoSave&tmpl=component&stepId='+stepId

How can I solve this problem?

Answer 1

I would define the url simply like the following:

url:'index.php?option=com_mypage&view=cartcheckout&task=autoSave&tmpl=component&stepId='+stepId,

(If in the console you would see error due to double slash in the ajax request url, then try it also without slash at the beginning of the url)(And as @Sharky pointed to it in the comment, if the url starts without the leading slash, then the url will always point to the root, even if Joomla is intalled in a subfolder).

It should work this way. In the above, you can see that the first segment of the url (after index.php?) starts with com_mypage as it has to be your component name (or the component name which you communicate with). It will never work if it is just a page. It must be like: option=com_virtuemart or option=com_j2store or some other component name.

The other parts of the url look OK. (However, the task segment should be &task=mycontrollerfunction of the component).

I just do not see any reason to define the base path in the ajax url if you start this call from inside Joomla, it’s just totally unnecessary (and it will never work the way you tried, since in jQuery it does not mean anything).

I mean in jQuery you could start your url with the base like:

window.location.protocol + "//" + window.location.host + “/index.php?...”

But for this ajax call you really do not need that.