RichFaces的A4J：loadScript清除Ajax的jQuery插件調用

Question

我加載jQuery的嵌入RichFaces的有：

<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> 

插件停止窩rking。測試表明，a4j:loadScript標記在每次ajax調用時都會重新加載，從而重新加載失去連接插件的jQuery變量。

目前的解決方法是通過在頁面中的某處放置一個<rich:jQuery query="fn" />標籤來加載jQuery。除了強制jQuery加載之外，它什麼也沒做，但因爲它不使用a4j，所以jQuery不會在ajax調用中重新加載。

不過，有沒有一個乾淨的解決方案呢？我正在使用包含jQuery 1.3.2的RichFaces 3.3.3。

更新：

的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"/> 

二：成分被重新呈現（AJAX調用，它重新渲染包含元素與的fancybox DOM樹的一部分）時執行該腳本的fancybox。我會通過編寫一個自定義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>