Saturday, November 24, 2007

Javascript Revisit 2 - IE needs TBODY!

This had been bugging me for an hour and I just couldn't get it work until... I remind of my previous framework's similar situation.

It was the IE TABLE structure, IE DOM will always needs a TBODY for TABLE's body, so this code actually works on Firefox, but not IE:

var tbl=document.createElement("TABLE");
var tr=document.createElement("TR");
var td=document.createElement("TD");
tbl.appendChild(tr);
tr.appendChild(td);
td.innerHTML="You see me!";
document.getElementById("somedivID").appendChild(tbl);

Well, it works perfectly in Firefox, but when executed in IE, there's no error too, but also, there's nothing being displayed in the somedivID's DIV. However, if you do an inspection like this:

var eleDiv=document.getElementById("somedivID");
alert(eleDiv.innerHTML);

This will display the table's code correctly and you'll like me, start scratching your head on what is going on? and then you colleague will tell you to post to MSDN forum and try to get help from there.

Well.. the truth is... as there's something missing, that's TBODY for the TABLE.

var tbl=document.createElement("TABLE");
var tblbody=document.createElement("TBODY");
var tr=document.createElement("TR");
var td=document.createElement("TD");
tbl.appendChild(tblbody);
tblbody.appendChild(tr);
tr.appendChild(td);
td.innerHTML="You see me!";
document.getElementById("somedivID").appendChild(tbl);

And voila, this works.

Hope this helps if you encounter the same issue.

regards,
choongseng

Friday, November 23, 2007

TSQL Tips 1 - Integer Arithmetic to return Float

This will get you "0" intead of "0.01" which you might expect.

SELECT 1/100


This will do the trick:

SELECT 1/cast(100 as float)


regards,
choongseng

AJAX Framework v2!

It was 2 years back where my first AJAX framework had been deployed at my previous company. The framework had a big vision and had achieve a pretty magical result after deployed (and it is still running today, although phasing out probably in another 1 year time).

The unique feature of the framework is that it supports template for multiple items listing. Which you can add/edit/remove a row, entirely on the client side, without having to postback to the server at all. The framework do comes with some drawbacks, it is pretty slow when the page is big and there is some memory leaks which will crash the IE after some many AJAX calls.

With that in mind, I'm now back to my vision to re-create the framework from scratch now, again. This time however, I'll be writing everything from scratch including my AJAX processor page, which previously I've used AJAX Pro. More details will be posted and let's see how it goes.

Another issue is browser compatibility. I wish I can ignore it, but I can't now simply because my users now will be the general internet public. Well, I don't have many PC to test out, but at least I have Firefox and IE7 and I got to ensure it works on both of this.

regards,
choongseng

Wednesday, November 21, 2007

Best Helper - Firefox Error Console

Being a Firefox user for more than 3 years, I had been telling fella peers to adopt the rocking cool browser and praising it for its ease of use, fast and secure features.

However, there's one thing I hate about it, just that little one thing, that's during my development, all my javascript error will just hide away from me and I just had no clue of what had happened. Which in the old days (older days... hehe), when I'm using IE, it will show me on the status bar that there's error in script. That's what I'm looking for, but I just couldn't get that in FireFox, and this had been for years.

But... not until NOW!! It is not a new feature of Firefox, but just a dump user like me which is too used to IE years back, I've discovered the Error Console feature of FireFox. See it for yourself, I trust the these 2 screen shots speaks it all that you need to know about the feature.


Yeah, my javascript writing will be much more joyful rather than pain now! Well.... I should have discovered this 3 years back and my life, perhaps will be different now.

Again, Firefox Rocks Rocks Rocks!

regards,
choongseng

Tuesday, November 20, 2007

Javascript Revisit 1

Just figured out that these are not equal:
<script type="text/javascript" src="cs_jscore.js"></script>
<script type="text/javascript">alert("You see me!");</script>
<script type="text/javascript">alert("Hi, see you again.");</script>
and
<script type="text/javascript" src="cs_jscore.js">
<script type="text/javascript">alert("I never show up!");</script>
<script type="text/javascript">alert("You see me.");</script>
Ever since the term XHTML come to my knowledge, I've maintain the practice to keep the tailing "/" to those single HTML tags like BR and HR, etc.

So I apply the same here, to sort of optimize my script in terms of size and thus the second code snippet up there. And the results are different, or rather, it won't work, at least in my firefox, the "/" closing to the single script tag will result in the subsequent script tag being ignore (since it is regarded as the text in between script tag, which is generally ignored when the src attribute of script is specified.) which it looks towards for the proper closing of script tag.

There goes my 30 mins of debugging time.

regards,
choongseng

AJAX, back to the basics

AJAX is getting hotter nowadays. After 6 months of development work, which I uses conventional ASP.NET postbacks, I'm now back with JSON and AJAX and XML!

This time round I take the time to study each and every single steps in the pipeline in ajax request and what I'm going to do is... create yet another ajax framework of my own!

The very first code of ajax:
function createXMLHttpRequest() {
try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {}
try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {}
try { return new XMLHttpRequest(); } catch(e) {}
alert("XMLHttpRequest not supported");
return null;
}
The second:
try
{
var xhReq = createXMLHttpRequest();
xhReq.open("GET", "testajaxpage.aspx", true);
xhReq.setRequestHeader("ajax-auth", "anything");
xhReq.onreadystatechange = processResponse;
xhReq.send(null);
}
catch(e)
{
alert("Error In Request:" + e);
}
The third:
function processResponse() {
if (xhReq.readyState != 4) { return; }
var serverResponse = xhReq.responseText;
alert(serverResponse);
}
I ran into an error while setting the setRequestHeader method, which it raise some "... nsIXMLHttpRequest.setRequestHeader error", and googled around then figured out that it had to be set only after opening the HttpRequest.

This link deserves the credits:
http://ajaxpatterns.org/XMLHttpRequest_Call
http://www.webmasterworld.com/forum91/4542.htm

regards,
choongseng