FancyBox doesn't work inside a h:form

Question

im having troubles displaying a fancybox window. I really don't know anything about jquery, i'm giving my first steps, so i hope you be patient. My example:

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

The jquery function

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

This doesn't work, if the output link is outside the form, fancybox works. I've been looking an answer to solve this, but still coulnd't find it. I hope you can help me guys, thanks!

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

JSF generates HTML. JavaScript/jQuery works with HTML DOM tree only, not with original JSF source code. Open the page in your webbrowser, rightclick it and do a View Source. You'll see that the generated HTML <a> element in question has its ID prefixed with the ID of the parent <form> as generated by JSF <h:form>. You need to use exactly that ID in the jQuery selector instead.

So,

<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>

with

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

or

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

should do. The : is an illegal character in CSS selectors, so it had to be escaped.

Easier is however to work with style classes.

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

with

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

This way you can more easily apply it on future other elements as well without the need to change the jQuery code.

FancyBox doesn't work inside a h:form

1 Answers1

See also: