Calling a backing bean method from onClick?

[Darrin Smith]

I have some HtmlGraphicImages (h:graphicImage) on a page and I'd like to give the user the ability to click on the images and have another web page brought up that shows a larger version of the image they clicked on.

How can this be done?

I know how to do it using a button (since it has an action event that my backing bean can intercept) that would sit under each image that would then launch another page that holds another image in a larger format, but is there a way to do this without using the button?

The images do have the onclick JavaScript method, so I suppose that it could be used in some fashion.

Note that I can't just use a button to hold the image as my images get loaded dynamically from a servlet, and the button's image attribute does not take a URL but only a String that holds the image name.

In short what I need to know how to do is to call a method inside my backing bean that takes a String parameter (to hold the name of the image clicked on) when a user clicks an image. After that, I can forward on to another JSP and have it load up a larger version of the image.

Thanks!


UPDATE:

Well I was wrong. The HtmlCommandButton's setImage method will accept a URL as a string, so the solution is to use a button and set the image for it as a String that holds a URL. That's all there is to it!
[ June 06, 2005: Message edited by: Darrin Smith ]

[Darrin Smith]

Hmmm...is this something that cannot be done ( ), is so simple that I shouldn't even have asked ( ), or am I just being ignored ( )?

[Varun Khanna]

Best Solution :
- Add action attibute and it's implementation in your customized and extended h:graphicImgae tag.

Another workaround,
- Invoke javascript method on image "onclick" and call button.click() on an JSF hidden button and button can invoke backing bean method.
To hide the JSF command button use DHTML.

[Darrin Smith]

Originally posted by Varun Khanna:
Best Solution :
- Add action attibute and it's implementation in your customized and extended h:graphicImgae tag.

Another workaround,
- Invoke javascript method on image "onclick" and call button.click() on an JSF hidden button and button can invoke backing bean method.
To hide the JSF command button use DHTML.

I thought about doing the hidden button thing but it still wouldn't allow for a value to be passed in to button.click(), so it wouldn't help.

Since I'm using Creator, I'm leary of creating my own version of HtmlGraphicImage.

I thought that there would be some way to invoke a backing bean method (sort of like what is done with the value binding to get/set property) from within onClick itself, but maybe not.

[Varun Khanna]

Put a hidden variable in your page too, and prior to button.click() set your value in it and in the backing bean you can get the hidden variable's value.

[Darrin Smith]

Originally posted by Varun Khanna:
Put a hidden variable in your page too, and prior to button.click() set your value in it and in the backing bean you can get the hidden variable's value.

I thought you might say that shortly after I replied!

OK, I'll poke around and try to find out how to do this.

Thanks!

[Darrin Smith]

Originally posted by Darrin Smith:


I thought you might say that shortly after I replied!

OK, I'll poke around and try to find out how to do this.

Thanks!

Yup, that works just fine, although I need to hide my button and input fields now.

Thanks!

[Varun Khanna]

Originally posted by Darrin Smith:


Yup, that works just fine,

Cool

although I need to hide my button and input fields now.

DHTML

[Klaus Schuster]

Hi,

I have the same problem to get to my BackingBean clicking a selectBooleanCheckbox:

<t:selectBooleanCheckbox forceId="true" id="chk" name="checkbox_chk"
								onclick="frm1.selectboxbutton.click(); onChangeSelect(this);" 
								value="#{entry.aktiv}">
							</t:selectBooleanCheckbox>
							<h:commandButton class="button"
								value="" name="selectboxbutton" 
								id="selectboxbutton"
								action="#{entry.checkbox}" 
								immediate="true"
								style="visibility:hidden;">
							</h:commandButton>

the Problem is, that I always get the JavaScript error: frm1.selectboxbutton is null or not an object.
Both of the tags are in my form and in a dataTable:

			<h:form id="frm1">

Anyone any Idea? Thanks

[Tim Holloway]

Darrin Smith wrote:
Note that I can't just use a button to hold the image as my images get loaded dynamically from a servlet, and the button's image attribute does not take a URL but only a String that holds the image name.

[ June 06, 2005: Message edited by: Darrin Smith ]

Oops, I was all set to get eloquent and realized you'd answered your question even as you asked it. All the subsequent responses are just icing.

Anyway, it's not that the image attribute "takes" a URL. The attribute is a URL. That's the only way you can request data (image or otherwise) from an HTTP server. Just because there's no "http:" or slashes, doesn't mean it's not a URL. If you don't fully qualify it, it's a relative URL. The http://servername:port/context parts are all implied.

[Bauke Scholtz]

Klaus Schuster wrote:Hi,

I have the same problem

You should not resurrect old topics nor hijack other's topics for that.
Kindly start a new topic for each independent problem. Feel free to include links to topics of relevance.

[Klaus Schuster]

With this reaction I get very often the answer: "take the search function for that kind of problem" in some other forums.

[Bauke Scholtz]

Klaus Schuster wrote:With this reaction I get very often the answer: "take the search function for that kind of problem" in some other forums.

Uh?
I didn't said that you shouldn't search.
I just said that you shouldn't resurrect old topics nor hijack other's topics.