RichFaces的A4J:loadScript清除在Ajax调用jQuery插件插件、A4J、RichFaces、loadScript

2023-09-10 19:22:32 作者:养个月亮吧

我加载jQuery的:

I'm loading jQuery embedded into RichFaces with:

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

接下来,我加载的的fancybox jQuery插件:

Next, I'm loading the FancyBox jQuery plugin with:

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

该插件工程确定第一次加载页面时,执行一个AJAX调用

The plugin works ok when the page is first loaded, however after executing an ajax call with

<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的变量,它失去了连接的插件

the plugin stops working. Tests show that the a4j:loadScript tag is reloaded on every ajax call, thereby reloading the jQuery variable which loses the attached plugin.

目前的解决方法是加载的jQuery通过把&LT;丰富:jQuery的查询=FN/&GT; 标签中的某处页面。它什么都不做,除了迫使jQuery的加载,而是因为它不使用A4J,jQuery是不重新加载的Ajax调用。

The current workaround is to load jQuery by putting a <rich:jQuery query="fn" /> tag somewhere in the page. It does nothing besides forcing jQuery to load, but because it doesn't use a4j, jQuery isn't reloaded on ajax calls.

不过,对此有一个干净的解决方案?我使用RichFaces的3.3.3,其中包括jQuery的1.3.2。

Still, is there a clean solution for this? I'm using RichFaces 3.3.3 which includes jQuery 1.3.2.

更新

的fancybox装有:

FancyBox is loaded with:

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。

After the first ajax call, jQuery no longer contains fancybox.

推荐答案

您需要的第一件事就是装在每个Ajax请求的脚本,使用 A4J:loadScript 为。

First thing you need is loading the script on each ajax request, use a4j:loadScript for that.

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

二:执行该脚本的fancybox当组件正在被重新呈现(AJAX调用它,而是重新提交包含与的fancybox元素DOM树的一部分)。我会做到这一点通过编写自定义Facelets的组成部分,是这样的。

Second: execute that fancybox script when component is being rerendered (ajax call which rerenders part of dom tree containing element with fancybox). I would do that by writing a custom facelets component, like this.

fancyInput.xhtml:

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>