Question

我正在使用passthrough将onchange传递给PF fileupload组件。我想在用户选择文件时折叠面板并展开另一个面板。

我遇到的问题是我总是折叠和扩展面板。我不想在发生错误时执行此操作。并且由于错误，我的意思是如果我添加不受支持的文件类型。如果我这样做，将显示PF错误消息，但onchange内的内容也会被调用。

我尝试使用args，但这不适用于passthrough ...

我如何检查这些特定错误，并且如果没有，则只执行onchange内的内容？或者我能以某种方式抓住它们吗？

<p:fileUpload disabled="#{userAccess.isDisabled()}"
    id="documentUpload"
    label="#{msg['components.fileUpload.chooseDocument']}"
    uploadLabel="#{msg['components.fileUpload.uploadLabel']}"
    cancelLabel="#{msg['components.fileUpload.cancelLabel']}"
    invalidSizeMessage="#{nts['error.documentType.invalidFileSize']}"
    invalidFileMessage="#{cc.attrs.invalidFileTypeMessage}"
    fileUploadListener="#{cc.attrs.documentsHandler.handleFileUpload}"
    mode="advanced"
    dragDropSupport="true"
    oncomplete="PF('#{clientId}_addPanel').collapse();"
    update="#{cc.clientId}:displayPanel"
    process="@this"
    allowTypes="#{cc.attrs.allowedTypes}"
    styleClass="#{cc.attrs.styleClass}"
    sizeLimit="1000000"
    pt:onchange="if (tagName == 'INPUT' &amp;&amp; #{!cc.attrs.isLogo}) { if (!!value) {PF('#{clientId}_addPanel').collapse(); PF('#{clientId}_editPanel').expand();} }">
    <f:attribute name="document" value="#{cc.attrs.documentsHandler.document}" />
</p:fileUpload>

更新：

我甚至试图通过类名console.log($(PrimeFaces.escapeClientId('#{cc.clientId}:addPanel')).find('.ui-messages-error-summary'));

来获取存储消息的DOM元素

这也没有成功，它在使用onchange方法时找不到任何东西，但之后通过在浏览器控制台中手动运行上述语句来找到它。似乎在PF修改标记之前执行了onchange。或者至少不是所有标记......

有什么建议吗？

Answer 1

所以，我正在回答我自己的问题。工作代码如下所示：

<p:fileUpload disabled="#{userAccess.isDisabled()}"
    id="documentUpload"
    widgetVar="#{clientId}_documentUpload"
    label="#{msg['components.fileUpload.chooseDocument']}"
    uploadLabel="#{msg['components.fileUpload.uploadLabel']}"
    cancelLabel="#{msg['components.fileUpload.cancelLabel']}"
    invalidSizeMessage="#{nts['error.documentType.invalidFileSize']}"
    invalidFileMessage="#{cc.attrs.invalidFileTypeMessage}"
    fileUploadListener="#{cc.attrs.documentsHandler.handleFileUpload}"
    mode="advanced"
    dragDropSupport="true"
    oncomplete="PF('#{clientId}_addPanel').collapse();"
    update="#{cc.clientId}:displayPanel"
    process="@this"
    allowTypes="#{cc.attrs.allowedTypes}"
    styleClass="#{cc.attrs.styleClass}"
    sizeLimit="1000000"
    pt:onchange="if(tagName == 'DIV' &amp;&amp; !!id &amp;&amp; #{!cc.attrs.isLogo}) { if(!!PF('#{clientId}_documentUpload').files.length) { PF('#{clientId}_addPanel').collapse(); PF('#{clientId}_editPanel').expand(); } }">
    <f:attribute name="document" value="#{cc.attrs.documentsHandler.document}" />
</p:fileUpload>

基本上我改变的是passthrough行，现在看起来像这样：

pt:onchange="if(tagName == 'DIV' &amp;&amp; !!id &amp;&amp; #{!cc.attrs.isLogo}) { if(!!PF('#{clientId}_documentUpload').files.length) { PF('#{clientId}_addPanel').collapse(); PF('#{clientId}_editPanel').expand(); } }"

它基本上只筛选出具有id的DIV元素，因为我看到该文件只附加到DOM中的一个元素并且使用了widgetvar和条件{{1}它基本上有效。

我不知道这是否是最好或最正确的方式，但正如我所说，它完成了这项工作。

如何捕获Primefaces fileupload onchange上的错误/验证错误

1 个答案: