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

Question

我正在十月CMS做一个网站。

我创建了 1 个组件让我们说 Component_1 & Component_2

现在，我想 post 数据从 Component_1 到 Component_2 通过表单 [via AJAX data-attributes APi]

所以，在我的 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、

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

如果我声明 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 }} 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

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

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

October CMS - AJAX Form submit from 1 component to another

php

laravel

octobercms

octobercms-plugins

octobercms-widgets

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