Rock never dies \m/: February 2008

Wednesday, February 27, 2008

Accessing javascript methods from an IFRAME

If you need to access any javascript methods defined in the parent/main webpage from an IFRAME make use of the top property followed by the javascript method name ex. top.myfunction() ; where myfunction() has been defined in the parent/main webpage.

vice-versa to access methods from within an IFRAME in the parent/main webpage, you will need the following syntax:
window.<>.<> ex.window.sub_frame.subpagedisplay(); where sub_frame is the frame ID defined in the parent/main webpage and subpagedisplay() is the javascript function defined in the subpage or in the iframe src property.

NOTE: Both the html files shown below need to be on the same DOMAIN as browsers do NOT allow cross-site scripting.

complete parent/main webpage code: mainHTML.html

<html>
<head>
</head>
<iframe id="sub_frame" name="sub_frame" src="sub_frame.html"></iframe>

<script type="text/javascript">
</script>
<body>
main page
<a href="javascript:subpagefn();">call sub page function</a>
</body>
</html>

complete subpage/IFRAME webpage code: sub_frame.html

<html>
<head>
<script type="text/javascript">
</script>
</head>
<body>
iframe page
<a href="javascript:showme()">some link</a>
</body>
</html>

Tuesday, February 26, 2008

Creating dynamic HTML tables with Javascript

when creating a dynamic HTML table in javascript, first
1) create a TABLE
2) create a TBODY
3) create rows, TR
4) create cells, TD
5) append the cells TD to the rows TR
6) append the rows TR to the TBODY
if this is not done then the entire table will not be visible.
7) append the TBODY to the TABLE
8) attached the TABLE to the required DOM node in HTML document

complete code for the above steps:

var newTbody = document.createElement("tbody");
var mainTable = document.createElement("table");
var newTR = document.createElement("tr");
var newTD = document.createElement("td");
newTD.innerHTML = 'some text';
newTR.appendChild(newTD);
newTbody.appendChild(newTR);
mainTable.appendChild(newTbody);
document.getElementById('someDomID').appendChild(mainTable);

The following code without a TBODY ends up with the entire TABLE not being visible.

var mainTable = document.createElement("table");
var newTR = document.createElement("tr");
var newTD = document.createElement("td");
newTD.innerHTML = 'some text';
newTR.appendChild(newTD);
mainTable.appendChild(newTR);
document.getElementById('someDomID').appendChild(mainTable);

Left and right alignment using single DIV tag

Inorder to align say 2 text elements left and right on the same line using a single DIV tag, we need to

1) use the "style" property of the DIV tag and include "position: relative; text-align: center; " in it. see code below.

2) for text that needs to be left aligned, again use the "style" property and include "position: absolute;left: 0;" in it. if you need spacing around the text then include the 'padding' attribute so "style" should read "position: absolute;left: 0;padding:10px".
see code below.

3) for text that needs to be right aligned, again use the "style" property and include "position: absolute;right: 0;" in it. if you need spacing around the text then include the 'padding' attribute so "style" should read "position: absolute;right: 0;padding:10px".
see code below.

<label for="aaa" style="position: absolute;right: 0;padding:10px">some text to right</label>

Complete code.

<div style="width:80%; height:40px; background-color: #EEEEEE; position: relative; text-align: center; width: 100%;">

<label for="aaa" style="position: absolute;left: 0;padding:10px">some text to left</label>

<label for="aaa" style="position: absolute;right: 0;padding:10px">some text to right</label>

</div>

Wednesday, February 20, 2008

Parameter passing in Ajax - XMLHttpRequest

Inorder to make an asynchronous call to a server we need to :
1.) create a XMLHttpRequest object.
2.) (a) check the state of the 'readyState' property of the created XMLHttpRequest object. if this value is '4' (numeric 4), it means that the processing is complete and the response returned from the server is ready for use.
(b) assign a javascript function to 'onreadystatechange' method. This javascript function is called whenever the servers reponse is complete and then the data can be processed.

The code

var xmlHttp;
try
{ // Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{ // Internet Explorer try
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your browser does not support AJAX!");
return false;
}
}
}

xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
document.myForm.time.value = xmlHttp.responseText;
}
}

deals will the above 2 points.

There are two ways to pass parameters using XMLHttpRequest object.
1.) appending the parameters to the end of the url.

on the client side we need to write the code as shown below, where 'elementID' is a parameter

xmlHttp.open("GET","ajax.do?elementID='this is an element'",true);

on the server side we read the values as

HttpServletRequest.getParameter("elementID");

or

HttpServletRequest.getHeader("elementID");

with the "GET" action both 'getParameter' and 'getHeader' methods work.

2.) using the 'setRequestHeader' method of XMLHttpRequest object.

on the client side we need to write the code below, where 'elementID' is a parameter and 'testajax' is the java servlet

xmlHttp.open("POST","testajax",true);
xmlHttp.setRequestHeader("elementID" , "xxxxyyyyzzzz");

on the server side we read the values as

HttpServletRequest.getHeader("elementID");

with the "POST" action ONLY 'getHeader' method works.

Dynamically show/hide HTML elements using DIV tags

Using "div" tags and their 'style.visibility' property, its relatively easy to show/hide dynamically created HTML elements. As normal every HTML element needs to have a UNIQUE ID inorder for this functionality to be achieved.

Initially when the HTML document is loaded we call a method 'ofPageInit()' which creates the tag and say a 'textarea' HTML element which has to be shown on clicking a button or link.

The code

mybox = document.createElement('textarea');
mybox.setAttribute('id', editArray[i].id);
mybox.setAttribute('rows','2');
mybox.setAttribute('cols','15');

is used to create dynamically a textarea HTML element. The Id of this textarea is set based on the "TD"'s id. Using setAttribute() we specify that we need 2 rows and 15 columns for the dimensions of this text area.

Next we create dynamic "div" tags

mydiv = document.createElement('div');
mydiv.setAttribute('id', 'div'+editArray[i].id);
mydiv.style.visibility = 'hidden';

and set their initial 'visibility' property to hidden so that it is not displayed on screen when the form is first loaded.

We then create a dynamic anchor tag

myCancellink = document.createElement('a');
myCancellink.onclick = hidebox ;
myCancellink.href = "#";
myCancellink.innerHTML = "cancel";

onclicking the link 'cancel', the method 'hidebox' is called. This method sets the 'parentElement', in this case the "div"tag, 'visibility' property to 'hidden' so that it does not get displayed on screen.

On clicking the 'edit' link, we just change the 'visibility' property to 'visible' so that the corresponding "div" tags content is displayed on screen.

Rock never dies \m/