[英]Richfaces a4j:loadScript clears jQuery plugins on ajax calls
I'm loading jQuery embedded into RichFaces with: 我正在使用以下方法将嵌入到RichFaces中的jQuery加载:
<a4j:loadScript src="resource://jquery.js"/>
Next, I'm loading the FancyBox jQuery plugin with: 接下来,我将使用以下代码加载FancyBox jQuery插件:
<script type="text/javascript" src="/App/fancybox/jquery.fancybox-1.3.4.pack.js"/>
The plugin works ok when the page is first loaded, however after executing an ajax call with 首次加载页面时,该插件可以正常运行,但是在执行了ajax调用后
<a4j:jsFunction name="myMethod" data="#{myController.jsonDataToReturn}" action="#{myController.doSomething()}" oncomplete="populateData(data);">
<a4j:actionparam name="selectedTag" assignTo="#{myController.selectedTag}"/>
</a4j:jsFunction>
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. 测试表明,每个ajax调用都会重新加载
a4j:loadScript
标记,从而重新加载丢失附件的jQuery变量。
The current workaround is to load jQuery by putting a <rich:jQuery query="fn" />
tag somewhere in the page. 当前的解决方法是通过在页面中的某个地方放置
<rich:jQuery query="fn" />
标记来加载jQuery。 It does nothing besides forcing jQuery to load, but because it doesn't use a4j, jQuery isn't reloaded on ajax calls. 除了强制加载jQuery外,它没有任何作用,但是由于它不使用a4j,因此不会在ajax调用中重新加载jQuery。
Still, is there a clean solution for this? 仍然有一个干净的解决方案吗? I'm using RichFaces 3.3.3 which includes jQuery 1.3.2.
我正在使用RichFaces 3.3.3,其中包括jQuery 1.3.2。
Update : 更新 :
FancyBox is loaded with: 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;
}
After the first ajax call, jQuery no longer contains fancybox. 在第一个ajax调用之后,jQuery不再包含fancybox。
First thing you need is loading the script on each ajax request, use a4j:loadScript
for that. 您需要做的第一件事是在每个ajax请求上加载脚本,为此使用
a4j:loadScript
。
<a4j:loadScript src="/App/fancybox/jquery.fancybox-1.3.4.pack.js"/>
Second: execute that fancybox script when component is being rerendered (ajax call which rerenders part of dom tree containing element with fancybox). 第二:重新渲染组件时执行该fancybox脚本(ajax调用,该调用将使用fancybox渲染包含元素的dom树的一部分)。 I would do that by writing a custom facelets component, like this.
我可以通过编写一个这样的自定义facelets组件来做到这一点。
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>
Your page: 您的页面:
<ui:include src="fancyInput.xhtml">
<ui:param name="id" value="anId"/>
<ui:param name="otherParams" value="..."/>
</ui:include>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.