java - Wicket:单独表单内的两个 AjaxButton 问题

Question

我想在页面上放置两个单独的文件上传面板，一个用于图像，另一个用于其他文件。每个面板都包含一个表单，其中包含 AjaxButton。首先我开发了第一个面板，它按预期工作。但是当我添加另一个按钮时，表单内的第二个 AjaxButton 在单击时没有响应。相反，当我单击第一个按钮时，第二个按钮会做出响应。可能是什么原因造成的？

这是第一个面板的 HTML:

<wicket:panel>
    <div wicket:id="form-container-img">
        <form wicket:id="form-img">
            <img wicket:id="releaseImage" class="thumbnail" />
            <p>
                <label>Select file :</label> 
                <input wicket:id="fileUpload-img" size="40" type="file"/>
                <input wicket:id="uploadButton-img" id="uploadButton" type="submit" value="Upload" />
            </p>
        </form>
    </div>
</wicket:panel>

第二个:

<wicket:panel>
    <div wicket:id="form-container-album">
        <form wicket:id="form-album">
            <span wicket:id="releaseName" />
            <p>
                <label>Select file :</label>
                <input wicket:id="fileUpload-album" size="40" type="file" /> 
                <input wicket:id="uploadButton-album" id="uploadButton" type="submit" value="Upload" />
            </p>
        </form>
    </div>
</wicket:panel>

现在，当两个面板都就位时，单击 uploadButton-album 不会执行任何操作，但会通过单击 uploadButton-img 进行响应。

编辑:

<wicket:panel>
        <div wicket:id="uploadPanelReleaseImg"></div>
        <div wicket:id="uploadPanelReleaseAlbum"></div>
</wicket:panel>

Answer 1

在 html 标记中，id 属性在页面上应始终是唯一的。我不确定任何规范是否需要它，但它通常被认为是良好的实践，并且事情往往依赖于它。

如果您需要控制 id(因为您在 JavaScript 中引用它，这比弄清楚 Wicket 生成的 id 更容易)，则需要手动管理。

如果您简单地省略 id 属性，Wicket 将根据 wicket id 生成一个，并保证页面上的唯一性。

根据评论线程，这似乎是问题所在。