JavaScript Inheritance
Found some really useful tutorials on how to use inheritance in JavaScript. This is pretty new to me as I haven’t learnt JavaScript formally but through the Internet. <3 Internet
Anyways, I’m working on an automated HTML generator using JavaScript since I don’t have access to server side stuff. Gosh it gets complicated doing it all on client side!
flip text
Some cool javascript I found on the web. Flips whatever text you give it upside-down and reversed!
Rendering table in IE using DOM
So I thought I’d share with people who would be interested in these sort of things (programming), especially dealing with JavaScript’s Document Object Model (DOM). I came across an annoying bug that has bugged me for the past few days which turned out to be quite simple.
First take a look at the following JavaScript:
var container = document.createElement(“div”);
var table = document.createElement(“table”);
var tr = document.createElement(“tr”);
var td = document.createElement(“td”);
var text = document.createTextNode(“This is a test.”);
td.appendChild(text);
tr.appendChild(td);
table.appendChild(tr);
container.appendChild(table);
document.body.appendChild(container);
When you go alert(container.innerHTML), you will see that the DOM is created correctly but for some reason it is not showing up. Even by inspecting the DOM using IE7′s add-on, IE Developer Toolbar, you will see that the DOM is constructed correctly. When running this on Firefox, the code seems to work the way you want it to. So what the heck is the problem?!?
Well after many hours of googling, I came across an article that helped me solve my problem. Apparently, a tbody element is required within the table tag which is interesting because according to the HTML4 Standard, a tbody isn’t required within a table. Adding a couple of lines will fix this rendering problem:
var table = document.createElement(“table”);
var tbody = document.createElement(“tbody”); <–
var container = document.createElement(“div”);
var tr = document.createElement(“tr”);
var td = document.createElement(“td”);
var text = document.createTextNode(“This is a test.”);
td.appendChild(text);
tr.appendChild(td);
tbody.appendChild(tr); <–
table.appendChild(tbody); <–
container.appendChild(table);
document.body.appendChild(container);
Hopefully you won’t spend as much time as me trying to figure out this problem.
Firefox rox, IE is evil!
Urgh…I’m so frustrated creating web applications at work that works perfectly fine on Firefox but stuffs up on IE. Darn Microsoft, why you gotta go make things complicated!?!
Anyways, I’m just venting out my frustration here because I don’t get why Firefox can get the value from the hidden field, __EVENTARGUMENT while IE can’t seem to get it. I mean, they both work fine with __EVENTTARGET but for some retarded reason the other doesn’t work. This happens after I call JavaScript’s postback method, __doPostBack(eventTarget, eventArgument).
Oh how I wish Microsoft’s IE market dominance fall below 1% and Firefox gained 99% of it. Then I don’t have to create web applications to cater to IE’s lameness! Argh, how I wish.
EDIT:
Well I’ve managed to fix the bug! Apparently for each postback that occurs on the page, ASP.NET calls the postback function and set’s the id of the control that triggered it to __EVENTTARGET. However, I still don’t get why __EVENTARGUMENT is not accessible though. Perhaps the value gets overwritten due to postback in IE, and thus would explain why I’m not getting the values I passed to it. Weird though how it works fine in Firefox and not IE. Instead I created my own hiddenfield in the aspx and used that to store my value obtained from JavaScript’s prompt box. Viola! Works like a charm.