Develop Reference

How to retrieve dynamically generated ids from input type?

Currently, I have an array of questions stored in a json file, using this code it will call the questions accordingly with the following script, which is then appended to a div called questions. How do I get the dynamically generated ids of the input types into the changeFont function so that not just the questions but also the inputs would be able to have a change in size
<script>
var array = JSON.parse(arrayQuestions);
console.log(array);
for (var i = 0; i < array.length; i++) {
var question = array[i];
var questionDiv = document.createElement("div");
var html = "<form>";
html = question.question + " <br> ";
var choices = question.choices;
for (j = 0; j < choices.length; j++) {
var choicesOpt = choices[j];
if (question.type == "radio") {
html += "<fieldset data-role=\"controlgroup\">";
html += "<input type=\"radio\" data-theme=\"b\" name=\"" + i + "\" id=\"" + i + choicesOpt + "\" value=\"" + choicesOpt + "\" /><label for=\"" + i + choicesOpt + "\">" + choicesOpt + "</label>";
html += "</fieldset>";
} else if (question.type == "checkbox") {
html += "<fieldset data-role=\"controlgroup\">";
html += "<input class=\"banana\" type=\"checkbox\" data-theme=\"b\" name=\"" + i + "\" id=\"" + i + choicesOpt + "\" value=\"" + choicesOpt + "\" /><label for=\"" + i + choicesOpt + "\">" + choicesOpt + "</label>";
html += "</fieldset>";
} else if (question.type == "textbox") {
html += "<input class=\"banana\" type=\"text\" data-theme=\"b\" data-clear-btn=\"true\" name=\"" + i + "\" id=\"" + i + choicesOpt + "\" value=\"" + choicesOpt + "\">";
} else {
html += "<textarea name=\"" + i + "\" id=\"" + i + choicesOpt + "\"></textarea>";
}
html += "";
}
html += "</form>";
// html += "<input type=\"button\" onclick=\"myFunction()\" value=\"Submit form\"></form>";
questionDiv.innerHTML = html + "<br>";
document.getElementById('questions').appendChild(questionDiv);
}
//code to change font size
function changeFont(selectTag) {
var listValue = selectTag.options[selectTag.selectedIndex].text;
document.getElementById("#" + choicesOpt).style.fontSize = listValue;
}
$("#" + choicesOpt).each(function () {
changeFont(selectTag);
});
</script>

Unknown error when calling Array.length

