rich: jQuery внутри пользовательского интерфейса: состав

Question

Я пытаюсь использовать компонент rich :face rich: jQuery внутри композиции facelet. Но я не в состоянии произвести вызов jquery.

<ui:composition xmlns="http://www.w3.org/1999/xhtml"

<ui:define name="body"> 
<h:form id="f"><h:commandLink value="Go" id="ex"/>
            <rich:jQuery selector="ex" query="alert('aw')"></rich:jQuery>

---

Еще один вопрос ... как я собираюсь переписать это, чтобы попасть в режим номер 1 .. который является одноразовым запросом, применяемым немедленно или к событию готовности документа. Извините, но я совершенно сбит с толку ... Вы можете привести другой пример для режима № 1? Надеюсь, что это просветит меня ...:)

Answer 1

Я не уверен, что вы пытаетесь сделать из приведенного вами примера, но, возможно, вам поможет следующее:

Из онлайн-документации :

rich: jQuery позволяет применять стили и поведение к объектам DOM.

Насколько я понимаю, атрибут запроса содержит функции jQuery, которые можно вызывать для элемента. Чтобы получить предупреждение на своем клике, вы можете сделать следующее:

<h:commandLink value="AW1" id="x1"/>
<rich:jQuery selector="#x1" query="click(function(){alert('test')});" /> 

Больше из документации:

rich: jQuery можно использовать в двух основных режимах:

1. как одноразовый запрос, примененный немедленно или к событию готовности документа
2. как функция JavaScript, которая может быть вызвана из кода JavaScript

Режим выбирается с атрибутом «хронометраж», который имеет следующий Варианты:

1. немедленное - применение запроса немедленно;
2. onload - применение запроса при загрузке документа;
3. onJScall - применение запроса по вызванному Функция JavaScript, определенная с помощью атрибута «name».

Определение атрибута «name» обязательно при значении атрибута «хронометраж» это "onJScall". Если атрибут «имя» определяется при значении «тайминг» равно «немедленный» или «onload», запрос применяется в соответствии с это значение, но у вас все еще есть возможность вызвать его имя функции.

Атрибут «селектор» определяет объект или список объектов. запрос определяется с помощью атрибута «запрос».

Существует несколько разных способов использования этого компонента.

Первый режим - одноразовый запрос, применяемый немедленно или к событию готовности документа. Есть примеры из онлайн документации.

Во втором режиме вы хотите, чтобы JS-функция вызывалась из события, пример взят из документации:

<h:graphicImage width="50" value="/images/warning.png" onmouseover="enlargePic(this, {pwidth:'60px'})" onmouseout="releasePic(this)"  />
<rich:jQuery name="enlargePic" timing="onJScall" query="animate({width:param.pwidth})" />
<rich:jQuery name="releasePic" timing="onJScall" query="animate({width:'50px'})"/> 

Как вы можете видеть, функция анимации jQuery определена в атрибуте запроса и будет применяться к компоненту изображения, когда мышь наводит курсор на изображение.

Если вы хотите, чтобы JS-функция вызывалась, когда кто-то щелкает ссылку, вам не нужно использовать компонент rich: jquery и все еще использовать jQuery в своем коде javascript. JQuery поставляется с RichFaces. Если вы используете RF 3.3.3, вам придется использовать jQuery в режиме без конфликтов: http://docs.jquery.com/Using_jQuery_with_Other_Libraries

Наконец, посмотрите демонстрационную версию этого компонента:

http://livedemo.exadel.com/richfaces-demo/richfaces/jQuery.jsf;jsessionid=BD9D90829B8C4A9E230203856497FC9C?c=jQuery&tab=usage

UPDATE

На основании примера, приведенного вами в одном из ответов, посмотрите, как я это сделал ниже:

<h:commandLink value="AW" id="x" onclick="testaw(this);return false;"/>
<rich:jQuery name="testaw" timing="onJScall"  query="stop().fadeOut('slow')"/>

Вы заметите, что я удалил селектор и атрибуты события, потому что пример, который вы пытаетесь сделать, попадет во второй режим (как функцию JavaScript, которая может быть вызвана из кода JavaScript), который упоминается в моем оригинале ответ.

Я добавил два атрибута «имя» и «время», которые являются обязательными при использовании компонента jQuery в этом режиме.

Я также добавил событие onclick к ссылке (и обязательно вернул false, поскольку этот компонент попытается отправить форму, и если это произойдет, вы не увидите эффект jquery).

ОБНОВЛЕНИЕ 2

Как указано ниже, приведен рабочий пример, основанный на вашем примере с использованием в качестве разового запроса, применяемого при загрузке страницы:

<h:commandLink value="AW2" id="x2"/>
<rich:jQuery selector="#x2" timing="onload" query="stop().fadeOut('slow')" />

Другой пример:

<h:commandLink value="AW3" id="x3"/>
<rich:jQuery selector="#x3" query="click(function(){jQuery(this).stop().fadeOut('slow')})" />

Проблема с вышесказанным - отправка формы. Я пытался это думать, что это будет работать, но это не так:

<h:commandLink value="AW3" id="x3"/>
<rich:jQuery selector="#x3" query="click(function(e){jQuery(this).stop().fadeOut('slow');e.preventDefault()});" />