Dynamically Creating HTML Elements Using Javascript

Peter K — Mon, 26 Nov 2007 22:59:01 GMT

Suppose you want your users to submit a list of items through your web page. These items could be inputted through many means such as a text box, combobox, listbox, etc. There are many ghetto solutions you could use to implement this like comma delimited lists or multiple postbacks. There are however much more elegant, and suprisingly easier ways of doing this using javascript. As an example we will start with an input box with a link below it that allows you to spawn several more input boxes. In addition, each spawned input box comes with its own delete link, allowing the user to remove items if they choose to. Each input box is given a unique incremented ID that can be easily accessed later on through postback.

Here's the javascript that makes it work:

<script type="text/javascript" language="javascript">     
    var software_number = 1;
    function addSoftwareInput() 
    {
        var d = document.createElement("div");
        var l = document.createElement("a");
        var software = document.createElement("input");
        software.setAttribute("type", "text");
        software.setAttribute("id", "software"+software_number);
        software.setAttribute("name", "software"+software_number);
        software.setAttribute("size", "50");
        software.setAttribute("maxlength", "74");
        l.setAttribute("href", "javascript:removeSoftwareInput('s"+software_number+"');");
        d.setAttribute("id", "s"+software_number); 
        
        var image = document.createTextNode("Delete");
        l.appendChild(image);
        
        
        d.appendChild(software);
        d.appendChild(l);
        
        document.getElementById("moreSoftware").appendChild(d);
        software_number++;
        software.focus();
    }
    
    function removeSoftwareInput(i) 
    { 
        var elm = document.getElementById(i); 
        document.getElementById("moreSoftware").removeChild(elm); 
    }
</script>

And the tiny amount of html to get it to show up:

<input type="text" name="software0" id="software0" size="50" maxlength="74" />                
<div id="moreSoftware"></div> <div id="moreSoftwareLink" style="display:block;"><a href="javascript:addSoftwareInput();">Add Another Item</a></div>

You can paste the above HTML and javascript into your own webpage to see it in action.

In some languages such as PHP, accessing these dynamically created elements after postback isn't an issue, it's a simple matter of using a for loop to iterate through each element. However this becomes a challenge if you're using ASP.NET. The problem is that these new elements are created on the client side, and once submitted, the server no longer sees them. The workaround is to use javascript to collect the contents of each element and stuff them into a hidden element in a delimited format. In the case of ASP.NET this hidden element would have to be declared within the page that is originally sent to the client. Then on postback we can collect the contents of this single element, break up each list item by the delimiter and deal with them as we normally would. First we create our hidden attribute to dump our item contents on submit:

<input id="ninjainput" type="hidden" name="ninjainput" />

We'll call it "ninjainput", because it's stealthy and mysterious, like a ninja. Next, we'll insert an additional javascript function that will populate our ninjainput when the user submits the page.

function populateStaticInput()
{
    var n = document.getElementById("ninjainput");
    var allsoftware = "";
    for( var i = 0; i < software_number; i++)
    {
        var currentele = document.getElementById("software"+i);
        if(currentele != null)
        {
            if(currentele.value.length > 0)
            {
                if(currentele.value.length > 74)
                    currentele.value = currentele.value.substring(0, 74);
                allsoftware = allsoftware + "~<>~" + currentele.value;
            }
        }
    }
    n.value = allsoftware;     
}

