FancyBox не работает внутри h: form

Question

У меня проблемы с отображением окна fancybox. Я действительно ничего не знаю о jquery, я делаю свои первые шаги, поэтому я надеюсь, что вы будете терпеливы. Мой пример:

<h:form>
        <h:outputLink id="example1" value="/Images/Flor1.jpg"  title=""  >
                <h:graphicImage alt="example1" value="/Images/TbnFlor1.jpg" />
        </h:outputLink>
</h:form>

Функция jquery

$(document).ready(
    function() {
        $("a#example1").fancybox();
});

Это не работает, если выходная ссылка находится за пределами формы, fancybox работает. Я искал ответ, чтобы решить эту проблему, но все еще не могу его найти. Надеюсь, вы поможете мне, ребята, спасибо!

Answer 1

JSF генерирует HTML.JavaScript / jQuery работает только с деревом HTML DOM, но не с исходным кодом JSF.Откройте страницу в своем веб-браузере, щелкните ее правой кнопкой мыши и выполните Просмотр источника .Вы увидите, что сгенерированный рассматриваемый элемент HTML <a> имеет идентификатор с префиксом с идентификатором родителя <form>, сгенерированным JSF <h:form>.Вместо этого вам нужно использовать именно этот идентификатор в селекторе jQuery.

Итак,

<h:form id="form">
    <h:outputLink id="example1" value="/Images/Flor1.jpg"  title=""  >
        <h:graphicImage alt="example1" value="/Images/TbnFlor1.jpg" />
    </h:outputLink>
</h:form>

с

$('#form\\:example1').fancybox();

или

$("[id='form:example1']").fancybox();

следует сделать.: является недопустимым символом в селекторах CSS, поэтому его необходимо экранировать.

Однако проще работать с классами стилей.

<h:outputLink ... styleClass="fancybox" />

с

$(".fancybox").fancybox();

Таким образом, вы можете легко применить его к другим элементам в будущем, не изменяя код jQuery.

См. Также:

• Как выбратьКомпоненты JSF, использующие jQuery?