Richfaces a4j: loadScript очищает плагины jQuery при вызовах ajax - PullRequest
Новая
       2

Richfaces a4j: loadScript очищает плагины jQuery при вызовах ajax

4 голосов
/ 26 августа 2011

Я загружаю 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>

плагин перестает работать.Тесты показывают, что тег a4j:loadScript перезагружается при каждом вызове ajax, таким образом, перезагружая переменную jQuery, которая теряет подключенный плагин.

Текущий обходной путь - загрузка jQuery путем помещения тега <rich:jQuery query="fn" /> где-то на странице,Он ничего не делает, кроме принудительной загрузки jQuery, но поскольку он не использует a4j, jQuery не перезагружается при вызовах ajax.

Тем не менее, есть ли для этого чистое решение?Я использую 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.

1 Ответ

2 голосов
/ 29 августа 2011

Первое, что вам нужно, это загрузить скрипт при каждом ajax-запросе, для этого используйте a4j:loadScript. 

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

Второе: выполнить этот скрипт fancybox при рендеринге компонента (вызов ajax, который рендерит часть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>
...