An easy way to add dynamic elements

[tvd]

Hello,

I am new to JS and DHTML. I want to add elements like lable, textbox, button etc on differnt events of the page in a div present in html page.
So, the contents of present div element changes accordingly. At present, I am adding each element in a form & the dynamic form in the div. I am unable to add the form directly, so i have a label in html div & add the form using insertBefore ('dynamicForm', lbl).

 
   <div id="directDIV" class="directDIV" style="width: 273px; position: absolute; height: 550px; background-color:silver; left: 13px; top: 188px;"> 
        <label id="lbl"></label>
    </div>

Now, in another event, again i got to create another form & add in the div. But for that I first got to remove all elements from the div, if any. Then add the new created form. But as i am not able to add form directly using appendchild('newform'). And if I delete all elements than the original alble is also deleted & hence can't use insertBefore().

How do i face and solve this situation. By removing and adding or appending elements in the html div on different events.

Any help is highly appreciated. Please help me to solve this problem.

Thanks
Trupti

[riptide]

show more of your code.

[tvd]

Here is the code in the default.aspx.js file. Using this code I add new elements in the div.

The following code - createDrivePanel() is called on Driving Direction button click in the aspx file. In the (), I m not able to set the radiobuttnos properly. Please help me for that also if you can.

// Trying to delete elements from the div
function emptyDivPanel() {
   // Removes all Children, if exists in the div element
    if (directDIV.childNodes.length == 1 && directDIV.childNodes.item(0).tag == "label")
        alert("Only Label");
    
    alert(directDIV.childNodes.length + " Children in div");
    for(i=0; i < directDIV.childNodes.length; i++)
        alert("Tag " + i + ": " + directDIV.childNodes.item(i).tag);
}

// Driving Directions Panel
function createDrivePanel() {
//    emptyDivPanel();
    var odiv = document.getElementById("directDIV");
       
   var c=odiv.children;
    alert("2nd Time Form " + c.length );
    if (c > 1) {
        document.forms['dynamicForm'].elements['fromTxt'].value = "";
        document.forms['dynamicForm'].elements['toTxt'].value = "";
        //var dc = 
        for (i=0; i < c.length;i++) {
            alert(c.item(i).tagName); // Displays nothing
        }
            // TRying to know, if textTA element is present in the div
  //      if (document.forms['dynamicForm'].elements['textTA'].id == null)
  //          alert("DC is NULL" );
  //      else
  //          alert("DC");
    }
    
    var fromLbl=document.createElement("label");
    fromLbl.setAttribute("for", "drFrom");
    fromLbl.innerHTML="Drive From: ";
    var toLbl=document.createElement("label");
    toLbl.setAttribute("for", "drTo");
    toLbl.innerHTML="Drive To: ";
  
    var dynamicForm=document.createElement("form");
    dynamicForm.setAttribute("id", "dynamicForm");
    dynamicForm.setAttribute("runat", "server");
    var fromTxt=document.createElement("input");
    fromTxt.setAttribute("type", "text");
    fromTxt.setAttribute("id", "fromTxt");
    fromTxt.setAttribute("value", "");
    var toTxt=document.createElement("input");
    toTxt.setAttribute("type", "text");
    toTxt.setAttribute("id", "toTxt");
    toTxt.setAttribute("value", "");
    
    var miles=document.createElement("input");
    miles.setAttribute("type", "radio");
    miles.setAttribute("id", "miles");
    miles.setAttribute("value", "miles");
    miles.setAttribute("checked", "true");
    miles.setAttribute("name", "units");
    
    var km=document.createElement("input");
    km.setAttribute("type", "radio");
    km.setAttribute("id", "km");
    km.setAttribute("value", "km");
    km.setAttribute("checked", "false");
    km.setAttribute("name", "units");

    var getDirectionsBtn=document.createElement("input");
    getDirectionsBtn.setAttribute("type", "button");
    getDirectionsBtn.setAttribute("id", "getDirectionsBtn");
    getDirectionsBtn.setAttribute("value", "Get Directions");
    var driveFrom="";
    var driveTo = "";
    var scaleUnits = "";
    var getVal=function(){
//        scaleUnits=document.forms['dynamicForm'].elements['radio'].value;
        alert(scaleUnits);
        driveFrom=document.forms['dynamicForm'].elements['fromTxt'].value;
        driveTo=document.forms['dynamicForm'].elements['toTxt'].value; 
        GetDirections(driveFrom, driveTo);
    }  //this sets up a function in the same scope as the onclick assignment that will use it.
    getDirectionsBtn.onclick=getVal;  //this assigns the function to the element.
   
//    c=odiv.children.length;
    dynamicForm.appendChild(fromLbl);
    dynamicForm.appendChild(fromTxt);
    dynamicForm.appendChild(document.createElement("<br>"));
    dynamicForm.appendChild(toLbl);
    dynamicForm.appendChild(toTxt);
    dynamicForm.appendChild(document.createElement("<br>"));
    dynamicForm.appendChild(miles);
    dynamicForm.appendChild(km);
    dynamicForm.appendChild(document.createElement("<br>"));
    dynamicForm.appendChild(getDirectionsBtn);
    odiv.insertBefore(dynamicForm, lbl);    
}

