在对话框中显示部分启用ajax的表单，并使用Dialog中的submit按钮更改窗体？

Question

我想实现以下目标(d10)：

在表单中，将显示自定义drupal插件的列表。每个插件都有一个设置表单数组，这取决于它的类型，并将作为插件列表的一部分合并到表单中。

用户可以通过点击一个支持ajax的add按钮来添加插件，该按钮显示了一个对话框，其中包含每个插件的按钮。这类似于段落设置为显示每个段落类型的add按钮时所做的工作--但是在弹出/对话框中。

单击“添加”按钮时，我希望通过ajax将相应的插件添加到表单中的列表中，包括其设置表单--无需重新加载页面。

我面临的问题是: Drupal使用jqueryui的对话框，它将其内容呈现在表单标记之外，这会阻止对话框中的任何提交按钮工作，因为没有表单包装，也没有form_id、build_id、……隐藏的田野。

我检查了drupal核心在块配置和视图表单中所做的工作。似乎核心开发人员试图找到一些方法来实现类似的功能，但是使用了页面重新加载(比如添加块时)或使所有更改都是半持久化的(视图配置)，这需要在某种草稿状态中存储所有更改。

处理这一问题的两种方法似乎都是一种解决办法，并创建了它们自己的一组问题，即ux问题，以及技术上的问题。

我是不是错过了一些聪明而简单的方法来实现这样的东西？

Answer 1

经过进一步研究，我发现段落模块允许在弹出/对话框中显示add段落类型按钮，然后为新添加的段落添加表单，这正是我想要做的。

他们所做的是：

• 为表单中弹出的所有内容创建一个容器，并添加js-hide类来隐藏它。
• 添加一个js行为，该行为侦听Add按钮的click事件，该事件从窗体内部创建弹出容器dom元素的深度克隆，并将副本用作弹出窗口的内容。
• 此外，该行为还侦听每个add按钮的单击事件，并简单地关闭弹出窗口。
• 向Add按钮添加常规#ajax设置，包括回调。弹出窗口中的克隆按钮触发与表单中的事件处理程序完全相同的事件处理程序，允许使用所有常规ajax表单技术。

有关他们是如何做到这一点的，请参见段落/js/分段.modal.js和paragraphs/src/Plugin/Field/Widget/FieldWidget/InlineParagraphsWidget.php。

也许这在某种程度上可以帮助某人节省时间:)