first of all i need to say that i don't have much experience with JS. currently i'm trying to implement an web application with MVC framework. I'm in a work to develop an app that is also compatible with Internet explorer. in that case i'm using following JS method to populate a table which is working fine with all the browsers....
function populateTable(array) {
document.getElementById("instalationTable").style.display = "block";
var table = document.getElementById("ActivityDescription_installationID");
table.innerHTML = "";
elementsInTable = array;
var x = 0;
for (i = 0; i < (array.length * 2) ; i++) {
//alert(i);
if ((i % 2) == 0) {
//ID Row
var row = table.insertRow(i);
var cell_1 = row.insertCell(0);
cell_1.innerHTML = "<input type='text' disable='' class='form-control' value=" + array[x] + ">";
x = x + 1;
var cell_2 = row.insertCell(1);
cell_2.innerHTML = "<span class='btn btn-default' onclick='showEditRow(this)'><img src='../../Content/images/1414409386_48-24.png' /></span>";
var cell_3 = row.insertCell(2);
cell_3.innerHTML = "<span class='btn btn-default' onclick='removeRow(this)'>X</apan>";
}
else {
//Detail Row
var rowDetails = table.insertRow(i);
var cell = rowDetails.insertCell(0);
//cell.colspan = "3";
cell.innerHTML = "<table style='background-color:rgb(98, 98, 98);color:black;border- radius: 5px;' margin:2%; >" +
"<tr>" +
"<td><input type='checkbox' id='"+x+"_appServer'/> Application Server</span></td>" +
"<td>" +
"<select id='" + x + "_appServerVersion'>" +
"<option>Application version</option>" +
"</select>" +
"</td>" +
"</tr>" +
"<tr>" +
"<td colspan='2'><input type='radio' name='database' id='"+x+"_emptyDb' onChange='enableOptions(1)'/>" +
" Empty Database</br><input type='radio' name='database' id='" + x + "_instalationSlt' onChange='enableOptions(2)'/> Something Databse</td>" +
"</tr>" +
"<tr id='emptyDB'>" +
"<td>" +
"Oracle Version"+
"<select id='JS_OraVersion' name='" + x + "_oraVersion' style='width:100%'>" +
"<option>Ora version</option>" +
"</select>" +
"</td>" +
"<td>" +
"Character Set" +
"<select id='JS_ChaSet' name='" + x + "_ChaSet' style='width:100%'>" +
"<option>Cha Set</option>" +
"</select>" +
"</td>" +
"</tr>" +
"<tr id='dbImport'>" +
"<td>" +
"Something version" +
"<select id='JS_ImportVersion' name='" + x + "_ImportVersion' style='width:100%'>" +
"<option>Something version</option>" +
"</select>" +
"</td>" +
"<td>" +
"Something Charachter" +
"<select id='JS_ImportChaSet' name='" + x + "_ImportChaSet' style='width:100%'>" +
"<option>Something Cha</option>" +
"</select>" +
"</td>" +
"</tr>" +
"<tr>" +
"<td colspan='2'>" +
"Additional Requests </br>" +
"<textarea rows='4' id='" + x + "_specialReq' cols='37'> </textarea>" +
"<td/>"+
"</tr>"+
"</table>";
rowDetails.style.display = 'none';
Lock();
}
}
document.getElementById("instalationTable").style.display = "block";
}
i'm populating a form on the above table row, that collects some data to continue. to collect data i'm using following function which works fine with Google chrome but not with Internet explorer..
function getAllData() {
var StringtoSent = "";
for (i = 0; i < (elementsInTable.length) ; i++) {
var InsId = elementsInTable[i];
var _appServer = document.getElementById((i + 1) + "_appServer").checked;
var _appServerVersionDropDown = document.getElementById((i + 1) + "_appServerVersion");
var _appServerVersion = _appServerVersionDropDown.options[_appServerVersionDropDown.selectedIndex].value;
var _emptyDb = document.getElementById((i + 1) + "_emptyDb").checked;
var _instalationSlt = document.getElementById((i + 1) + "_instalationSlt").checked;
var _oraVersionDropDown = document.getElementsByName((i + 1) + "_oraVersion")[0];
var _oraVersion = _oraVersionDropDown.options[_oraVersionDropDown.selectedIndex].value;
var _ChaSetDropDown = document.getElementsByName((i + 1) + "_ChaSet")[0];
var _ChaSet = _ChaSetDropDown.options[_ChaSetDropDown.selectedIndex].value;
var _ImportVersionDropDown = document.getElementsByName((i + 1) + "_ImportVersion")[0];
var _ImportVersion = _ImportVersionDropDown.options[_ImportVersionDropDown.selectedIndex].value;
var _ImportChaSetDropDown = document.getElementsByName((i + 1) + "_ImportChaSet")[0];
var _ImportChaSet = _ImportChaSetDropDown.options[_ImportChaSetDropDown.selectedIndex].value;
var _specialReq = document.getElementById((i + 1) + "_specialReq").value;
StringtoSent = StringtoSent + "," + InsId + "," + _appServer + "," + _appServerVersion + "," + _emptyDb + "," + _instalationSlt + "," + _oraVersion + "," + _ChaSet + "," + _ImportVersion + "," + _ImportChaSet + "," + _specialReq + "|";
//return StringtoSent;
document.getElementById("ActivityDescription_instalationDetails").value = StringtoSent;
}
}
following image shows the error that im getting when it is ruining on VS 2012s IIS Express.
for (i = 0; i < (elementsInTable.length) ; i++) {
is the place that indicates as the error place . it always highlight the "elementsInTable.length" code segment.
Actually this error message elaborate nothing. i found some articles about the same error but occurring when trying to change the inner HTML of an element. but those solutions are not compatible for this situation.. Please help me with the problem
thanks in advance

Finally i found the Error
cell.innerHTML = "<table style='background-color:rgb(98, 98, 98);color:black;border- radius: 5px;' margin:2%; >" +
in above line i mistakenly added a CSS attribute "margin:2%;" in to a wrong place. Google chrome is intelligence enough to manage the situation and proceed the activity but Internet Explorer is not. as i found, this is the fact that prompt same error in different situations.
EG:
http://www.webdeveloper.com/forum/showthread.php?22946-innerHTML-amp-IE-Unknown-Runtime-Error
http://www.webdeveloper.com/forum/showthread.php?22946-innerHTML-amp-IE-Unknown-Runtime-Error
So if you got any unknown error in your Java Script code which uses "element.InnerHTML" or "document.Write" its better to check whether your tags are properly closed.
and i found several other situations that is generating same error
IE shows run time error for innerHTML
InnerHTML issue in IE8 and below
most of the times you can avoid this error by following W3C tag recommendations (http://www.w3.org/TR/html401/struct/global.html).

Dynamic remove button is not working using jquery

Below is my code for displaying dynamic controls using jquery, and its working fine
<script type="text/javascript">
$(document).ready(function() {
$("input[value='Add']").click(function(e){
e.preventDefault();
var year = new Date().getFullYear(),
DDL_fromProfession = "<select name='ParametersFromSch' id='DDL_FromSchYear'>",
DDL_ToProfession = "<select name='ParametersToSch' id='DDL_ToSchYear'>";
for (var i = year; i >= 1950; --i) {
DDL_fromProfession += "<option text='" + i + "' value='" + i + "'>" + i + "</option>";
if (i != year) {
DDL_ToProfession += "<option text='" + i + "' value='" + i + "'>" + i + "</option>";
} else {
DDL_ToProfession += "<option text='Present' value='Present'>Present</option>";
}
}
DDL_fromProfession += "</select>";
DDL_ToProfession += "</select>";
var controls = "<tr><td>From "+ DDL_fromProfession + " To "+DDL_ToProfession+ "</td></tr>";
controls += "<br/><button type='button' class='btn_rmv'>Remove</button></td></tr>";
$('#Controls').append(controls);
return false;
});
$('#Controls').on('click', '.btn_rmv', function() {
var index = $(this).closest('tr').index() + 2
$('#Controls tr:nth-child(n+' + (index - 2) + ')').remove();
return false;
});
});
</script>
And below is my view page code where I add dynamic controls:
<tr>
<td align="center">
<table id="Controls"> </table>
<form method="post" action="" class="button_to">
<div>
<input value="Add" type="submit" />
</div>
</form>
</td>
</tr>
But i am using the remove button for removing dynamic controls and it's not working, Kindly suggest me where I make mistake.Thanks

Just remove the </td></tr> at the end of the line where you add the two dropdowns:
var controls = "<tr><td>From "+ DDL_fromProfession + " To "+DDL_ToProfession;
That was preventing the remove control from being added to the table.
Use only this line in the btn_rmvs click() function:
$(this).parent().parent().remove();
Fiddle

You were closing your row and then adding the remove button due to which the remove button was not appearing.
Please find the modified code below.
$(document).ready(function() {
$(document).ready(function() {
$("input[value='Add']").click(function(e)
{
e.preventDefault();
// var field = $("#field").val();
var year = new Date().getFullYear();
var DDL_fromProfession = "<select name='ParametersFromSch' id='DDL_FromSchYear'>";
for (var i = year; i >= 1950; --i) {
DDL_fromProfession += "<option text='" + i + "' value='" + i + "'>" + i + "</option>";
}
DDL_fromProfession += "</select>";
var DDL_ToProfession = "<select name='ParametersToSch' id='DDL_ToSchYear'>";
for (var j = year; j >= 1950; --j) {
if (j != year) {
DDL_ToProfession += "<option text='" + j + "' value='" + j + "'>" + j + "</option>";
}
else {
DDL_ToProfession += "<option text='Present' value='Present'>Present</option>";
}
}
DDL_ToProfession += "</select>";
var controls = "<tr><td>From "+ DDL_fromProfession + " To "+DDL_ToProfession+ "</td>";
controls += "<td><button type='button' class='btn_rmv'>Remove</button></td></tr>";
//$('#Controls').append(newRow);
$('#Controls').append(controls);
return false;
});
$('#Controls').on('click', '.btn_rmv', function() {
$(this).parent().parent().remove();
return false;
});
});
});
The code for remove is also modified, because the previous code removed all the fields instead of the current field alone.

How to validate whole html table values in jquery

I am appending table rows on the button click event. I need to avoid duplicate values. Is there a way to avoid duplicates?
my JQuery
$('#Add').click(function () {
var TName = $('#TournamentName').val();
var GName = $('#Gname').val();
var date = $('#Tdate').val();
var time = $('#Stime').val();
var Mtype = $('#Match').val();
var Ground = $('#Ground').val();
var ClubA = $('#TeamA').val();
var ClubB = $('#TeamB').val();
$('#TournamentName').attr('disabled', true);
var isDup = false;
$("#fixtab tbody").each(function (i, n) {
alert(i);
alert(n);
if (($("i").find("[name=TName]").val() == Tname) && ($("i").find("[name=date ]").val() == date) && ($("i").find("[name=time ]").val() == time) && ($("i").find("[name=ClubA ]").val() == ClubA) && ($("i").find("[name=ClubB ]").val() == ClubB) && ($("i").find("[name=Ground ]").val() == Ground)) {
alert("error");
isDup = true;
return false;
}
else {
$('#fixtab tbody').append("<tr><td><center>" + GName + "</center><input type='hidden' name='GName' value='" + GName + "' /></td><td>" + date + "<input type='hidden' name='date' value='" + date + "' /></td><td>" + time + "<input type='hidden' name='time' value='" + time + "' /></td><td>" + ClubA + "<input type='hidden' name='ClubA' value='" + ClubA + "' /></td><td>" + ClubB + "<input type='hidden' name='ClubB' value='" + ClubB + "' /></td><td>" + Ground + "<input type='hidden' name='Ground' value='" + Ground + "' /></td><td>" + Mtype + "<input type='hidden' name='Match' value='" + Mtype + "' /></td><td><input type='button' class='remove' value='remove'/><input type='hidden' name='TName' value='" + TName + "' /></td><tr>");
}
});
Like this I will append more than 10 records, so I need to avoid duplication from this records.

I dont see any easy way except :
$('#Add').click(function () {
var TName = $('#TournamentName').val();
var GName = $('#Gname').val();
var date = $('#Tdate').val();
var time = $('#Stime').val();
var Mtype = $('#Match').val();
var Ground = $('#Ground').val();
var ClubA = $('#TeamA').val();
var ClubB = $('#TeamB').val();
var isDup=false;
$("#fixtab tbody tr").each(function (i,n){
var _n=$(n);
if (_n.find("[name=TName]").val()==Tname) &&
_n.find("[name=date ]").val()==date ) &&
..
..)
{
isDup=true;
return false;
}
});

Javascript innerHTML not working in IE

I need to create a web application where the user drags and drops a task name, then the corresponding task name has to appear in a table.
When this happens a new row has to be added when the drop occurs.
I have used javascript for drag and drop and to add the new row.
My code works in chrome and firefox but not in IE. Why?
here is a sample of my code.
<script type = "text/javascript">
var trNumber = 1;
function addTimeSheetRow(){
var timeSheetBody = document.getElementById("timeSheetBody");
var trow = document.createElement("tr");
trow.innerHTML = "<th ondragstart='return false;' ondrop='return false;'></th>" +
"<th ondrop='drop(event)' ondragover='allowDrop(event)' value='' class='dropTexts'></th>" +
"<td><input name=" + getTrDayNames("Mon") + " type='text' value='' size='2'/></td>" +
"<td><input name=" + getTrDayNames("Tue") + " type='text' value='' size='2'/></td>" +
"<td><input name=" + getTrDayNames("Wed") + " type='text' value='' size='2'/></td>" +
"<td><input name=" + getTrDayNames("Thu") + " type='text' value='' size='2'/></td>" +
"<td><input name=" + getTrDayNames("Fri") + " type='text' value='' size='2'/></td>" +
"<td><input name=" + getTrDayNames("Sat") + " type='text' value='' size='2'/></td>" +
"<td><input name=" + getTrDayNames("Sun") + " type='text' value='' size='2'/></td>" +
"<td class='total'><input type='text' value='0' size='2' readonly='readonly'/></td>";
timeSheetBody.appendChild(trow);
$("tbody#timeSheetBody td input:not(.intial)").each(function() {
$(this).keyup(function(){
newSum.call(this);
colSum.call(this);
});
});
document.getElementsByName("trNumber")[0].value = trNumber;
}
function allowDrop(ev)
{
//ev.preventDefault();
ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
//var projectElement = ev.target.parentNode;
//ev.dataTransfer.setData("Text", projectElement.getAttribute("id"));
//alert(projectElement.getAttribute("id"));
}
function drop(ev)
{
//ev.preventDefault();
ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;
var data = ev.dataTransfer.getData("Text");
var taskName =document.getElementById(data).innerHTML;
//alert(taskName);
var trTaskName = "tr" + trNumber + "TaskName";
ev.target.innerHTML = taskName + "<input name=" + trTaskName + " type='hidden' value='" + taskName + "' size='2' class='intial'/>";
var projectName = document.getElementById(data).parentNode.getAttribute("id");
//alert(projectName);
var projectTextBox = ev.target.parentNode.children[0];
var trProjectName = "tr" + trNumber + "ProjectName";
projectTextBox.innerHTML = projectName + "<input name=" + trProjectName + " type='hidden' value='" + projectName + "' size='2' class='intial'/>";
trNumber = trNumber + 1;
addTimeSheetRow();
}

You can solve this by making a custom .innerHTML (yes it's a lot of work) or otherwise modifying the .innerHTML property/function. I made this code to make sure that still-referenced child element data is preserved when clearing the .innerHTML (another problem with IE's .innerHTML), but it can be adapted to solve the IE tables problem.
if (/(msie|trident)/i.test(navigator.userAgent)) {
var innerhtml_get = Object.getOwnPropertyDescriptor(HTMLElement.prototype, "innerHTML").get
var innerhtml_set = Object.getOwnPropertyDescriptor(HTMLElement.prototype, "innerHTML").set
Object.defineProperty(HTMLElement.prototype, "innerHTML", {
get: function () {return innerhtml_get.call (this)},
set: function(new_html) {
var childNodes = this.childNodes
for (var curlen = childNodes.length, i = curlen; i > 0; i--) {
this.removeChild (childNodes[0])
}
innerhtml_set.call (this, new_html)
}
})
}
var mydiv = document.createElement ('div')
mydiv.innerHTML = "test"
document.body.appendChild (mydiv)
document.body.innerHTML = ""
console.log (mydiv.innerHTML)
http://jsfiddle.net/DLLbc/9/
http://jsfiddle.net/DLLbc/12/

It's a known bug: You can set the innerHTML of tables only when you create the table in IE. But document.createElement and other dom manipulations should work fine. Alternatively you could use a js lib for compatibility.

FOR NORMAL JS:
A known and no so hard to do fix is to create all elements, not to create a string with all content and add it.
The same way you created the tr, create tds, etc.
In your case might not be so nice to do because of the large structure but...
FOR A BETTER WAY OF LIVING:
Use jQuery/prototype/mootools or whatever other lib you like.