// Get Directions
function GetDirections(from, to) {
    map = new VEMap('mymap');
    map.LoadMap();
    try {
        map.GetRoute(from,to, VEDistanceUnit.Miles, VERouteType.Shortest, onGotRoute);
    } catch(err) {
        alert("Error n GetDirections : " + err.description);
    }
}

// Get Directions Callback
function onGotRoute(route) {

    var routeinfo="";
    var error="";
    
    if (route == null || route.Itinerary == null) {
       error = "Cannot Find \'From\' OR \'To\' Location. Please refine your directions.";
               
    } else {
        var steps=""; // <ol>";
        var len = route.Itinerary.Segments.length;
        for(var i=0; i<len; i++) {
            steps += i+1 + ".) " + route.Itinerary.Segments[i].Instruction + " --(";
            steps += route.Itinerary.Segments[i].Distance + ") "; 
            steps += route.Itinerary.DistanceUnit + "\n";
        }
    }
    AddRouteSteps(steps, route, error);
}

// Add Information & Steps to the Div - Driving Directions
function AddRouteSteps(text, route, error) {
    var d=document.getElementById("directDIV");
    var e=document.getElementById("dynamicForm");
    d.style.visibility="visible";
    
    var titleRoute=document.createElement("hding");
    titleRoute.style.font.bold = true;
    titleRoute.innerHTML="Route Info: ";


    var label1=document.createElement("label");
    
    if (error != "") {
         label1.innerHTML=error;
         e.appendChild(label1);
    } else {
        label1.innerHTML="From: " + route.StartLocation.Address + " To: " + route.EndLocation.Address;
        var label2=document.createElement("label");
        label2.innerHTML = "Total Distance: " + route.Itinerary.Distance + " " + route.Itinerary.DistanceUnit.Miles + "\n Total Time: " + route.Itinerary.Time;    
        var label3=document.createElement("label");
        label3.innerHTML = "Steps: ";    

        var textTA=document.createElement("textarea");
        textTA.setAttribute("id", "textTA");
        textTA.style.width="273px";
        textTA.setAttribute("overflow", "auto");
        textTA.setAttribute("rows", "30");
        textTA.value = text;
        
         e.appendChild(document.createElement("<br>"));
         e.appendChild(titleRoute);
         e.appendChild(document.createElement("<br>"));
         e.appendChild(label1);
         e.appendChild(document.createElement("<br>"));
         e.appendChild(label2);
         e.appendChild(document.createElement("<br>"));
         e.appendChild(label3);
         e.appendChild(document.createElement("<br>"));

        
        e.appendChild(textTA);
   }
    e.appendChild(document.createElement("<br>"));

}

In This code, crearePushpinPanel() is fired on Add Pushpin button click

