File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
The moose likes JSF and the fly likes Calling a backingBean method from javascript Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login

Win a copy of OCA Java SE 8 Programmer I Study Guide 1Z0-808 this week in the OCAJP forum!
JavaRanch » Java Forums » Java » JSF
Bookmark "Calling a backingBean method from javascript" Watch "Calling a backingBean method from javascript" New topic

Calling a backingBean method from javascript

Ranjith Kumar

Joined: Mar 30, 2006
Posts: 6
Is there a way to call a backingBean method from javascript?

I have a requirement where a click on an image should invoke a bean method. Since i cannot have an action attribute in graphicImage, I invoke a javascript method which fires the "onclick" event of a hidden button where i have specified the bean method to be called in the action attribute.

My code -

This is the javascript function that i call on the click of the image

this is the button that I try to invoke from the javascript function -

PS: i have the correct spelling for klick in my code. It is just that javaranch does not accept the correct spelling here.

When i click the image, i do get the alerts, but the bean method does not get executed. Has anyone faced the same problem? Is there a better way to do this?

Thanks in advance
Ranjith Kumar

Joined: Mar 30, 2006
Posts: 6
I had previously tried the following lines -

but that doesnt work either. So i tried "onclick" as in my previous post.

Any help is greatly appreciated.

Ulf Dittmer

Joined: Mar 22, 2005
Posts: 42952
I think you fundamentally misunderstand how web applications work. JavaScript is executed on the client, while the backing beans run on the server. There is no way to have one call the other. You might want to read this article.
[ April 20, 2006: Message edited by: Ulf Dittmer ]
Ranjith Kumar

Joined: Mar 30, 2006
Posts: 6
Thanks for the response.

I guess I should have made myself clearer. I am trying to invoke the Click event of the commandButton from the javascript where I have specified bean method in the action attribute.

Now, I can invoke the bean method when i manually click the button. But i am not able to fire the click event from the javascript. Is there a way to do that? Is there an alternative?

Thanks in advance.
Daniel Rickardsson

Joined: Apr 19, 2006
Posts: 4

One way could be to use the method click in you javascript.
You could use it to simulate a click on a h:commandLink, see code below:

--- js ---

--- jsf ---
<outputText value=""/>
Ranjith Kumar

Joined: Mar 30, 2006
Posts: 6
Hey Daniel,

Thanks a lot...! That did work.

But I am at a loss as to understand how that worked. The way i see it, i was doing the same thing for the commandButton which never invoked the action method.

You were a great help.
navdeep thakur

Joined: May 09, 2007
Posts: 18

Hi Daniel,

I have tried to follow the same which you have suggested, but still I am facing some issue.

Please have a look on my code below:

Java Script Code

JSF Component Code

I am using commandLink under dataTable.

Can you please help me out?


Navdeep Thakur alias Navi
Bibin Zacharias

Joined: Mar 31, 2009
Posts: 13
You can empeded a image into a command button. While rendering the the image will display and the image will act as a normal button. you can trigger your javascript on onclick.

navdeep thakur

Joined: May 09, 2007
Posts: 18

Thanks budy
Don Cracker

Joined: Feb 21, 2010
Posts: 3

I am trying to invoke a commandButton with an action (i.e. invoke a bound method on a backing bean) from javascript. I am doing this because the method binding will not work if I place the <h:commandButton> tag within a jQuery component.

So, within my jQuery component (a modal dialog) I have an anchor that initiates the JS method:

And outside the jQuery element, I define a hidden JSF commandButton:

Now the important part - the javascript:

defaultForm is the id of my JSF <h:form>.

The alert method is invoked, and displays an object reference... BUT the click() on the object just NEVER manages to work... i.e. the bound backing bean method never ever gets reached.
Any suggestions? I've tried making the anchor a commandButton with onclick defined - but that has the same result. I am using JSF 1.2 (project conrestraint).
Any help would be very greatly appreciated.
sri raman

Joined: Dec 03, 2009
Posts: 6
Hi everyOne,

Im facing the same problem reported here. actually im invoking a actionListener in CommandLink from a JS. The page is getting refreshed, still the listner in the bean is not invoked.

In my case, im using frames. Basically, i have two frames, in that i call the listner in the top frame when the button in the bottom one is clicked.

can anyone offer me a solution, so that i can find what actually im missing?? It ll be great if you can tell me how to get the trace of JSF lifecycle in the logs?

P.S: I have added h:messages and it works fine, still no error reported.
Bronto Brontkevich

Joined: Dec 10, 2010
Posts: 10
Thank you very much!
I did not know anything about f:actionListener and f:valueChangeListener tags! I'm in samadhi now...
But I can not substitute child h:commandLink tags from my custom element to f:actionListener because I can not create new HtmlCommandLink inside of my renderer class. Because when I call encodeParentAndChildren(fContext, link); I get error: "CommandLink must be contained in a form". I have a form on my page. This form is ancestor of my custom tag.
But knowing about f:valueChangeListener will help me very soon. Because I need several valueChangeListeners too!
Thanks again!
badre zouiri

Joined: Mar 30, 2012
Posts: 1
this is an exmple and it work for me

<h:form id="Mainpage">

<t:dataTable id="listContacts"

<h:selectBooleanCheckbox value="#{contact.selectedToBeDelete}" >



<h:column >

<hutputText value="#{contact.alias}" />

<hutputText value="#{contact.gsmNumber}" />

<hutputText value="#{}" />
<h:column >
<h:commandButton id="clicktoshow" style="display:none" actionListener="#{DataContactBean.ShowSelectedContact}">
<f:param id="selectedContact" value="#{contact}"></f:param>
Volodymyr Levytskyi
Ranch Hand

Joined: Mar 29, 2012
Posts: 505

Hello to all!

I managed to resolve this issue!
Everything I needed is to have hidden form with command button inside.
Here is my javascript simple code:
function prepareRegister() {
Here is my simple hidden form:
<h:form id="hiddenForm" style="display: none;">
<h:commandButton id="gotoRegButton" actionListener="#{participant.createSetup}" />
Hidden form resolved problem to find command button by id!!!

True person is moral, false is right!
It is sorta covered in the JavaRanch Style Guide.
subject: Calling a backingBean method from javascript