ajax 调用后页面未更新

Question

我有一个自定义组件（即内部包含 ui:composition 的 xhtml 文件），其中有一个文件上传字段。选择文件后，它会通过 AJAX 像这样

上传

<uc:fileUpload
  id="#{id}fileUploadComponent"
  idSuffix="#{id}fileUploadSuffix"
  value="#{fileUpload.docsFilePart}"
  accept="#{fieldWrapper.acceptedFileTypes}"
  widgetVar="#{id}documentUploadWidget"
  nullAllowed="#{!((fieldDef.mandatory and 
  fieldWrapper.getCurrentFileCount() lt 1) and isSaving)}"
  maxSize="#{customField.maxFileSize}" >                                     
  <f:ajax listener="#{fileUpload.uploadNewFile(fieldWrapper)}" render="#{localId}fileUploadMain messages"/>
</uc:fileUpload>

在此上传下方有一个 <div>，其 ID 与 ajax 调用的 render 属性中指定的相同，其中用于下载文件的 links 是显示。发生的事情很奇怪 - 选择文件并上传后，<div> 会正确更新为 link 到新上传的文件。但是，当我在页面上单击 "Cancel" 或 "Save" 时，会调用相应的操作，并向浏览器返回正确的响应（状态为 200），但浏览器似乎会忽略它 - 页面不是视觉更新或任何...

自定义组件是相当大的一段代码，具有不太容易重写的逻辑，因此此时替换它会……很难……

有一件事可能是上传文件发生在一个单独的控制器中，而主页面控制器是另一个控制器。这是因为单独的控制器应该处理来自自定义组件的上传。

我真的不明白到底发生了什么，更不用说为什么了，我会很感激任何想法！

为了它的价值，我在 Wildfly 11（AS 提供的那个）上使用 Mojarra

Answer 1

事实证明，原因是通过 JSF AJAX 上传文件导致创建名为 "JSFFrameId" 的 iframe，并且该框架被设置为嵌套表单的目标。在 AJAX 请求完成后，目标不是 removed/cleared 从而导致响应进入该 iframe 并破坏视图。在这一点上，我不确定是什么原因导致的，但对我来说，一个解决方法是在 <f:ajax> 定义中添加 onevent，这样可以清除表单目标，如下所示：

<f:ajax 
  listener="#{fileUpload.uploadNewFile(fieldWrapper)}"
  onevent="function(e){if (e.status == 'complete') { $(e.source).parents('form').attr('target','');}"
  render="#{localId}fileUploadMain messages">

我会检查其他哪些状态可能需要处理，但这基本上可以解决问题。如果有人分享他们对可能导致 JSF 留下此 iframe 且未重置表单目标的原因的怀疑，这可能会很有用。

ajax 调用后页面未更新

Page not updating after ajax call

ajax

jsf

jsf-2.2