Rampidbyter Rampid byter: A byte of my .Net developing life.

I was working on a project recently working on the master page of a .Net 2.0 Web Application and I encountered the most ambiguous error message. I was removing style sheet controls that were going to be added to a dynamic Page style mechanism when I first ran into the error. I had been going through the tags removing the trailing ASP control tags with the /> tag to end the control markup.

I did this on a JavaScript tag changing from this:

<script type="text/javascript" language="javascript" src="../scripts/vkboards.js”></script>

To this:

<script type="text/javascript" language="javascript" src="../scripts/vkboards.js"/>

Everything compiled fine but when I ran the project I kept getting this error message:

Microsoft JScript runtime error: 'document.body' is null or not an object.

Code Segment:

var _b=document.createElement("div");

var _c=document.createElement("div");

_b.style.visibility="hidden";

_b.style.position="absolute";

_b.style.fontSize="1px";

_c.style.height="0px";

_c.style.overflow="hidden";

document.body.appendChild(_b).appendChild(_c);

It was really strange and i took a look again at my code and the only thing I could think was that all the JavaScript included file gets inserted on the page rendering in-between where the beginning script markup and the end tag markup is located. I didn’t see this happening on the page markup when the exception was thrown, but that’s my best guess for now. If you’ve run into this error it’s easy enough to fix just add an ending tag, </script> in this case, and the exception will be diverted.

I inherited an ASP.Net 2.0 web application project that was in desperate need of repair. One thing I quickly noticed was the amount of JavaScript scripts that were added on the Page_Load to the click event of LinkButton controls within a template column in a GridView control.

The scripts would add the JavaScript Confirm(“”) function to the click event of each control to prompt a user with a hard-coded message on whether to continue the action or cancel. The problem with this approach was that on clicking cancel the post-back would still occur and as a result the delete/edit/insert action would be performed. After spending what seemed like days trying to find the cause of the post-back and why even though the JavaScript function returned the value to the client click it would still carry on it’s server side action.

I searched and searched on the cause of this problem and found everything from creating a page level script to change the 0 and 1 to the respective true and false values that get returned from the JavaScript call. This did the exact same thing as just returning 1 or 0 based on the Ok or Cancel button selection. Nothing seemed to work and the grid wasn’t setup in any special way. That was until I found the ConfirmButtonExtender control as part of the AJAXToolkit.

After including a ConfirmButtonExtender within the template column with the control to validate set to my LinkButton did the JavaScript confirm dialog actually do what it was supposed to. Now when clicking on a LinkButton the confirm dialog appears, displays my ConfirmText property, and then based on the user action of clicking Ok or Cancel will actually stop the post-back from happening. Fantastic, the exact fix I was looking for, and it had the added advantage of exposing a control on the code-behind that could have the displayed confirmation text easily changed without having to consciously worry about JavaScript hooks to the client click event.

Now all I have to do is add my ConfirmButtonExtender to my TemplateField as such:

<asp:TemplateField HeaderText="Delete">
<ItemTemplate>                           
<asp:LinkButton ID="lbtndelete" runat="server" CommandName="Delete" Text="Delete" />                           
<ajaxToolKit:ConfirmButtonExtender ID="cbeDelete" runat="server" TargetControlID="lbtndelete" />                       
</ItemTemplate>
</asp:TemplateField>

On the GridView I can simply add an event handler for the OnRowDataBound event to programmatically assign my ConfirmText from say a Resource file or possibly other mechanism.

OnRowDataBound="GrvAdmin_RowDataBound"

protected void GrvAdmin_RowDataBound(object sender, GridViewRowEventArgs e)       
{           
((AjaxControlToolkit.ConfirmButtonExtender)e.Row.FindControl("cbeDelete")).ConfirmText = Resources.Resource.CONFIRM_DELETE_USER;
}