The case of the missing ‘onclick’ attribute?

We had an unusual bug with the application and it was identified to be related to a particularly data entry field that was implemented using an ASP.NET radiobuttonlist with AutoPostBack=”true”.

When we investigated the bug, we can across a bizarre scenario with a mysterious case of the missing ‘onclick’ attribute on the radio button.

We had some JavaScript using jQuery to access the ‘onclick’ attribute as follows:

$('#elementId').attr('onclick');

This seemed to be the correct way to access attributes using jQuery but for some reason was returning undefined. Very unusual, considering it was working fine for ASP.NET buttons. So I thought I’d bring up the IE Developer Tools and inspect the mark-up to see what the HTML looked like and this is what I saw:

To my amazement, it really wasn’t there. I was baffled as to why this the cause. It didn’t make sense. So I thought I’d do a View Source to see what if the results was different. I got the following:

Now this confused me further, the ‘onclick’ attribute was there when using View Source. Why did IE Developer Tools show something different to View Source – I am yet to work this one out. Given that the ‘onclick’ attribute was actually there, I decided to try a different approach and use pure JavaScript rather than jQuery to access the ‘onclick’ attribute as follows:

document.getElementById('elementId').onclick;

Funnily enough, this actually worked and returned the result that I was after. Again this adds more to the confusion. With this in mind, I modified the JavaScript and gave the changes a test and did not find any issues. Seems to be the workable solution. Testing in FireFox and Chrome showed that the JavaScript was cross browser compatible so that was a positive and that it was a solution that we could progress further with.

So what happened to the “onclick” attribute and why was it missing. Took a bit more investigation to figure that one out. I basically did some trial and error with another module that we had a similar issue previously with the ASP.NET radiobuttonlist thinking they may be related and stumbled across an ASP.NET radiobuttonlist that actually worked fine with the jQuery implementation. When comparing the two ASP.NET radiobuttonlist implementations, we found that it was the ASP.NET validator that was the cause. When an ASP.NET validator is attached to the ASP.NET radiobuttonlist the ‘onclick’ attribute is not added to the live mark-up and is handled by the JavaScript generated by the ASP.NET validator.

This behaviour does not seem to affect FireFox, Chrome or IE9 and above from testing. It seems to be isolated to IE8 and below. Unfortunately we are stuck with IE8 as our primary browser at the moment, so we’ll have to resort to using pure JavaScript at the moment to get this working for the time being.

Hopefully this helps.

Using Javascript to check the file size of an upload in HTML 5

In my previous post, Using Javascript to check the file size of an upload in Internet Explorer I explained how to check the file size of an upload using ActiveX. This required certain settings in Internet Explorer, so it is a bit limiting and was not really applicable to non Intranet based deployments.

Fortunately for us, this is not the only option, HTML 5 comes to the rescue. This will work in most environments and is much better suited to a public facing web application where you cannot control the security settings and enable ActiveX.

So how does this look? Let’s have a quick look at the source code below:

var selectedFiles = fileUploadControl[0].files;

if (selectedFiles !== undefined && selectedFiles.length >= 1) {
    fileSize = selectedFiles[0].size;
}

var fileSize = file.size;

As you can see, there isn’t really much difference between the ActiveX and the HTML 5 version. We just don’t need to new up an instance of the File System ActiveX object. You can access the file in the upload control directly. One thing you will notice is that there may be multiple files, this is a new feature that the file upload control supports in HTML 5. Here, we are just assuming that there will only be one file.

So that’s it. Both ActiveX and HTML 5 with Javascript options can be used to assist with checking the file size on the client side. This should make the user experience a lot better, so you can tell the user before they begin uploading that the file will be rejected before wasting valuable bandwidth.

Using Javascript to check the file size of an upload in Internet Explorer

A very common feature in most web applications is the ability to upload files to the server. One of the most common requirements with this feature is to restrict the file size that can be uploaded.

This is very easy to do on the server side and is well documented.

On the client side however, it isn’t a well documented.

With HTML5, this is a lot easier, however IE versions up until version 9 does not natively support this and you need to resort to using ActiveX. This is unlikely to work on too many public websites but in an Intranet environment, this would be a very useful feature to implement.

Lets break this down.

You first need to instantiate a new File System ActiveX object from based on “Scripting.FileSystemObject”. From there you can then access the file to get the file information by using the getFile method of the File System ActiveX object with the full path of the upload file. With that you can then check the size or any other file information you want that is available from the File ActiveX object.

So how does this look like in code?

var fso = new ActiveXObject("Scripting.FileSystemObject");
var filePath = fileUploadControl[0].value;
var file = fso.getFile(filePath);
var fileSize = file.size;

There is one caveat, though, which is why I said that this will most likely only be useful in an Intranet environment. What is that? Well IE needs to be updated so that the Security settings for ActiveX controls and plug-ins. What needs to be changed is the setting “Initialize and script ActiveX controls marked as safe for scripting” from “Disable” to either “Enable” or “Prompt”. Setting it to “Enable” means the user won’t even no.

In a future post, I’ll show how to do this using HTML5.

Hope this helps.