Question

I am trying to figure out why my javascript that creates input elements on the fly via DOM is referencable in Firefox but not in IE 7 nor 8.

I have the following function triggered when a user clicks a button

function addEndPoint_intelDNS(){
    pageCounter.addMethod("endpoint_count");
    count = pageCounter.getendpoint_count();

    //endpoint IP and hostname labels
    var endpointIPText = document.createTextNode('Endpoint ' + count + ' IP: \u00a0');
    var endpointHostText = document.createTextNode('\u00a0 Endpoint ' + count + ' Hostname: \u00a0 ');
    var brNode = document.createElement('br');

    //endpoint InputIPBox
    var endpoint_IP_InputElement = document.createElement('input');
    endpoint_IP_InputElement.setAttribute('type', 'text');
    endpoint_IP_InputElement.setAttribute('id', 'endpoint_'+count+'_ip');
    endpoint_IP_InputElement.setAttribute('name', 'endpoint_'+count+'_ip');
    endpoint_IP_InputElement.setAttribute('maxlength', '15');
    endpoint_IP_InputElement.setAttribute('onChange', 'resolveMe(this.value,\u0022endpoint_'+count+'_name\u0022, \u0022ip\u0022);');


    //endpoint host inputbox
    var endpoint_HOST_InputElement = document.createElement('input');
    endpoint_HOST_InputElement.setAttribute('type', 'text');
    endpoint_HOST_InputElement.setAttribute('id', 'endpoint_'+count+'_name');
    endpoint_HOST_InputElement.setAttribute('name', 'endpoint_'+count+'_name');
    endpoint_HOST_InputElement.setAttribute('size', '35');
    endpoint_HOST_InputElement.setAttribute('onChange', 'resolveMe(this.value,\u0022endpoint_'+count+'_ip\u0022, \u0022name\u0022);');

    //output
    document.getElementById('intelDNS_endpoints_codeblock').appendChild(endpointIPText);
    document.getElementById('intelDNS_endpoints_codeblock').appendChild(endpoint_IP_InputElement);
    document.getElementById('intelDNS_endpoints_codeblock').appendChild(endpointHostText);
    document.getElementById('intelDNS_endpoints_codeblock').appendChild(endpoint_HOST_InputElement);
    document.getElementById('intelDNS_endpoints_codeblock').appendChild(brNode);

Please ignore the pageCounter object, it is simply an object that keeps track of how many inputs the user will be supplying.

As you can see there is a onChange event attribute added to each of the 2 input text boxes (InputIPBox and host_inputbox) They are practically identical so I will supply one of the functions

function resolveMe(val, loc_id, type){
    alert(val);
    switch(type){
        case "ip":
                resolveIP2DNS(val, loc_id);
            break;
        case "name":
                resolveDNS2IP(val, loc_id);
            break;
    }

}

function resolveIP2DNS(ip, loc){
    doclocation = loc;
    var ajaxRequest; //initialize ajax object
    var browser = navigator.appName; //find the browser name
    if(browser == "Microsoft Internet Explorer"){
        /* Create the object using MSIE's method */
        ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else{
        /* Create the object using other browser's method */
        ajaxRequest = new XMLHttpRequest();
    }

    // Create a function that will receive data sent from the server
    ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState == 4)
        {
            // Get the data from the server's response
            //what on this page is changing
            var xmlRes=ajaxRequest.responseXML.documentElement;
            try {
                var dns = xmlRes.getElementsByTagName('DNS')[0].firstChild.nodeValue;
            }catch (err){
                dns = "Not Resolvable";
            }
            //output to location in page
            document.getElementById(doclocation).value = dns;   
        }

    }
    ajaxRequest.open("GET", "/ajax.psp?ip2DNS=" + ip, true);
    ajaxRequest.setRequestHeader('Content-Type', "text/xml");
    ajaxRequest.send(null);
}

The ajax.psp page works perfectly and this function works when called for different parts of my site, So i know it is receiving the desired resolution values.

So I am quite stumped, because it works perfectly in Firefox, but not in IE..Also further debuggin I see that the onchange event never goes to the first function in IE(hence the alert never gets popped).

Let me know what you all think…

Answer 1

Don’t use “setAttribute()” to set things that should be properties on the DOM node. Thus, set the “onchange” handler with

endpoint_IP_InputElement.onchange = function() {
  resolveMe(this.value, 'endpoint_'+count+'_name', 'ip');
};

That will work with Firefox and Chrome etc. too.

edit — hold on – we’re going to have to make sure this is properly bound in the function. I’m not sure it’ll be bound automatically in older IE, so I’ll check.

edit again — yup it should be fine. When your function is called, this will be the changed <input> node.