Notice that we are delimiting each item with a "~<>~". Make sure to add this attribute to your form tag: onsubmit="javascript:populateStaticInput();" This way the javascript will run and populate our ninjainput control before the page is sent to the server. Lastly, we will need a function (the example below is in C#) that will cut up the submitted list of items into a usable format, in this case an array of strings.

public string[] GetAllSoftwareInList(string rawsoftlist)
{
    string[] asoft = rawsoftlist.Split("~<>~".ToCharArray(), System.StringSplitOptions.RemoveEmptyEntries);
    return asoft;
}

And there you have it, the user doesn't have to endure multiple postbacks or keep track of a comma delimited list. It's presented in an organized and intuitive manner to the user and not too painful to implement for the developer.

Silently Getting Exception Details From Your Users in ASP.NET

Peter K — Fri, 23 Nov 2007 02:14:32 GMT

Say you have an ASP web site that you've deployed and want to be notified when and why your website craps the bed. Since it's live you probably have something like this in your web.config file:

<customErrors mode="RemoteOnly" defaultRedirect="error.aspx"/>

And while it hides all the exception details from your users, serving them a pretty error page, it has the side effect of returning the generic and completely useless System.Web.HttpUnhandledException. So the question is how do you, the developer, recieve the full stack trace and exception details when a user happens to come upon an error using your application? You might feel tempted to use the Application_Error event in Global.asax to catch the exception, parse out all the exception details and email them to yourself. Unfortunately that won't work because ASP will still hide the stack trace from you. Instead of wasting your time writing code from scratch that will do this, you can accomplish the same thing by adding a few lines to your web.config file.

    <system.net>
        <mailSettings>
            <smtp deliveryMethod="Network">
                <network host="yoursmtpserver"/>
            </smtp>
        </mailSettings>
    </system.net>
    <system.web>
        <healthMonitoring enabled="true" heartbeatInterval="0">
            <providers>
                <add name="ErrorEmailProvider" type="System.Web.Management.SimpleMailWebEventProvider" to="you@email.com" from="donotreply@you.com" buffer="false" subjectPrefix="[APP ERROR]"/>
            </providers>
            <rules>
                <add name="EmailErrors" eventName="All Errors" provider="ErrorEmailProvider" profile="Default" minInstances="1" maxLimit="Infinite" minInterval="00:01:00" custom=""/>
            </rules>
        </healthMonitoring>

With those blocks in your web.config file you will recieve an email containing all the information you need to track down which section of code failed. And at the same time your user recieves a friendly error page and is none the wiser. Here's a sample of a simple IndexOutOfRangeException.

** Application Information **
---------------
Application domain: /LM/W3SVC/1/Root/HSR-1-128402415931345878
Trust level: Full
Application Virtual Path: /HSR
Application Path: C:\Inetpub\wwwroot\HSR\ Machine name: myserver


** Events **
---------------
Event code: 3005
Event message: An unhandled exception has occurred.
Event time: 11/22/2007 2:47:40 PM
Event time (UTC): 11/22/2007 9:47:40 PM
Event ID: 051ece02de474c8ea153eb0ffc058f25 Event sequence: 6 Event occurrence: 1 Event detail code: 0

Process information:
    Process ID: 4092
    Process name: w3wp.exe
    Account name: NT AUTHORITY\NETWORK SERVICE

Exception information:
    Exception type: System.IndexOutOfRangeException
    Exception message: Index 0 is either negative or above rows count.

Request information:
    Request URL: http://myserver/HSR/requeststatus.aspx?request=22
    Request path: /HSR/requeststatus.aspx
    User host address: 000.000.000.000
    User: someuser
    Is authenticated: True
    Authentication Type: Negotiate
    Thread account name: NT AUTHORITY\NETWORK SERVICE

Thread information:
    Thread ID: 1
    Thread account name: NT AUTHORITY\NETWORK SERVICE
    Is impersonating: False
    Stack trace:    at System.Data.DataView.GetElement(Int32 index)
   at System.Data.DataView.get_Item(Int32 recordIndex)
   at requeststatus.Page_Load(Object sender, EventArgs e) in c:\Inetpub\wwwroot\HSR\requeststatus.aspx.cs:line 27
   at System.Web.Util.CalliHelper.EventArgFunctionCaller(IntPtr fp, Object o, Object t, EventArgs e)
   at System.Web.Util.CalliEventHandlerDelegateProxy.Callback(Object sender, EventArgs e)
   at System.Web.UI.Control.OnLoad(EventArgs e)
   at System.Web.UI.Control.LoadRecursive()
   at System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint)

Tech Tags: ASP ASP.NET Exception Email Web.Config