Parent-Pop-up Window - Passing parameter using JS

We have a parent page which has a textbox and button. On click of the button we open a pop-up window(Also known as picklist window) which has a single column table with values. We can select one of the values.

The requirement is that the selected value should come and sit in the parent page textbox.

Elaborating the requirement the values in the single column table will change based on the parent window(There are 3 parent windows from which this picklist pop-up window will be invoked). Means for each parent window the pop-up window table values are different.
In the database we have one table that holds all the values for all 3 different parent windows.

Solution:

We pass the pickcode and the parent window textbox property to the pop-up window action class.

Fetching the single column pop-up window values:

In the action class based on the pickcode from respective parent window we fetch the details from database and use it to iterate and display the values in the single column table in the pop-up window.

Setting in the parent window

We use pop-up windows JS to set the selected value in the single column to the parent windows textbox.

Example - PopupWindow (table)

PickID PickCode PickValues
1 QQQ ab
2 QQQ bc
3 QQQ cd
4 QQQ de
5 RRR ef
6 RRR fg
7 RRR gh
8 RRR hi
9 LLL ij
10 LLL jk
11 LLL kl
12 LLL lm

Parent window code

JSP:
<html:text name="MyForm" property="remarksToMe" />
<html:button property="contactPopup" onClick="selectFromPickList('remarksToMe','QQQ');" value=" ? "></html:button>


Javascript:

pickFlag points to the parent windows textbox property.

function selectFromPickList(pickFlag, pickCode) {

This is how we invoke a pop-up window.

window.open('searchPickList.do?pickCode='+pickCode+'&pickFlag='+pickFlag,'searchPickList','resizable=1,width=200,height=110,status=1,scrollbars=1');
}

Pop-up window code:

The keyword 'this' always refers to the current element in JS perespective.

JSP Code:

<logic:present name="PickForm" property="pickList">
<logic:iterate id="row" name="PickForm" property="pickList">

<-- <%=request.getParameter("pickFlag") % > -->
<tr id="srch_r" clickable="yes" ondblclick="pickListValue(this,
'${param.pickFlag}' );" >
<td id="picklistvalue"><bean:write name="row" property="display"/></td>
</tr>
</logic:iterate>
</logic:present>


JS Code:

function pickListValue(ROWELEM, openerFieldName)
{
var openerField = window.opener.document.all(openerFieldName);
var pickListvalue = ROWELEM.childNodes[0].childNodes[0].data;
openerField.value = pickListvalue;
window.close();
}

document.all ==> Refers to all the forms in a given JSP Page. It can have more than one form in a page.

ROWELEM.childNodes[0].childNodes[0].data;

The above line helps us to get to the data displayed using the display property.

openerFieldName gives the parent windows textbox property name, remarksToMe.

Tutorial link - 1