Tutorial Links

Tutorial - 1

Drop-down selection using java script

We have a search criteria drop-down and a textbox to enter the value. When user selects a value from the drop-down, JS will request the user to enter a value in the textbox.


JSP Page

<html:select size="1" property="searchCriteria" name="RequestForm" styleClass="rmt-formTxt" style="margin-right:6px;">
<html:option value="">Search Criteria</html:option>
<logic:present name="RequestForm" property="searchDropList">
<bean:define id="row" name="RequestForm" property="searchDropList" />
<html:options collection="row" property="code" labelProperty="display" />
</logic:present>
</html:select>

<html:text name="RequestForm" size="30" property="searchCriteriaText" style="margin-right:6px;" styleClass="rmt-formTxt" />
<input type="button" id="search" value="<bean:message key="common.btn.search" bundle="abc"/>" class="primaryButton" onClick="normalSearch();" />
<input type="button" id="" value="<bean:message key="common.btn.clearSearch" bundle="abc"/>" class="secondaryButton" onClick="clearNormalSearch();" />

In this JS code we are getting the value(number) of the drop-down and the corresponding text.

JS Function

Explanation:

searchType is a form property with which we set the search type, whether it is a normal search (or) advanced search.

function normalSearch()
{
var searchCriteria=document.forms[0].searchCriteria.value;
var searchCriteriaValue=document.forms[0].searchCriteriaText.value;
var index;
index = document.forms[0].searchCriteria.selectedIndex;
var display = document.forms[0].searchCriteria.options[index].text
if ((searchCriteria == "") (searchCriteria == null))
{
alert("Please select a criteria for search");
document.forms[0].searchCriteria.focus();
return;
}

else if ((searchCriteriaValue == "") (searchCriteriaValue == null))
{
alert("Please enter some value for "+display);
document.forms[0].searchCriteriaText.focus();
return;
}
else
{
var searchType = document.forms[0].searchType;
searchType.value='normal';
document.forms[0].action='viewRequestResults.do';
document.forms[0].submit();
}
}

function clearNormalSearch() {
document.forms[0].searchCriteria.value = "";
document.forms[0].searchCriteriaText.value = "";
}

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

Utlity Lessons

To see the parent window property's(bankName) - value from pop-up window's Javascript

alert("Result - 1: " + window.opener.document.getElementById("bankName").value);
alert("Result - 2: " + window.opener.document.forms[0].bankName.value);

<tr id="srch_r1" clickable="yes">
To align to right in a row we use colspan
<td align="left" valign="bottom" colspan="2">

We use div tag to control the entire layout/table
<div id="t1Div" style="position:relative;margin-top:5px;overflow:auto;height:95px;" type="credSummaryInfo" default="1">

<table>
---
---
</table>

margin-top:5px; ==> Is to get 5 pixel space between the previous table and this table.

http://www.richinstyle.com/test/dynamic/overflowscroll.html
overflow:scroll; ==> Is to get scrollbar(Both vertical and horizontal) for this table.
overflow:auto; ==> Is to get scrollbar(Only horizontal) for this table which is automatically created based on table size.

How to send data from a JSP page to a java class through javascript function?

<html:button property="secrecyComplianceFlag" onClick="selectFromPickList('abc','ijk');" value=" ? ">
</html:button>

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

The above code invokes a pop-up window, which is a JSP Page.

In the pop-window Action Class:

String code = request.getParameter("pickCode");

To refresh parent window from pop-up window

window.opener.location.href = window.opener.location.href;
if (window.opener.progressWindow) {
window.opener.progressWindow.close()
}
window.close();

How to refer to parent window form properties from pop-up window JS?


approvedCountIDC = window.opener.document.getElementById("approvedCountIDC");

How to set parent window form properties from pop-up window JS?

window.opener.document.getElementById("approvedCountIDC").value = 'abc';