Clone node issue in IE

Hi all,

I am writing after a long time.
If you are wondering why so long?
didnt I had anything worthwhile to type?
Yes, I didnt had anything to write, coz whatever I learnt in last few months its well documented all over internet.
Not to forget an important fact that during my free time last year i Played a lot with my Canon SLR-Like Camera.
You can check my photography @ Sinless Photography

But this Time again our big time sucker IE(Internet Explorer) showed his ugly face and delayed our work and entangled us in DOM herarchies.

IE Sucks it AGAIN.

cloneNode doesnt work for all elements in IE.
yes
cloneNode doesnt work for all elements in IE.

My Problem.
I wanted to upload an image form without submitting the original form (in page1).
What I wanted to do:
1. Created a hidden form outside original form.
2. Copy / Clone input (type = file) element from original form to hidden Form.
3. Submit hidden form via JavaScript and view output in a frame (in page1).

What I did:
1. var clonedFileObject = document.forms['originalForm'].fileElement.cloneNode(true);
( where fileElement is input type = file element)
2. document.hiddenForm.appendChild(clonedFileObject);
3. hiddenForm.submit();

And What Happened.
var clonedFileObject = document.forms['originalForm'].fileElement.cloneNode(true);
Above statement worked perfectly fine in Firefox but in IE nothing happened.
No cloning was done and on form submission / image upload button All I could see was empty $_FILES array with error code = 4.

What all I tried:
1. hiddenForm.fileElement.value = originalForm.fileElement.value // didnt in FF either
2. Created a outer div and copied innerHTML of first div to hiddenforms div // didnt worked for input type file (didnt wasted much time either...should have worked)
3. Finally I did a shabby Patch work in my code which i really hated but in the given time limit and set conditions this was only I could think of.
var OriginalFileObj = document.getElementById('fileElement');
//this will remove fileElement from Original Form
var clonedFileObj = OriginalFileObj;
document.hiddenForm.appendChild(OriginalFileObj);
document.hiddenForm.submit();
divObj.appendChild(OriginalFileObj); //restoring of original file object in original form
//if you dont do this there wont be any file object in original form


I am sure there would be other better ways to do the same.
If you are aware of it please add in comments so as others can benefit from you including me.

IE DOM Issue

Recently I had an issue wherein I had to create new HTML element via DOM.And these HTML elements needed to have some properties as well HTML events like onClick(), onMouseOver(), etc.

While doing so my code worked perfectly fine in FireFox, but in IE the new elements created did not behaved in desired manner.
After a bit research I found that setAttribute() function doesnt work always in IE (actually it is suppose to not work at all ;)..).

Substitue for using setAttribute() is to use innerHTML
eg.TR1.innerHTML = "";

In my case innerHTML didnt worked as i had too many parameters to pass wherein I was out of combinations for using single and double quotes.

Below were the different ways I tried.
Not one of the following examples worked in IE:

TD1.setAttribute('onclick', 'doThis(' + param + ');');
TD1.onclick = 'doThis(' + param + ');';
TD1.onclick = new Function('doThis(' + param + ');');
TD1.onclick = function() { doThis(param); };
TD1['onclick'] = 'doThis(' + param + ');';
TD1['onclick'] = new Function('doThis(' + param + ');');
TD1['onclick'] = function() { doThis(param); };

The hack for making onClick work for you in IE via DOM

TD1.onclick = function() {
var temp = new Function("dostuff('"+myvar+"')");
temp();
}

The above code works well with both IE and Mozilla.
The same technique is to be used for calling any function for any HTML Events(onMouseOver).


NOTE: The above code can be simplified only when the function you are calling (dostuff) does not have any parameters to pass.

E.g.
TD1.onclick = function() { dostuff(); }

Some more interesting hacks for making your DOM work in IE are

blah.setAttribute('class','myCSS');

blah.className = 'myCSS'; <-- This line needs to be added

blah.setAttribute('valign', 'top'); This wont work as IE is case-sensitive
blah.setAttribute('vAlign', 'top');

Reference: Why IE Sucks