Creating Dynamic DOM Elements in jQuery and resolving IE Issues
Hello to all programmers across the globe!
Today we will learn about How to add dynamic controls to your HTML DOM using jQuery and problems with IE( A browser developers hate and C Level guys love)
Real World Scenario:
We have a screen which takes information of a student. There are 3 fields, his/her name , description and skill sets which he/she has. Now there can be multiple skills which the student might have. So we have a button on the screen 'Add Skills' to add more skills if they are more than one.
Limits: For the sake of simplicity, I am not adding any work around to delete skills. So users will not be able to delete skills once added and there will always be one skill initially.
HTML:
<body>
Name of Student <br/>
<input id="amc_txtBucketName" type="text" value="" ></input><br/>
Description <br/>
<textarea id="amc_txtBucketDescription" cols="20" rows="10" ></textarea>
Skills <br/>
<input type="button" value="Add Another Skill / Competency" onclick="AddSkill()"></input> <br/>
<div id="skills_area">
<input id="txt_skill_1" class="SkillSet" value="Type name of skill here"></input>
</div>
<br/>
<input id="amc_btnSave" type="submit" onclick="ShowStudentInfo()"></input>
<input id="amc_btnClear" type="submit" onclick="ClearStudentInfo()"></input>
</body>
Now in the header of the page (or any other appropriate place depending on your scenario), we will have our script.
<script type="text/javascript" language="javascript">
$(document).ready(
function () {
// --------------
//Do all this when page is loaded completely
// -------------
}
);
var skillCount = 1; // a global js variable out of every function
// Function which will add dynamic controls to the page for more Skills
function AddSkill() {
skillCount++;
//Now getting reference of div to add dynamic control to
var AreaToAddNewSkillTo = $('#skills_area');
var txtSkill = $('<input>').attr(
{
id: 'txt_skill_' + skillCount,
value: '',
class:'SkillSet'
}
);
$(AreaToAddNewSkillTo ).append(txtSkill);
}
</script>
Read about append here > https://api.jquery.com/append/
There is another variation of append called AppendTo, see https://api.jquery.com/appendTo/
Did you notice how we created a input element by writing $('<input>') and then .attr( ) to set attributes.
Why I highlighted 'class' attribute in red ? Now here is the catch !
The above way of setting attributes to a dynamically created HTML element works fine in ALL BROWSERS BUT
IE (at least until IE9) will not recognize 'class' as an attribute and will through exceptions if you debug in IE.
So a simple work around is to use the jQuery method addClass to add a class after creating the dynamic element. So after rewriting the above code:
var txtSkill = $('<input>').attr(
{
id: 'txt_skill_' + skillCount,
value: ''
}
).addClass('SkillSet');
This works fine in IE and in any other browser.
_________________________________________________________________________________
This is it for today! See you guys again!
Feel free to post comments/questions and I would love to answer and help you out!
Good day!
Hello to all programmers across the globe!
Today we will learn about How to add dynamic controls to your HTML DOM using jQuery and problems with IE( A browser developers hate and C Level guys love)
Real World Scenario:
We have a screen which takes information of a student. There are 3 fields, his/her name , description and skill sets which he/she has. Now there can be multiple skills which the student might have. So we have a button on the screen 'Add Skills' to add more skills if they are more than one.
Limits: For the sake of simplicity, I am not adding any work around to delete skills. So users will not be able to delete skills once added and there will always be one skill initially.
HTML:
<body>
Name of Student <br/>
<input id="amc_txtBucketName" type="text" value="" ></input><br/>
Description <br/>
<textarea id="amc_txtBucketDescription" cols="20" rows="10" ></textarea>
Skills <br/>
<input type="button" value="Add Another Skill / Competency" onclick="AddSkill()"></input> <br/>
<div id="skills_area">
<input id="txt_skill_1" class="SkillSet" value="Type name of skill here"></input>
</div>
<br/>
<input id="amc_btnSave" type="submit" onclick="ShowStudentInfo()"></input>
<input id="amc_btnClear" type="submit" onclick="ClearStudentInfo()"></input>
</body>
Now in the header of the page (or any other appropriate place depending on your scenario), we will have our script.
<script type="text/javascript" language="javascript">
$(document).ready(
function () {
// --------------
//Do all this when page is loaded completely
// -------------
}
);
var skillCount = 1; // a global js variable out of every function
// Function which will add dynamic controls to the page for more Skills
function AddSkill() {
skillCount++;
//Now getting reference of div to add dynamic control to
var AreaToAddNewSkillTo = $('#skills_area');
var txtSkill = $('<input>').attr(
{
id: 'txt_skill_' + skillCount,
value: '',
class:'SkillSet'
}
);
$(AreaToAddNewSkillTo ).append(txtSkill);
}
</script>
Read about append here > https://api.jquery.com/append/
There is another variation of append called AppendTo, see https://api.jquery.com/appendTo/
Did you notice how we created a input element by writing $('<input>') and then .attr( ) to set attributes.
Why I highlighted 'class' attribute in red ? Now here is the catch !
The above way of setting attributes to a dynamically created HTML element works fine in ALL BROWSERS BUT
IE (at least until IE9) will not recognize 'class' as an attribute and will through exceptions if you debug in IE.
So a simple work around is to use the jQuery method addClass to add a class after creating the dynamic element. So after rewriting the above code:
var txtSkill = $('<input>').attr(
{
id: 'txt_skill_' + skillCount,
value: ''
}
).addClass('SkillSet');
This works fine in IE and in any other browser.
_________________________________________________________________________________
This is it for today! See you guys again!
Feel free to post comments/questions and I would love to answer and help you out!
Good day!
