通过 AJAX 异步替换 Orbeon 表单

Question

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

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

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

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

但是，问题是我还需要在页面上显示一个 HTML Mini-cart（不是 Orbeon 表单的一部分），它也可以 触发异步添加/删除产品。

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

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

如果可以实现这一点以及如何解决这个问题，有人有什么建议吗？

更新：“隐藏”字段示例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 操作表单字段的值。如果您想设置“隐藏字段”的值，您可以通过将false() 置于表单生成器中字段的可见性 下来确保这些字段未被隐藏。如果您这样做，出于安全原因，Orbeon Forms 甚至不会将字段的值发送到浏览器，并且无法从 JavaScript 设置它。相反，为了能够从 JavaScript 设置值，您需要使用 CSS 隐藏控件。最简单的方法是在“控制设置”对话框中为该字段添加类 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 类，这样您可以更轻松地查看设置值是否有效。

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