C# Tutorials and offshore development in India
    Tutorials   Resources   Forum   Reviews   Communities   Interview   Jobs   Projects   Training   Your Ad Here    
Silverlight Games | Mentor | Code Converter | Articles | Code Factory | Computer Jokes | Members | Peer Appraisal | IT Companies | Bookmarks | Polls | Revenue Sharing | Lobby | Gift Shop |


Prizes & Awards
My Profile



Active Members
TodayLast 7 Days more...






Resources » Code Snippets » Javascript »

Creating controls using Dom


Posted Date: 31 Oct 2008    Resource Type: Code Snippets    Category: Javascript
Author: AbhayMember Level: Diamond    
Rating: 1 out of 5Points: 10



Controls need to append in a div or td of a table.


The following sample will demonstrate how to create controls using Dom.

1.create a xml file which contain nodes for control type and value for control and many thing as your requirement in server side and you can pass it to client side using ajax there as the value of node you can create control and set some value as below if a node1 contain value 2000 then create a checkbox if 2001 create textbox else create dropdown.


function FillData(result)
{

var doc=new ActiveXObject("Microsoft.XMLDOM");
doc.async="false";
doc.loadXML(result);

var isNormal = true;
//find id of fieldset
var tblfl = repTrId.replace("trInner","fldexpand");
var fldSet = document.getElementById(tblfl);
var divId = repTrId.replace("trInner","div");
// check whether div has child or not
while(fldSet.hasChildNodes())
{
fldSet.removeChild(fldSet.lastChild);

}

var controls = doc.getElementsByTagName('Table');

var parentDiv = document.createElement("<DIV style=\"padding-center:0em;\width=200px;\" align =left >"); //("div");
var CheckId = "";
var ddlSelected = "";
for(var i = 0; i < controls.length ; i++)
{

var myDiv = document.createElement("<DIV style=\"padding-center:0em;\width=100px;\" align=left >"); //("div");

var L_Examid = controls[i].getElementsByTagName('L_EXAM_ID')[0].childNodes[0].nodeValue;

var name = controls[i].getElementsByTagName('NAME')[0].childNodes[0].nodeValue;
var Contol_type = controls[i].getElementsByTagName('CONTROL_TYPEID')[0].childNodes[0].nodeValue;
var ExamValue = controls[i].getElementsByTagName('M_EXAM_VALUE')[0].childNodes[0].nodeValue;
var MExamId = controls[i].getElementsByTagName('M_EXAM_ID')[0].childNodes[0].nodeValue;
var txtBox = 0;
var Dropdown = 0;

switch(Contol_type)
{
case '2000':

var chkId = L_Examid;
//CREATE CHECKBOX
var newCheckBox = document.createElement("<INPUT TYPE='CHECKBOX'" +
" ID= " + chkId + " >");


myDiv.appendChild(newCheckBox);
if(ExamValue == 1)
{
CheckId = CheckId.concat(chkId);
CheckId = CheckId.concat("~");
}
break;
case '2001' :
//CREATE TEXTBOX
var txtId = L_Examid;
newTextBox = document.createElement("<INPUT TYPE='TEXT'" +
" ID= " + txtId + " >");
if(ExamValue != 0 && ExamValue != 1)
{
newTextBox.value = ExamValue;
}
txtBox=1;
break;
case '2002' :
//CREATE DROPDOWN

var ddlId = L_Examid;
var doc=new ActiveXObject("Microsoft.XMLDOM");
doc.async="false";

//alert(dropdownVals);

doc.loadXML(dropText);
//doc.loadXML(dropdownVals);

var control = doc.getElementsByTagName('Table');
newDropdown = document.createElement("<select ID= " + ddlId + " class=\"classdropdown\" ><option>-select-</option</select>");
//ASSIGN OPTION VALUE AND TEXT FROM A HIDDEN FIELD WHICH CONTAIN A XML FILE

for(var p=0;p<control.length;p++)
{
var M_Id = control[p].getElementsByTagName('PKMEDID')[0].childNodes[0].nodeValue;
var M_text = control[p].getElementsByTagName('DECISION')[0].childNodes[0].nodeValue;
var opt = document.createElement("OPTION");
if(p==0)
{
var optselect = document.createElement("OPTION");
var Text ="-select-";
optselect.text = Text;
optselect.value = 0;
newDropdown.options.add(optselect);
}

opt.text = M_text;
opt.value = M_Id;
if(ExamValue == M_Id)
{
ddlSelected = ddlSelected.concat(L_Examid);
ddlSelected = ddlSelected.concat('~');
ddlSelected = ddlSelected.concat(M_Id);
}

newDropdown.options.add(opt);
}

Dropdown=1;
break;

default:
break;

}

var newLabel = document.createElement("label");
newLabel.innerHTML = name ;
myDiv.appendChild(newLabel);
if(txtBox == 1)
{
//arrL_PEId[i] = L_Examid;
//arrM_PEId[i] = MExamId;

myDiv.appendChild(newTextBox);
}
if(Dropdown == 1)
{
// arrL_PEId[i] = L_Examid;
// arrM_PEId[i] = MExamId;

myDiv.appendChild(newDropdown);
}
parentDiv.appendChild(myDiv);
fldSet.appendChild(parentDiv);

}
//parentDiv.appendChild(myDiv);
if(ddlSelected != "")
{
var arrDDL =ddlSelected.split('~')
document.getElementById(arrDDL[0]).value = arrDDL[1];

}
//SET VALUE OF CONTROL FROM HIDDEN FIELD
if(CheckId != "")
{
var arrIds =CheckId.split('~')
for(var i = 0; i < arrIds.length - 1;i++)
{
//make check the checkboxes which has value
var idChk = arrIds[i];
if(idChk != null && idChk != "")
{
document.getElementById(idChk).checked = true;
}
}
}


}



Responses


No responses found. Be the first to respond and make money from revenue sharing program.

Feedbacks      
Popular Tags   What are tags ?   Search Tags  
Sign In to add tags.
DOM  .  Creating controls using Dom  .  

Post Feedback


This is a strictly moderated forum. Only approved messages will appear in the site. Please use 'Spell Check' in Google toolbar before you submit.
You must Sign In to post a response.
Next Resource: How to call the parent page javascript function from a popup window
Previous Resource: To List the properties of document in Javascript
Return to Discussion Resource Index
Post New Resource
Category: Javascript


Post resources and earn money!
 
More Resources



dotNet Slackers

About Us    Contact Us    Privacy Policy    Terms Of Use