十月 CMS - AJAX 表单从一个组件提交到另一个组件

Question

我正在十月 CMS 中制作网站。

我创建了 1 个组件，比如说 Component_1 和 Component_2

现在，我想通过表单 [通过 AJAX 数据属性 APi] 将数据从 Component_1 发布到 Component_2

所以，在我的 component_1 中，我有一个表单：

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

在 Component_2 中我有方法 onSubmit(){ //Nothing Here }

当我提交表单时出现错误：

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

然后我在 Component_1::onSubmit 中具有相同的功能，当我将此表单提交到 Component_1::onSubmit 时，我没有收到任何错误。

那么，您能否建议我一种通过 AJAX 将表单从 component_1 提交到 component_2 的方法

谢谢

Answer 1

嗯，它应该可以工作，确保您使用的是component alias 名称，而不是使用它的class name，

只是为了通知我们是not passing data from one component to another，它只是一个普通的ajax request，我们从browser to component发送数据

如果我声明class class componentOne { ... etc，我们将不会使用这个。

那么当we include它在页面内时会有alias name你需要使用alias name来请求ajax。

更新（使用不同页面的ajax处理程序）

我们需要使用ajax JavaScript API，它会给我们更多的灵活性

您可以使用此代码

<!-- 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>

你需要注意另一个页面的url

{{ 'testing'|page }} 将生成该页面的 url http://timeloger.test/testing 您需要将 page File Name 作为参数传递给 {{ 'page-name'|page }} -> 它会生成正确的 url

现在ajax api 可以向它请求another given page url 和fetch data。