You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@myfaces.apache.org by "CONNER, BRENDAN (SBCSI)" <bc...@sbc.com> on 2005/07/15 18:16:41 UTC
Doing Popup Windows Using JSF
I am trying to launch a pop-up window using JSF, where the pop-up window
and base window share the same managed bean. There is an example of how
to do this in Sun's Core JavaServer Faces book (Chapter 12) that defines
two JSF pages that share a common managed bean:
1. index2.jsp
2. popup2.jsp
When one clicks on a command button in index2.jsp, it executes
JavaScript to launch a popup window, and then it submits a form that
puts popup2.jsp into the popup window. However, the code doesn't seem
to work. I list the code at the end of this e-mail.
There are two problems with the code:
1. From doing a "view source" on the generated HTML, I can see that HTML
anchor tag rendered by <h:commandLink> does not specify a name for the
control; it just specifies an id for the control. Therefore, the
JavaScript in index2.jsp does not recognize hidden["hidden:go"] as a
valid object, since there is no control with the name "hidden:go"
(there's only a control with the *id* of "hidden:go"). I can bypass
this problem by referring to this control as hidden[1] instead of
hidden["hidden:go"], although that's kind of klugey. Still, that
eliminates that problem. The next problem is the real kicker.
2. When the popup gets displayed, it is not populated with popup2.jsp.
Rather, it is populated with another copy of index2.jsp. Just in case
there were errors in index2.jsp, I tried using a blank JSP as the popup
JSP, but, again, the popup was populated with index2.jsp rather than the
blank JSP.
Any ideas about why this doesn't work? I tried it using two different
JSF reference implementations (including MyFaces), but I get the same
errors.
index2.jsp:
<html>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<f:view>
<head>
<script language="JavaScript1.1">
function doPopup(source) {
country = source.form[source.form.id + ":country"];
for (var i = 0; i < country.length; i++) {
if (country[i].checked) {
popup = window.open("",
"popup",
"height=300,width=200,toolbar=no,menubar=no,"
+ "scrollbars=yes");
popup.openerFormId = source.form.id;
popup.focus();
var hidden = document.forms.hidden;
hidden["hidden:go"].value = "x"; // any value will
do
hidden["hidden:country"].value = country[i].value;
hidden.submit();
}
}
}
</script>
<title>A Simple Java Server Faces Application</title>
</head>
<body>
<h:form>
<table>
<tr>
<td>Country:</td>
<td>
<h:selectOneRadio id="country"
value="#{bb.country}">
<f:selectItem itemLabel="USA" itemValue="USA"/>
<f:selectItem itemLabel="Canada"
itemValue="Canada"/>
</h:selectOneRadio>
</td>
</tr>
<tr>
<td>State/Province:</td>
<td>
<h:inputText id="state" value="#{bb.state}"/>
</td>
<td>
<h:commandButton value="..."
onclick="doPopup(this); return false;"/>
</td>
</tr>
</table>
<p>
<h:commandButton value="Next" action="next"/>
</p>
</h:form>
<%-- This hidden form sends a request to a popup window. --%>
<h:form id="hidden" target="popup">
<h:inputHidden id="country" value="#{bb.country}"/>
<h:commandLink id="go" action="showStates" value="">
<f:verbatim/>
</h:commandLink>
</h:form>
</body>
</f:view>
</html>
popup2.jsp:
<html>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<f:view>
<head>
<script language="JavaScript1.1">
function doSave(value) {
var formId = window.openerFormId;
opener.document.forms[formId][formId + ":state"].value =
value;
window.close();
}
</script>
<title>Select a state/province</title>
</head>
<body>
<h:form>
<h:dataTable value="#{bb.statesForCountry}" var="state">
<h:column>
<h:outputLink value="#"
onclick="doSave('#{state}');">
<h:outputText value="#{state}" />
</h:outputLink>
</h:column>
</h:dataTable>
</h:form>
</body>
</f:view>
</html>
faces-config.xml:
<faces-config>
<navigation-rule>
<navigation-case>
<from-outcome>showStates</from-outcome>
<to-view-id>/popup2.jsp</to-view-id>
</navigation-case>
</navigation-rule>
<managed-bean>
<managed-bean-name>bb</managed-bean-name>
<managed-bean-class>com.corejsf.BackingBean</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>
</faces-config>
- Brendan
Re: Doing Popup Windows Using JSF
Posted by Werner Punz <we...@gmx.at>.
try it the following way
var form = document.getElementById("editForm");
form.action= './popupform.jsf';
form.submit();
return true;
and call that code from a link.
where edit form is the form responsible for sending the params (which
might be a hidden form, because the params are transferred before)
This one might work better.
I cannot gurantee that that code works but it worked for me for
exporting data, where I intercepted the request with a phase listener.
CONNER, BRENDAN (SBCSI) wrote:
> I am trying to launch a pop-up window using JSF, where the pop-up window
> and base window share the same managed bean. There is an example of how
> to do this in Sun's Core JavaServer Faces book (Chapter 12) that defines
> two JSF pages that share a common managed bean:
>
> 1. index2.jsp
> 2. popup2.jsp
>
> When one clicks on a command button in index2.jsp, it executes
> JavaScript to launch a popup window, and then it submits a form that
> puts popup2.jsp into the popup window. However, the code doesn't seem
> to work. I list the code at the end of this e-mail.
>
> There are two problems with the code:
>
> 1. From doing a "view source" on the generated HTML, I can see that HTML
> anchor tag rendered by <h:commandLink> does not specify a name for the
> control; it just specifies an id for the control. Therefore, the
> JavaScript in index2.jsp does not recognize hidden["hidden:go"] as a
> valid object, since there is no control with the name "hidden:go"
> (there's only a control with the *id* of "hidden:go"). I can bypass
> this problem by referring to this control as hidden[1] instead of
> hidden["hidden:go"], although that's kind of klugey. Still, that
> eliminates that problem. The next problem is the real kicker.
>
> 2. When the popup gets displayed, it is not populated with popup2.jsp.
> Rather, it is populated with another copy of index2.jsp. Just in case
> there were errors in index2.jsp, I tried using a blank JSP as the popup
> JSP, but, again, the popup was populated with index2.jsp rather than the
> blank JSP.
>
> Any ideas about why this doesn't work? I tried it using two different
> JSF reference implementations (including MyFaces), but I get the same
> errors.
>
>
>
> index2.jsp:
>
> <html>
> <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
> <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
>
> <f:view>
> <head>
> <script language="JavaScript1.1">
> function doPopup(source) {
> country = source.form[source.form.id + ":country"];
> for (var i = 0; i < country.length; i++) {
> if (country[i].checked) {
> popup = window.open("",
> "popup",
> "height=300,width=200,toolbar=no,menubar=no,"
> + "scrollbars=yes");
> popup.openerFormId = source.form.id;
> popup.focus();
> var hidden = document.forms.hidden;
> hidden["hidden:go"].value = "x"; // any value will
> do
> hidden["hidden:country"].value = country[i].value;
> hidden.submit();
> }
> }
> }
> </script>
> <title>A Simple Java Server Faces Application</title>
> </head>
> <body>
> <h:form>
> <table>
> <tr>
> <td>Country:</td>
> <td>
> <h:selectOneRadio id="country"
> value="#{bb.country}">
> <f:selectItem itemLabel="USA" itemValue="USA"/>
> <f:selectItem itemLabel="Canada"
> itemValue="Canada"/>
> </h:selectOneRadio>
> </td>
> </tr>
> <tr>
> <td>State/Province:</td>
> <td>
> <h:inputText id="state" value="#{bb.state}"/>
> </td>
> <td>
> <h:commandButton value="..."
> onclick="doPopup(this); return false;"/>
> </td>
> </tr>
> </table>
> <p>
> <h:commandButton value="Next" action="next"/>
> </p>
> </h:form>
>
> <%-- This hidden form sends a request to a popup window. --%>
> <h:form id="hidden" target="popup">
> <h:inputHidden id="country" value="#{bb.country}"/>
> <h:commandLink id="go" action="showStates" value="">
> <f:verbatim/>
> </h:commandLink>
> </h:form>
> </body>
> </f:view>
> </html>
>
>
> popup2.jsp:
>
> <html>
> <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
> <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
>
> <f:view>
> <head>
> <script language="JavaScript1.1">
> function doSave(value) {
> var formId = window.openerFormId;
> opener.document.forms[formId][formId + ":state"].value =
> value;
> window.close();
> }
> </script>
> <title>Select a state/province</title>
> </head>
> <body>
> <h:form>
> <h:dataTable value="#{bb.statesForCountry}" var="state">
> <h:column>
> <h:outputLink value="#"
> onclick="doSave('#{state}');">
> <h:outputText value="#{state}" />
> </h:outputLink>
> </h:column>
> </h:dataTable>
> </h:form>
> </body>
> </f:view>
> </html>
>
>
>
> faces-config.xml:
>
> <faces-config>
> <navigation-rule>
> <navigation-case>
> <from-outcome>showStates</from-outcome>
> <to-view-id>/popup2.jsp</to-view-id>
> </navigation-case>
> </navigation-rule>
>
> <managed-bean>
> <managed-bean-name>bb</managed-bean-name>
> <managed-bean-class>com.corejsf.BackingBean</managed-bean-class>
> <managed-bean-scope>session</managed-bean-scope>
> </managed-bean>
> </faces-config>
>
>
> - Brendan
>
>
Re: Doing Popup Windows Using JSF
Posted by Jozef Hribik <jo...@apsoft.sk>.
Hi,
I have started with the book example too and found it not working too.
Here is my code.
1. in the parent window there are many commandButtons (kickers) using
the same PopUp and 2 JavaScript functions.
The elementID in doPopupKonto() specifies where the return value from
PopUp must be placed.
<h:commandButton styleClass="btn" value="#{msg.btn_more}"
onclick="doPopupKonto('subviewEB:ebform:eb_kontoNummer'); return false;"/>
<script type="text/javascript">
var whichElement = "subviewEB:ebform:eb_kontoNummer";
function doPopupKonto(elementID) {
whichElement = elementID;
popup = window.open("kontoListe.jsf?popup=1",
"popup",
"width=780,height=450,toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=1,resizable=1,top=0,left=0,bottom=0"
);
popup.focus();
}
function setSelectedKonto(nummer) {
document.getElementById(whichElement).value = nummer;
}
</script>
2. in the child window there is a datatable with records, each row has a
select-me-icon to transfer value into the component specified in kicker
doPopupKonto(elementID).
The clue is doTransfer(), you must call a JS function in parent.
<h:outputLink value="#" onclick="doTransfer('#{obj.nummer}');"
styleClass="row" rendered="#{kontoMBean.isPopup}">
<h:graphicImage value="images/btn_select.gif"
alt="#{msg.btn_select_tooltip}"/>
</h:outputLink>
function doTransfer(value) {
self.opener.setSelectedKonto(value);
window.close();
}
Good luck
Jozef
CONNER, BRENDAN (SBCSI) wrote:
>I am trying to launch a pop-up window using JSF, where the pop-up window
>and base window share the same managed bean. There is an example of how
>to do this in Sun's Core JavaServer Faces book (Chapter 12) that defines
>two JSF pages that share a common managed bean:
>
>1. index2.jsp
>2. popup2.jsp
>
>When one clicks on a command button in index2.jsp, it executes
>JavaScript to launch a popup window, and then it submits a form that
>puts popup2.jsp into the popup window. However, the code doesn't seem
>to work. I list the code at the end of this e-mail.
>
>There are two problems with the code:
>
>1. From doing a "view source" on the generated HTML, I can see that HTML
>anchor tag rendered by <h:commandLink> does not specify a name for the
>control; it just specifies an id for the control. Therefore, the
>JavaScript in index2.jsp does not recognize hidden["hidden:go"] as a
>valid object, since there is no control with the name "hidden:go"
>(there's only a control with the *id* of "hidden:go"). I can bypass
>this problem by referring to this control as hidden[1] instead of
>hidden["hidden:go"], although that's kind of klugey. Still, that
>eliminates that problem. The next problem is the real kicker.
>
>2. When the popup gets displayed, it is not populated with popup2.jsp.
>Rather, it is populated with another copy of index2.jsp. Just in case
>there were errors in index2.jsp, I tried using a blank JSP as the popup
>JSP, but, again, the popup was populated with index2.jsp rather than the
>blank JSP.
>
>Any ideas about why this doesn't work? I tried it using two different
>JSF reference implementations (including MyFaces), but I get the same
>errors.
>
>
>
>index2.jsp:
>
><html>
> <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
> <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
>
> <f:view>
> <head>
> <script language="JavaScript1.1">
> function doPopup(source) {
> country = source.form[source.form.id + ":country"];
> for (var i = 0; i < country.length; i++) {
> if (country[i].checked) {
> popup = window.open("",
> "popup",
> "height=300,width=200,toolbar=no,menubar=no,"
> + "scrollbars=yes");
> popup.openerFormId = source.form.id;
> popup.focus();
> var hidden = document.forms.hidden;
> hidden["hidden:go"].value = "x"; // any value will
>do
> hidden["hidden:country"].value = country[i].value;
> hidden.submit();
> }
> }
> }
> </script>
> <title>A Simple Java Server Faces Application</title>
> </head>
> <body>
> <h:form>
> <table>
> <tr>
> <td>Country:</td>
> <td>
> <h:selectOneRadio id="country"
>value="#{bb.country}">
> <f:selectItem itemLabel="USA" itemValue="USA"/>
> <f:selectItem itemLabel="Canada"
>itemValue="Canada"/>
> </h:selectOneRadio>
> </td>
> </tr>
> <tr>
> <td>State/Province:</td>
> <td>
> <h:inputText id="state" value="#{bb.state}"/>
> </td>
> <td>
> <h:commandButton value="..."
> onclick="doPopup(this); return false;"/>
> </td>
> </tr>
> </table>
> <p>
> <h:commandButton value="Next" action="next"/>
> </p>
> </h:form>
>
> <%-- This hidden form sends a request to a popup window. --%>
> <h:form id="hidden" target="popup">
> <h:inputHidden id="country" value="#{bb.country}"/>
> <h:commandLink id="go" action="showStates" value="">
> <f:verbatim/>
> </h:commandLink>
> </h:form>
> </body>
> </f:view>
></html>
>
>
>popup2.jsp:
>
><html>
> <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
> <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
>
> <f:view>
> <head>
> <script language="JavaScript1.1">
> function doSave(value) {
> var formId = window.openerFormId;
> opener.document.forms[formId][formId + ":state"].value =
>value;
> window.close();
> }
> </script>
> <title>Select a state/province</title>
> </head>
> <body>
> <h:form>
> <h:dataTable value="#{bb.statesForCountry}" var="state">
> <h:column>
> <h:outputLink value="#"
> onclick="doSave('#{state}');">
> <h:outputText value="#{state}" />
> </h:outputLink>
> </h:column>
> </h:dataTable>
> </h:form>
> </body>
> </f:view>
></html>
>
>
>
>faces-config.xml:
>
><faces-config>
> <navigation-rule>
> <navigation-case>
> <from-outcome>showStates</from-outcome>
> <to-view-id>/popup2.jsp</to-view-id>
> </navigation-case>
> </navigation-rule>
>
> <managed-bean>
> <managed-bean-name>bb</managed-bean-name>
> <managed-bean-class>com.corejsf.BackingBean</managed-bean-class>
> <managed-bean-scope>session</managed-bean-scope>
> </managed-bean>
></faces-config>
>
>
>- Brendan
>
>
>__________ Informacia od NOD32 1.1170 (20050715) __________
>
>Tato sprava bola preverena antivirusovym systemom NOD32.
>http://www.eset.sk
>
>
>
>__________ Informacia od NOD32 1.1170 (20050715) __________
>
>Tato sprava bola preverena antivirusovym systemom NOD32.
>http://www.eset.sk
>
>
>
>
>