function AddMyPushpin(title, desc) {
    var pinid = 1;
    var pin= new VEPushpin(pinid, new VELatLong(latitude, longitude), 'images/Pushpin.bmp'); //, title, desc);
    map.AddPushpin(pin);
    
}

function crearePushpinPanel() {
   var d=document.getElementById("directDIV");
    var newdiv = document.createElement("div");
    var lbl1 = document.createElement("label");
    lbl1.setAttribute("id", "TitleLbl");
    lbl1.innerHTML="Title";
 
    var dynamicForm=document.createElement("form");
    dynamicForm.setAttribute("id", "dynamicForm");
    dynamicForm.setAttribute("runat", "server");
   
    var titleTxt=document.createElement("input");
    titleTxt.setAttribute("type", "text");
    titleTxt.setAttribute("id", "titleTxt");
    titleTxt.setAttribute("value", "");
    
    var lbl2 = document.createElement("label");
    lbl2.setAttribute("id", "DescLbl");
    lbl2.innerHTML="Description";
    
     var descTxt=document.createElement("input");
    descTxt.setAttribute("type", "text");
    descTxt.setAttribute("id", "descTxt");
    descTxt.setAttribute("value", "");

    var addPinBtn=document.createElement("input");
    addPinBtn.setAttribute("type", "button");
    addPinBtn.setAttribute("id", "addPinBtn");
    addPinBtn.setAttribute("value", "Press To Add Pushpin");

    var title="";
    var desc = "";
    var getVal=function(){
        title=document.forms['dynamicForm'].elements['titleTxt'].value;
        desc=document.forms['dynamicForm'].elements['descTxt'].value; 
        AddMyPushpin(title, desc);
    }  //this sets up a function in the same scope as the onclick assignment that will use it.
    addPinBtn.onclick=getVal;  //this assigns the function to the element.

    dynamicForm.appendChild(lbl1);
    dynamicForm.appendChild(titleTxt);
    dynamicForm.appendChild(document.createElement("<br>"));
    dynamicForm.appendChild(lbl2);
    dynamicForm.appendChild(descTxt);
    dynamicForm.appendChild(document.createElement("<br>"));
    dynamicForm.appendChild(addPinBtn);
    dynamicForm.appendChild(document.createElement("<br>"));
    
     d.insertBefore(dynamicForm, lbl);    

//    d.appendChild('dynamicForm'); // Throws exception
  //  d.appendChild('newdiv');
}

Code for the div in the aspx respectively:

    <div id="directDIV" class="directDIV" style="width: 273px; position: absolute; height: 550px; background-color:silver; left: 13px; top: 188px;"> 
        <label id="lbl"></label>
    </div>

Like these 2, still, one more such occurance will occur, wher I will have to show a list of a href's


I believe I gave all the required source code for my query. This will help you, help me better and effectively. Looking forward for your help at the earlest.

Thanks
TVD

[riptide]

okay well you can get arround deleting the divs child nodes by putting another div in side of the first one then deleting that.

when you want to add something wrap it in a div. I'm not good at using for loops to do much more then count.

what is (directDIV.childNodes.item(0).tag)

and what Attribute is for (fromLbl.setAttribute("for", "drFrom"); )

never use e ( var e=document.getElementById("dynamicForm")) you may need to use another name.

if this has to do with the server I wounldn't know what this is
(dynamicForm.setAttribute("runat", "server");
)
other than that I don't know. You need a better coder to come take a look at this

[tvd]

Hello,

My problem has solved by doing RnD & finally things worked out. So, please don't waste time on this question.

The problem actually was, in the line
d.appendChild('dynamicForm'); // Throws exception
it shoud be
d.appendChild(dynamicForm);

Yes their should be no quotes. Now I remove everything from the div & add newly created form. This function, checks & removes all nodes.
function emptyDirectDiv() {
if (document.getElementById('directDIV').hasChildNodes()) {
document.getElementById('directDIV').removeChild(document.getElementById('directDIV').childNodes[0]);
}
}

Thanks alot to all of you.
TVD