Richfaces a4j：loadScript在ajax調用中清除jQuery插件

Question

我正在使用以下方法將嵌入到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>

插件停止工作。 測試表明，每個ajax調用都會重新加載a4j:loadScript標記，從而重新加載丟失附件的jQuery變量。

當前的解決方法是通過在頁面中的某個地方放置<rich:jQuery query="fn" />標記來加載jQuery。 除了強制加載jQuery外，它沒有任何作用，但是由於它不使用a4j，因此不會在ajax調用中重新加載jQuery。

仍然有一個干凈的解決方案嗎？ 我正在使用RichFaces 3.3.3，其中包括jQuery 1.3.2。

更新 ：

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。

Answer 1

您需要做的第一件事是在每個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>