Javascript does not recognise dynamic div content

Question

I have a script i have been battling with now for like a week.

I have a page which has a div with id ("content"). Now I loaded some content, a form contained in a div tag to be specific, into this div VIA Ajax, and it is displaying fine

Now, the challenge is - When the form is submitted, Im am calling a function that will disable all the field on the element in that div tag. I always get the error "undefined".

It seems that the div, that i brought in to the page isn't recognized by javascript..

I have searched google, bing, yahoo..i just havent found the solution yet...

Please, what do I do??

I have included the code below --

+++++++++ The code below for my external javascript file

++++++++++++++++++++

// JavaScript Document

var doc = document;
var tDiv;
var xmlHttp;
var pgTitle;

function getXMLObj(){
        if (window.XMLHttpRequest){
          // code for IE7+, Firefox, Chrome, Opera, Safari
                Obj = new XMLHttpRequest();
          }
        else if (window.ActiveXObject){
            // code for IE6, IE5
                Obj = new ActiveXObject("Microsoft.XMLHTTP");
          }
        else{
                alert("Your browser does not support Ajax!");
        }
        return Obj;
}


function loadCont(toLoad, view){
    doc.getElementById('loadBlank').innerHTML = '<div id="loading">Processing Request...</div>';
    var url;
    switch(toLoad){
        case 'CI':
            pgTitle = "Administration - Company Information";
            url = "comp_info.php?v=" + view + "&sid=" + Math.random();
            break;
        case 'JB':
            pgTitle = "Administration - Jobs";
            url = "jobs.php?v=" + view + "&sid=" + Math.random();
            break;
        case 'US':
            pgTitle = "Administration - Users";
            url = "users.php?v=" + view + "&sid=" + Math.random();
            break;
        case 'EP':
            pgTitle = "Administration - Employees";
            url = "emp.php?v=" + view + "&sid=" + Math.random();
            break;
        case 'AP':
            pgTitle = "Administration - Recruitments";
            url = "applicants.php?v=" + view + "&sid=" + Math.random();
            break;
        case 'JV':
            pgTitle = "Administration - Recruitments";
            url = "jobvacancy.php?v=" + view + "&sid=" + Math.random();
            break;
    }

    xmlHttp = getXMLObj();
    if (xmlHttp !== null && xmlHttp !== undefined){
            xmlHttp.onreadystatechange = loadingContent;
            xmlHttp.open('GET', url, true);
            xmlHttp.send(null);
    }
}

function loadingContent(){

    if (xmlHttp.readyState == 4 || xmlHttp.readyState == 'complete'){
            //Show the loading and the title, but hide the content...
            if (xmlHttp.status == 200){
                doc.getElementById('dMainContent').innerHTML = parseScript(xmlHttp.responseText);
                doc.getElementById('loadBlank').innerHTML = '';
            }
            else{
                doc.getElementById('dMainContent').innerHTML = 'Sorry..Page not available at this time. <br />Please try again later';
                doc.getElementById('loadBlank').innerHTML = '';
            }
    }
    if (xmlHttp.readyState < 4){
            //Show the loading and the title, but hide the content...
            doc.getElementById('ActTitle').innerHTML = pgTitle;
            doc.getElementById('dMainContent').innerHTML = '';
    }
}

function valCompInfo(){
    //First Disable All the elements..
    alert('I was hree');
    DisEnaAll('CompForm');
    //Now..lets validate the entries..
}

function DisEnaAll(contId){
    //alert(doc.getElementById(contId).elements);
    var theId = doc.getElementById(contId).elements;

    try{
        var numElems = theId.length;

        for (var i=0; i < (numElems - 1); i++){
            (theId[i].disabled == false) ? (theId[i].disabled = true) : (theId[i].disabled = false);                
        }
    }
    catch(e){
        var msg = "The following error occurred: \n\n";
        msg += e.description
        alert(msg); 
    }

}


// http://www.webdeveloper.com/forum/showthread.php?t=138830
function parseScript(_source) {
    var source = _source;
    var scripts = new Array();

    // Strip out tags
    while(source.indexOf("<script") > -1 || source.indexOf("</script") > -1) {
        var s = source.indexOf("<script");
        var s_e = source.indexOf(">", s);
        var e = source.indexOf("</script", s);
        var e_e = source.indexOf(">", e);

        // Add to scripts array
        scripts.push(source.substring(s_e+1, e));
        // Strip from source
        source = source.substring(0, s) + source.substring(e_e+1);
    }

    // Loop through every script collected and eval it
    for(var i=0; i<scripts.length; i++) {
        try {
            eval(scripts[i]);
        }
        catch(ex) {
            // do what you want here when a script fails
        }
    }

    // Return the cleaned source
    return source;
 }

This code is on the main page where the javascript is

<div id="dMainContent">

</div>
</body>
</html>

And finally, the content of the page i am loading via ajax..

<div style="width:738px" id="CompForm">
    <div class="tdright">
        <a href="#" class="lnkBtn" onclick="valCompInfo();"><?php echo $btnNm; ?></a> &nbsp;
     </div>
</div>

That's the code..

Thanks

Answer 1

Add your Javascript functions or external JS file to the original page.

Answer 2

EDIT: Note per comments: this is NOT the answer :) See comments for details of why.

Left as an answer simply as a learning aid aid as suggested.

Shouldn't

xmlHttp.onreadystatechange = loadingContent; 

be

xmlHttp.onreadystatechange = loadingContent(); 

or

loadingContent();

and that function should return a value if you want to assign it like that...

Answer 3

this is not JavaScript....

doc.getElementById(contId).elements

but is used in your JavaScript... you will definitely not get anything. (null)

I don't think this is valid either:

theId[i].disabled == false

Answer 4

The issue is with div tag (id "CompForm") which is not a HTML form.

"elements" is a collection of the form element not div element. So when trying to access div.elements the property is undefined.

See MSDN, form.elements is part of DOM level 1 (according to MSDN)

http://msdn.microsoft.com/en-us/library/ms537449%28v=VS.85%29.aspx