将 jQuery 错误处理添加到列表、网格内的 JSF 页面上的所有图像

Add jQuery error handling to all images on JSF pages inside lists, grids

本文关键字：JSF 图像 网格 处理 错误 jQuery 添加 列表      更新时间：2023-09-26

首先，一点背景。我试图完成的是我的 JSF 应用程序的图像的客户端错误处理程序，只要图像加载失败，它就会执行某些操作。有些东西有点复杂，所以我会选择一个简单的例子，它做类似的事情，因为它将 src 属性重写为不同的图像。此外，我的图像存储在 Amazon S3 上，因此图像请求不会通过我的 JSF 应用程序中的过滤器传递，我希望保持这种方式。

实际上，我想为应用程序范围内的所有图像执行此操作（带有一些修饰）：

$('img').error(function() {
  var newImage = 'somethingbasedofftheoriginalurl.jpg'; //pseudocode
  $(this).attr('src','newImage');
}

我遇到的问题是它不适用于动态列表或网格，例如Primefaces DataGrid。它将为第一页上的图像添加错误处理程序，但在使用分页器时不会为后续页面添加错误处理程序。它显然只将处理程序附加到调用$('img')时存在的元素。

切中要害：

有没有办法在我的 JSF 应用程序中为应用程序范围内的所有图像附加客户端通用错误处理程序？它不一定是 jQuery 特别的，但客户端拥有它是必需的，直到每个人都告诉我这是不可能的......此外，将此代码放在尽可能少的位置也很重要。我不能将它添加到整个应用程序中的每个爆炸的 xhtml 页面中。

PrimeFaces 使用 ajax 进行分页。所以你基本上需要做的就是在 PrimeFaces ajax 响应完成后重新执行该脚本，这可以通过自定义事件pfAjaxComplete观察到。

所以，总而言之，这应该可以做到：

$(document).on("pfAjaxComplete", function(event, xhr, options) {
    // Do the job here.
});
相关文章：