Accessing parent window elements from child window in JavaScript

In JavaScript you can access the parent window elements from the child window. Let’s see an example. Let’s assume that the parent page code is as follows:

<html>
    <head>
        <title>Parent Window</title>
    </head>
    <body>   
	<input type="text" id="data" value="23444" />
	<a href="#" onclick="javascript:openChildWindow();">Open Child Popup window</a>
    </body>
    <script>
	function openChildWindow() {
		window.open('child.htm','childWindow','width=400,height=400');		
	}
    </script>
</html>

The hyperlink in the parent window opens a new child window using the window.open JavaScript API.

In the child window, Let’s see how to access the "data" input field of the parent window.

<html>
    <head>
        <title>Child Window</title>
    </head>
    <body onload="initializeMainDiv();">   
		<div id="mainDiv"></div>
    </body>
    <script>
	function initializeMainDiv() {
		document.getElementById("mainDiv").innerHTML = "Parent window data field value is: " + 
			window.opener.document.getElementById("data").value
	}
    </script>
</html>

In the child window, when the page is initialized, the "data" input field of the parent window is accessed through the window.opener JavaScript API.

window.open Invalid argument in IE

You may face the following error message in IE while working with the window.open JavaScript API:

Message: Invalid argument.
Line: 21
Char: 4
Code: 0
URI: ...

This error happens because IE does not allow spaces in the window name, for example the following code will cause the invalid argument error in IE:

window.open('test.htm','New Window','width=400,height=400');

To resolve this error, the solution is simple just remove the spaces from the window name and it will work fine:

window.open('test.htm','NewWindow','width=400,height=400');

Finally, the other interesting fact is that IE does not allow the window name to have dashes “-“, so you have to remove it from the window name to make the window.open API working fine in IE.

Uncaught TypeError: Object #<a Document#> has no method ‘write’

Error Conditions:
This issue happens when you use GMaps4JSF with Google Chrome (also Safari) in Facelets XHTML files (The default PDL for JSF 2.0). Actually this issue generally happens when you make make any include to Google Maps inside XHTML files:

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAxrVS1QxlpJHXxQ2Vxg2bJBQdkFK-tWRbPPQS4ACM1pq_e-PltxQXeyH20wQuqDaQ_6EM5UeGGVpnIw"> </script>

Solution:
Just set the content type to “text/html”:

<f:view contentType="text/html">

"IE Sucks" Series continued – #2

IE Ajax problem “Could not complete operation c00ce56e”.
This error appears in the stupid IE when you don't set your server response character encoding to “UTF-8”.
This ugly behavior is M$ IE copyrighted, I really didn't find in any other modern browsers like (FF, Opera).

To solve this problem :
Set your Servlet or JSP response type to UTF-8 as follows:

response.setCharacterEncoding("UTF-8");

"IE Sucks" Series continued

Last days, I was developing a pure Ajax JS component from scratch that should work cross browsers, I really found nightmares during my way because of the ugly bad stupid IE.

One of the bad IE stupid features that really suck is the IE Ajax Caching.

UnLike FF, If you are trying to send simple Ajax GET requests to your server servlet, you will find the stupid IE returns stale old request data.

After spending one hour in investigation, I found the way that got me out of this hole.

To solve this problem you should add a random dummy parameter to your GET url request to force IE to refresh itself.

For example)

var url = "/RichTextEditorWorld/ImageUploaderServlet?ieDummyStupidParameter=" + new Date().getTime();

DOM setAttribute() is different in M$ IE "the crappy"

Last days, I was working on a pure heavy (JavaScript/Ajax) component.
The component was required to run correctly across different browsers.
I really did the job in few hours but after start testing the component, I found it works fine on both FF and Opera but as usual I found the M$ IE complaining. I really found alot of IE weird things.

For example, if we try the following code in FF or even Opera, it would work fine.

<html>

<div id="myDiv">
</div>

<input value="Add New Element to div" type="button"
onclick="createNewElement();" />

<script>
function createNewElement() {
   var parentDiv = document.getElementById("myDiv");
   var buttonElement = document.createElement("input");

   buttonElement.setAttribute("type", "button");
   buttonElement.setAttribute("id", "myButton");
   buttonElement.setAttribute("value", "New Button");
   buttonElement.setAttribute("onMouseDown", "alert('Hi');");

   parentDiv.appendChild(buttonElement);
}
</script>

</html>

The “New Button” button would be created if we click on the “Add New Element to div” button.
The 'Hi' message would appear also if we click on the “New Button” button. Here is the output :



But if we try to run the previous code on the M$ IE, we will find the code written under the “onMouseDown” doesn't work.
After spending some time in investigation, I found that the M$ crappy browser doesn't support setAttribute onEventXXX.
Here is the IE output (Nothing is done after clicking on the “New Button” button :





Finally after spending some time with the ugly IE, I could fix this problem by doing the following:

// The IE Fix.
buttonElement.onmousedown = function() {
     alert("Hi - Fixed on the crappy IE");
};

Why IE is idiotic and Stupid?

Very simple.
Just try to run this JavaScript code in IE7 and FireFox :-

<script>
    function processString(myString) {
      for (i = 0; i < myString.length; ++i) {
          alert(myString[i]);
      }
    }
    processString("IESucks");
</script>

This code runs correctly on FireFox.
but in IE7 the result will be 'undefined' :D.

Conclusion :
IE doesnot support the string [] operator so u have to use charAt( ).
IE really sucks :).