我加载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>