LightBox and Graphic Link issue

UI Components for JSF
Post Reply
aussiemcgr
Posts: 19
Joined: 08 Jan 2015, 16:32

24 May 2015, 22:59

I have an interesting problem. I have a page which is using a template and is initially navigated to via a commandButton. On the page, I have a LightBox using an iFrame where the link to open the LightBox is just an image (no text). When the user navigates to the page, the LightBox is automatically triggered based on a certain condition, but the user can also force the LightBox to display by clicking the image at any time.
The code for all of this can be found below:

Code: Select all

<ui:define name="helpDiv">
	<p:lightBox iframe="true" id="helpbox" width="1000px" visible="#{user.getCount() == 0}">
		<h:link outcome="path/pagename">
			<h:graphicImage library="images" name="image.png" />
		</h:link>
	</p:lightBox>
</ui:define>
When the user navigates to the page using the commandButton, a bug occurs where if the user clicks the image, the user is redirected to the outcome page instead of the page opening up in the LightBox. For reference: when navigating to the page using the commandButton, the url shown is that of the previous page (expected behavior based on what I've read about the commandButtons and commandLinks).
However, if the user loads the page in any way such that the url is correct (such as directly typing in the url), clicking on the image opens the page in the LightBox like expected.
I've compared the generated html code and found one minor difference between the two scenarios. Here are the two scenarios:
1. Page navigated to using commandButton, such that the url reads: http://www.example.com/webapp
Generated HTML:

Code: Select all

<div id="helpbox">
	<a href="/webapp/path/pagename.xhtml">
		<img src="/webapp/javax.faces.resource/image.png.xhtml?ln=images" alt="">
	</a>
</div>
Outcome:
When the user clicks on the image, the user is redirected to the pagename.xhtml page. ***This is the incorrect behavior***


2. Page navigated to such that the url reads: http://www.example.com/webapp/thispage.xhtml
Generated HTML:

Code: Select all

<div id="helpbox">
	<a href="/webapp/path/pagename.xhtml">
		<img src="/webapp/javax.faces.resource/image.png.xhtml?ln=images">
	</a>
</div>
Outcome:
When the user clicks on the image, the user is shown the pagename.xhtml page in a LightBox ***This is the expected behavior***

So the only difference I can see between the two is the img tag has an empty alt parameter. Is that the root of the problem? If so, why would an empty alt tag create a bug like this, and why is the alt tag only showing up when the url is incorrect? Also, how would I fix this?
Primefaces Version: 5.1
Server: Local Tomcat 7
Java Version: 8

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 5 guests