通过 AJAX 将 Orbeon Form 异步替换为新的 Orbeon Form

Question

我在 Hybris 中使用 Orbeon 表单。我们有几个链接在一起的页面，用户需要按顺序浏览它们（结帐过程）。

Orbeon 表单的内容是动态根据前面步骤的操作确定的].例如。

如果用户在第 1 步将产品 A 添加到购物车，则在第 2 步的表单上只有两个字段可见，如果他在第 1 步添加另一个（产品 B），一个更多字段应该在表单上可见。

我正在使用某些预处理器 class 预填充表单上的一些隐藏字段，然后动态显示的逻辑基于这些隐藏字段在表单本身上。这在通过步骤来回移动时的简单场景中有效。

但是，问题是我还需要在页面上显示一个 HTML Mini-cart （不是 Orbeon Form 的一部分），它还可以 异步触发 adding/removing 产品。

因此，当我在显示表单的第 2 步时，用户还可以 remove/re-add 某些产品 -> 因此，这需要触发异步重新呈现表单并更改表单的显示（添加或删除新字段）。

我正在使用 AJAX 来处理这个异步的东西，我面临的问题是当第一次加载页面时，会生成很多 Orbeon 特定的 Javascript 文件和变量时间，并使用一些随机的 FormID。当我从后端检索新表单时以及尝试替换 HTML 内容时，此 FormID 不同我在控制台中收到各种错误，因为到处都使用旧表单 ID。

有没有人有任何建议，如果这可以实现以及如何解决这个问题？

更新："hidden" 字段示例 glass-coverage-selected

<xf:instance id=""fr-form-instance"" xxf:exclude-result-prefixes=""#all""> <form> <glass-coverage-selected/> <section-1> <massive-exterior-walls/> </section-1> ...

稍后创建绑定：

<xf:bind id=""section-40-bind"" ref=""section-40"" name=""section-40"" relevant=""instance('fr-form-instance')/glass-coverage-selected = 'yes'"">
   <xf:bind id=""previous-glass-insurance-bind"" ref=""previous-glass-insurance"" name=""previous-glass-insurance"">
       <xf:required id=""validation-156-validation"" value=""true()""/>
</xf:bind>

并且该绑定用于控制特定部分的可见性：

<fr:section id=""section-40-control"" bind=""section-40-bind"">
     <xf:label ref=""$form-resources/section-40/label""/>
     <fr:grid>
         <xh:tr>
            <xh:td>
               <xf:select1 id=""previous-glass-insurance-control"" appearance=""full"" bind=""previous-glass-insurance-bind"" class=""previous-insurance"">
                   <xf:label ref=""$form-resources/previous-glass-insurance/label""/>
                   <xf:hint ref=""$form-resources/previous-glass-insurance/hint""/>
                   <xf:help ref=""$form-resources/previous-glass-insurance/help""/>
                   <xf:alert ref=""$form-resources/previous-glass-insurance/alert[1]"" validation=""validation-156-validation""/>
                   <xf:alert ref=""$form-resources/previous-glass-insurance/alert[2]""/>

                   <xf:itemset ref=""$form-resources/previous-glass-insurance/item"">
                       <xf:label ref=""label""/>
                       <xf:value ref=""value""/>
                       <xf:hint ref=""hint""/>
                    </xf:itemset>
               </xf:select1>
           </xh:td>
       </xh:tr>
    </fr:grid>
</fr:section>

Answer 1

您可以在浏览器中操作 JavaScript 中表单字段的值。如果要设置 "hidden fields" 的值，您可以通过将 false() 置于 Form Builder 中字段的 Visibility 下来确保这些字段未被隐藏。如果您这样做，出于安全原因，该字段的值甚至不会被 Orbeon Forms 发送到浏览器，并且无法从 JavaScript 进行设置。相反，为了能够设置 JavaScript 的值，您需要使用 CSS 隐藏控件。最简单的方法是在“控件设置”对话框中为该字段添加 class xforms-disabled。

那么，假设Form Builder中的控件名称是my-control，在JavaScript中可以写成var control = ORBEON.jQuery('*[id $= "my-control-control"]'); ORBEON.xforms.Document.setValue(control.attr('id'), '42');。请注意在控件名称末尾添加的 -control。为了先进行测试，我建议您不要放置 CSS class，这样您可以更轻松地查看设置值是否有效。

有关上述 setValue() 和其他 JavaScript API 的文档，请参阅页面 Client-side JavaScript API。

通过 AJAX 将 Orbeon Form 异步替换为新的 Orbeon Form

Replace Orbeon Form with a new one asynchronously via AJAX

ajax

forms

asynchronous

orbeon