Richfaces a4j:loadScript 清除 ajax 调用上的 jQuery 插件

我正在加载嵌入到 RichFaces 中的 jQuery：

<a4j:loadScript src="resource://jquery.js"/>

接下来，我将使用以下命令加载 FancyBox jQuery 插件：

<script type="text/javascript" src="/App/fancybox/jquery.fancybox-1.3.4.pack.js"/>

该插件在页面首次加载时工作正常，但是在执行 ajax 调用后

<a4j:jsFunction name="myMethod" data="#{myController.jsonDataToReturn}" action="#{myController.doSomething()}" oncomplete="populateData(data);">     
  <a4j:actionparam name="selectedTag" assignTo="#{myController.selectedTag}"/>
</a4j:jsFunction>

该插件停止工作。测试表明a4j:loadScript标签在每次 ajax 调用时都会重新加载，从而重新加载 jQuery 变量，从而丢失附加的插件。

当前的解决方法是通过放置一个来加载 jQuery<rich:jQuery query="fn" />标记页面中的某个位置。除了强制加载 jQuery 之外，它什么也不做，但因为它不使用 a4j，所以在 ajax 调用时不会重新加载 jQuery。

不过，有一个干净的解决方案吗？我正在使用 RichFaces 3.3.3，其中包括 jQuery 1.3.2。

Update:

FancyBox 加载有：

jQuery(document).ready( function(){
    jQuery('.fancyboxLink').live('click',aclick);
});

function aclick(){
    jQuery.fancybox({
        href: '#{facesContext.externalContext.requestContextPath}/webpage.xhtml',
            type:'iframe',
            width:710,
            height:510,
            padding:0,
            margin:0,
            hideOnOverlayClick:false,
            overlayColor:'#000'
    });
    return false;
}

第一次 ajax 调用后，jQuery 不再包含 fancybox。

您需要的第一件事是在每个 ajax 请求上加载脚本，使用a4j:loadScript为了那个原因。

<a4j:loadScript src="/App/fancybox/jquery.fancybox-1.3.4.pack.js"/>

第二：在重新渲染组件时执行 fancybox 脚本（ajax 调用，重新渲染包含带有 fancybox 元素的 dom 树的一部分）。我将通过编写自定义 Facelets 组件来做到这一点，如下所示。

fancyInput.xhtml：

<ui:component xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:a4j="http://richfaces.org/a4j"
                xmlns:rich="http://richfaces.org/rich"
                xmlns:c="http://java.sun.com/jstl/core">

    <a4j:loadScript src="resource:///App/fancybox/jquery.fancybox-1.3.4.pack.js"/>

    <!-- id is passed by component's client as facelet param. -->
    <h:commandButton id="#{id}" otherParameters="....."/>
    <script type="text/javascript">
        jQuery(function() {
            // Attaching fancybox to rendered component.
            jQuery($('#{rich:clientId(id)}')).live('click',aclick);
        });
    </script>
</ui:component>

您的页面：

<ui:include src="fancyInput.xhtml">
    <ui:param name="id" value="anId"/>
    <ui:param name="otherParams" value="..."/>
</ui:include>