October CMS - AJAX Form submit from 1 component to another

I am making a website in October CMS.

i created 1 components lets say Component_1 & Component_2

Now, i want to post data from Component_1 to Component_2 through form [via AJAX data-attributes APi]

So, in my component_1 i have a Form:

<form method="POST" data-request="Component_2::onSubmit" data-request-flash>

and in Component_2 i have method onSubmit(){ //Nothing Here }

When i submit form i get an error:

AJAX handler 'Component_2::onSubmit' was not found.

Then i have a same function in Component_1::onSubmit & when i submit this form to the Component_1::onSubmit i get no errors.

So, Could you suggest me a way to submit the form through AJAX from component_1 to component_2

Thanks

Hmm it should work, make sure you are using component alias names instead of using its class name,

just to inform that we are not passing data from one component to another its just a regular ajax request and we send data from browser to component

if I declare class class componentOne { ... etc we will not use this one.

then when we include it inside page there will be alias name you need to use that alias name to request ajax.

Update (using ajax handler of different page)

we need to use ajax JavaScript API it will give us more flexiblity

you can use this code

<!-- current page is `test` 
we are requesting ajax request on anohter `testing` page which is having 
compoTwo component and having `onAjaxReq` ajax handler -->
<button onClick="requestAnotherPage(this)" type="button" class="btn btn-danger" >
    My button
</button>

<script>
function requestAnotherPage(th) {
    $(th).request('compoTwo::onAjaxReq', {
        url: "{{ 'testing'|page }}", // <- this option
        // url: "http://timeloger.test/testing", 
        flash: 1,
        data: { id: 2, name: 'hardik'},     
        handleFlashMessage: function(message, type) {
            $.oc.flashMsg({ text: message, class: type })
        },
        success: function(data) { console.log('success'); this.success(data); }
    });
}
</script>

you need to take care url of another page

{{ 'testing'|page }} will generate that page's url http://timeloger.test/testing you need to pass page File Name as parameter there {{ 'page-name'|page }} -> it will generate proper url

now ajax api can request to another given page url and fetch data from it.