...

View Full Version : Pass the Value of the Highlighted Row Back from the Popup to the Parent Window



jiapei_jen
06-14-2007, 09:18 PM
I have a popup window which display a list of values in a tabular form. I have no problem to do the popup or display the table.

The table has two columns; one is the "code" and the other is the "description".

When a row is highlighted and the "SELECT" button in the popup window is clicked, I am supposed to pass the "code" of the highlighted row back to an input textfield in the parent window. And I am struggling with it.

Would anybody kindly help?

glenngv
06-14-2007, 09:42 PM
Post the generated code for the popup. But basically, this is how you update a field in the opener window.

if (opener && !opener.closed){
opener.document.theForm.theField.value = theValue;
}
I have to see how you set up the table to be able to know how to retrieve the "code" of the selected row.

rnd me
06-15-2007, 06:44 AM
if it's text you're after, try passing

theRow.innerHTML, or use an ambiguator:


var ndVal = function (x) {if (!!x.innerText) {return x.innerText;} else {return x.textContent;}}

opener.document.theForm.theField.value = ndVal(theRowOb);

jiapei_jen
06-15-2007, 07:00 PM
The table in my popup window looks like:

Code | Description
F Female
M Male
U Unknown

I am supposed to pass the "Code"; i.e. either "F" or "M" or "U" to the parent window input text field.

And in my popup window, I put


function chooseGender()
{
window.opener.document.getElementById("parentFormID:sex").value = // need help here;
self.close()
}


I use the JavaServer Faces (JSF). I have managed to highlight the selected row (see the code below). I am going to post both the JSF code and the "View Source" in the browser window:

JSF code:


<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="theme/booking/Master.css" title="Style">
<style>
a { text-decoration: none; color: #000000; }
</style>
<script language="JavaScript1.1">

function addOnclickToDatatableRows() {
var trs = document.getElementById('genderTypes').getElementsByTagName('tr');
for (var i = 0; i < trs.length; i++) {
trs[i].onclick = new Function("highlightRow(this)");
}
}

function highlightRow(tr) {
tr.bgColor = (tr.bgColor != '#ff0000') ? '#ff0000' : '#ffffff';
}

function chooseGender()
{
window.opener.document.getElementById("selectGender:sex").value = selectedGender;
self.close()
}
</script>
<title>Sex Types</title>
</head>
<f:view>
<body>
<h:form id="genderTypes">
<h:dataTable value="#{genderTypesManagementBean.genderTypes}" var="genderType"
id="genderTable"
border="2" bgcolor="#FFFFFF">
<h:column>
<f:facet name="header">
<h:outputText value="Code"/>
</f:facet>

<h:outputText value="#{genderType.code}"/>

</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Description"/>
</f:facet>
<h:outputText value="#{genderType.description}"/>
</h:column>
</h:dataTable>

<f:verbatim>
<script>
addOnclickToDatatableRows();
</script>
</f:verbatim>

<p>

<h:commandButton value="Find" immediate="true"
action="#{genderTypesManagementBean.search}"/>
<h:commandButton value="OK"
action="#{genderTypesManagementBean.select}" onclick="chooseGender()"/>
<h:commandButton value="Cancel" onclick="self.close()"/>

</h:form>

</body>
</f:view>
</html>

And the "View Source" in the browser window:


.....
.....
<body>
<form id="genderTypes" method="post" action="/VR_LOV_Test/faces/genderTypesPopup.jsp" enctype="application/x-www-form-urlencoded">

<table id="genderTypes:genderTable" border="2" bgcolor="#FFFFFF" ><thead ><tr ><th >Code</th><th >Description</th></tr>
</thead><tbody >
<tr ><td >F</td>
<td >Female</td>
</tr>
<tr ><td >M</td>
<td >Male</td>
</tr>
<tr ><td >U</td>
<td >Unknown</td>
</tr>
</tbody>
</table>
<script>
addOnclickToDatatableRows();
</script>

<p>

<input type="submit" name="genderTypes:_id7" value="Find" />
<input type="submit" name="genderTypes:_id8" value="OK" onclick="chooseGender()" />
<input type="submit" name="genderTypes:_id9" value="Cancel" onclick="self.close()" />

<input type="hidden" name="genderTypes" value="genderTypes" /></form>

</body>

glenngv
06-15-2007, 07:58 PM
var hilitedRow;
function highlightRow(tr) {
tr.bgColor = (tr.bgColor != '#ff0000') ? '#ff0000' : '#ffffff';
hilitedRow = tr;
}

function chooseGender()
{
if (opener && opener.closed){ //check if opener is still open
if (hilitedRow){
var selectedGender = hilitedRow.getElementsByTagName('td')[0].innerHTML;
window.opener.document.getElementById("selectGender:sex").value = selectedGender;
window.opener.focus();
}
else {
alert("Please select a row.");
return;
}
}
self.close();
}

jiapei_jen
06-15-2007, 09:14 PM
Thanks for your attention to this question.

If I test the "opener"; i.e. if (opener && opener.closed){ //check if opener is still open },
I do not get any response at all - there is no alert dialog if a selection is not made and the code does not return anything to the input field in the parent window. I mean that I got a blank there.

If I do not test the "opener", I have some responses. But, the input field in the parent window is populated with the text "undefined".

Is there anything else I can try?

glenngv
06-15-2007, 10:14 PM
Oh there was a typo.

if (opener && !opener.closed){ //check if opener is still open

jiapei_jen
06-18-2007, 01:01 PM
Thanks for your continuing support.

I still have another problem - the input field in the parent window is populated with the text "undefined".

Therefore, the code below has the difficulty in getting the value of the first column of the selected (highlighted) row.


window.opener.document.getElementById("selectGender:sex").value = document.getElementById('genderTypes').getElementsByTagName('td')[0].innerHTML.value;

jiapei_jen
06-18-2007, 01:25 PM
Sorry for my previous posting. I was wrong about it.

Now, the code works like a magic.

I did not know that the JavaScript could be so powerful. I had thought using JSF to pass the value back to the parent window. However, I could not highlight the selected row using JSF at the same time.

Thanks for your help again.

glenngv
06-18-2007, 03:40 PM
Yeah, I saw you did innerHTML.value which is not correct.

document.getElementById('genderTypes').getElementsByTagName('td')[0].innerHTML.value;
Glad you sorted it out yourself. :)

sainath_nair
12-09-2009, 06:25 AM
Sorry for my previous posting. I was wrong about it.

Now, the code works like a magic.

I did not know that the JavaScript could be so powerful. I had thought using JSF to pass the value back to the parent window. However, I could not highlight the selected row using JSF at the same time.

Thanks for your help again.


Hey , can you please post the working code here with the jsf part ? I a facing the same issue and have gone nuts solving it :confused: :confused:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum