Wednesday, March 5, 2008

How to break lengthy lines

Tutorial:http://www.css3.com/css-word-break/

<td width="60%" style="word-break: break-all;"><bean:write name="ABCForm" property="description" /></td>

Description: "word-break: break-all" is a CSS style property which helps in bringing lengthy lines which doesn't have breaks(spaces) to next line. We can define it in an independant CSS file(wrap.css) as well and include it in our jsp pages.

This how we include the independant CSS file into our JSP Page.
<link rel="stylesheet" type="text/css" href="../css/wrap.css">

In the below independant css, we are specifying the style property for all the TD's. This means all the TD's which have a width property specified will obey this CSS Style.

wrap.css
--------
@CHARSET "ISO-8859-1";
TD {
word-break: break-all;
}

Wednesday, February 20, 2008

Formatting Date and time using JavaScript.

This link helps us in formatting the date and time in JavaScript.

Thursday, January 31, 2008

Generating dynamic date using Javascript.

function getRandomMaxMaturityDate() {

var myDate = new Date();
myDate.setDate(myDate.getDate()* (Math.random()* 555));
var date = myDate.getDay();
var month = myDate.getMonth();
var year = myDate.getYear();

document.forms[0].maxMaturityDateString.value = (month + "/" + date + "/" + year);
}

Setting parent window textbox based on pop-up window table row selection

Requirement:
I am having a parent window with a textbox and an adjacent search button. On click of the search button, a pop-up window should open with a table with 5 columns populated with rows in it and a OK button. On click of one of those rows and clicking OK button the selected row’s second column value should come and site in the parent windows text box.

JSP Code of parent page:

<td class="rmt-readOnlyRowHead" align="left" valign="top">
<span>
<html:text name="RequestForm" property="bankName" size="20" styleClass="rmt-formTxt" />
</span>
<span>
<input type="button" class="secondaryButton" id="search" value="Search"
onclick="window.open('searchBankName.do','searchBankName','resizable=1,width=710,height=650,status=1,scrollbars=1');" />
</span>
</td>

JSP Code of pop-up window:

<table id="t32bot" cellpadding="0" cellspacing="0" width="100%" border="0" id="sync">
<tbody>
<logic:iterate id="row" name="BankForm" property="bankList">
<tr id="srch_r1" clickable="yes">
<td nowrap class="rmt-tableCellTxt" onClick="clicked('t32bot',this);"> <bean:write name="row" property='countryName'/>
</td>
<td nowrap class="rmt-tableCellTxt" onClick="clicked('t32bot',this);"> <bean:write name="row" property='bankName'/>
</td>
<td nowrap class="rmt-tableCellTxt" onClick="clicked('t32bot',this);"> <bean:write name="row" property='facilityType'/>
</td>
</tr>
</logic:iterate>
</tbody>
</table>

<input type="button" class="primaryButton" id="ok" onClick="setBankName('t32bot');" value="Ok"/>

JS Code of pop-up window:

function setBankName(TABLE_NAME)
{
var bankName = window.opener.document.getElementById("bankName");
var tbl = document.getElementById(TABLE_NAME);

for (var i=0; i<tbl.tBodies[0].rows.length; i++) {
if (tbl.tBodies[0].rows[i].className.indexOf("rmt-rowClick") != -1) {
var rowElem = tbl.tBodies[0].rows[i];
var cell = rowElem.getElementsByTagName("td")[1];
bankName.value = cell.childNodes[0].data;
window.close();
}
}
}

Tuesday, January 29, 2008

JS code to select multiple rows from a table

JSP Page

<table id="t20bot" class="grid" width="100%">
<td width="60" onClick="clicked('t20bot',this);" ><bean:write name="row" property='countryName'/></td>

JS Function

function commonClicked(table_name, elem)
{
var rowElem = elem.parentNode;
if(rowElem.className == "rmt-rowClick" )
{
rowElem.className = "";
rowElem.oldClassName = "";
}
else
{
rowElem.className = "rmt-rowClick";
rowElem.oldClassName ="rmt-rowClick";
}
}

Friday, December 28, 2007

How to close a pop-up window automatically after 5 seconds through JS

setTimeout('self.close()',500);

Tutorial one and two on setTimeout.

This link and this explains clearly about the functionality.

Monday, December 17, 2007

Disabling a button using JS

function disableButton (button1,button2)
{

document.getElementById(button1).disabled=true;
document.getElementById(button2).disabled=false;


document.forms[0].button1.readonly=true;
document.forms[0].button1.disabled=true;

}