Dynamic AJAX control

[Aris Tan]

Initially, my form has two dropdowns. the contents of the second dropdown is populated via ajax

using dwr. The "Add another" link creates another instance of the dropdowns, the problem is it loses the

ajax/dwr functionality of the first.

Appreciate the help.

 < div id="dynamicInput"> 
             < form:select path="schoolState" id="schoolState" onchange="loadStates();"> 
                < c:forEach items="${schoolLocation}" var="collegeLocation"> 
                     < form:option label="${collegeLocation}" value="${collegeLocation}"/> 
                < /c:forEach> 
             < /form:select> 
          < div id="s_s" style="display: none;"> 
                < form:select path="schoolName" id="schoolName" > 
                < /form:select> 
 < /div>   < /div>
<a   rel="nofollow">Add Another </a> 

    function clone() { 
            var element = document.getElementById("schoolState"); 
            for(var i=0; i<1;i++) { 
                var tempNode = element.cloneNode(true); 
                tempNode.id="schoolState"+i.toString(); 
                var divToAppendTo = document.getElementById("dynamicInput"); 
                divToAppendTo.appendChild(tempNode); 
            } 
 
            var element2 = document.getElementById("schoolName"); 
            for(var i=0; i<1;i++) { 
                var tempNode = element2.cloneNode(true); 
                tempNode.id="schoolName"+i.toString(); 
                var divToAppendTo = document.getElementById("dynamicInput"); 
                divToAppendTo.appendChild(tempNode); 
            } 
 
 
 
var newdiv = document.createElement('div'); 
document.getElementById('dynamicInput').appendChild(newdiv); 
    }  
 
 
 var callback = function(c) {   
 
 }   
 
 function loadStates() {   
 
     var state = dwr.util.getValue('schoolState');   
 
     targetSchoolDAO.getAllSchoolsByLocation(state, scallback);   
 
 }   
 
 var scallback = function(data) {   
 
     var size = data.length;   
 
     if (size == 0) {   
 
         //alert("Nothing found"); 
 
         document.getElementById('s_s').style.display = 'none';   
     } else {   
 
         //alert(size);   
 
         document.getElementById('s_s').style.display = 'block';   
 
         dwr.util.removeAllOptions('schoolName');   
 
         dwr.util.addOptions('schoolName', data, 'collegeName', 'collegeName');   
 
     }   
 
 }   


   

[Eric Pascarello]

Are you adding the event handlers to the new elements?

Eric