Question

I am trying to popup a window when someone clicks a button on the data table.

                                    <h:commandButton
                                        action="#{cacheController.popupDetails}"
                                        immediate="false"
                                        onclick="popup()"
                                        value="View Details"
                                         styleClass="submit">
                                    </h:commandButton>

The associated popup function is

function popup() {
window.open('RDDetails.jsf','popupWindow', 'dependent=yes, menubar=no, toolbar=no, height=500, width=400');
}

Now in the new ‘RDDetails.jsf” file, I am trying to access the same managedBean cacheController. But the problem is, the pop-up window and JSF lifecycle is not in sync. As a result, the popup first displays blank and when I refresh, it pulls out the proper data.

Is there anyway I can click on a button which will do some processing in the managed bean and then opens a pop up which rerieves the processed data from the managed bean.

I am using JSF 1.1.

Answer 1

You’re here basically firing two independent requests: one associated with the form submit and other which opens the RDDetails.jsf in a popup. You’ll need to combine this in one request. You can achieve this in basically two ways:

1. Get rid of the onclick and just add target="_blank" to the <h:form> so that it get submitted into a new window/tab.

2. Block the default action by adding return false; to the onclick and do the business logic in the constructor of the bean associated with RDDetails.jsf. The only (major) caveat is here that the model won’t be updated with the form fields. Thus, you’ll need to pass the form fields as request parameters of the popup URL manually with help of JavaScript. You can then make use of managed property entries in the faces-config.xml to inject the GET request parameters into the model.

First way is obviously the easiest, but this doesn’t give you a “fullworthy” popup/modal dialog. The second way is a bit harder (unless you’ve already a good grasp on both JavaScript and JSF). I would then consider to look for a component library which provides a ready-to-use popup component.