I am adding html on my page on click of a button.So when i adding the html i want to remove all the disabled property from the html variable so that the new html don't have any disabled inputs :
Code:
var current_td = $(thisobj).closest('tr').html();
var next_td = $(thisobj).closest('tr').siblings('tr.add').html();
var added1 = '<tr class="class2">'+current_td+'</tr>';
var added2 = '<tr class="class1">'+next_td+'</tr>';
var main_html = added1 + added2;
main_html = main_html.replace("Add[+]" ,"Remove [-]");
$('#create_table').append("<tbody id=TBody"+Count+">"+main_html+"</tbody>");
masterCodeCount++;
return "TBody"+(Count-1);
From main_html variable i want to remove the disabled property of the inputs types.Because from where i am getting the html the inputs type are disabled
You can do
var current_td = $(thisobj).closest('tr').html();
var next_td = $(thisobj).closest('tr').siblings('tr.add').html();
var added1 = '<tr class="class2">' + current_td + '</tr>';
var added2 = '<tr class="class1">' + next_td + '</tr>';
var main_html = added1 + added2;
main_html = main_html.replace("Add[+]", "Remove [-]");
var $main = $(main_html);
//remove the disabled attribute
$main.find(':disabled').removeAttr('disabled');
$("<tbody id=TBody" + Count + "></tbody>").append($main).appendTo('#create_table');
masterCodeCount++;
return "TBody" + (Count - 1);
Related
I am trying to dynamically add accordion elements to my DOM and I cannot seem to add it correctly so that the new element will have it's ID in place, class in place etc...
Here is my code:
function addAccordion(esr){
var elementID = document.getElementById("ThreatMainDiv_" + esr.marking);
var emittersDiv = document.getElementById("Emitters");
if(elementID != null){
return;
}
var marking = esr.marking;
var tmp;
tmp = "\"" + "ThreatMainDiv_" + marking + "\"";
var topDiv = '<div id='+ tmp + ' class="accordionTitle"><h1 style="font-size: 16px"></h1></div>';
var tDiv = document.createElement('div');
tDiv.innerHTML = topDiv;
$('#Emitters').append(tDiv);
};
How can I add it correctly?
Change
$('.accordionTitle').click(function(){});
with
$(document).on('click','.accordionTitle',function(){});
I added a select to a column of table cells with an ID. Using console.log I can see the select with the ID I gave it but when I try to set the value of the box using the ID I get a NULL reference error. What would the correct reference be for the box? Thanks.
JavaScript
function GetProc_Responce(r, responce) {
var table = "<tr><th>Emp</th><th>RA</th><th>PI</th><th>First Name</th><th>Last Name</th><th>Is A</th><th>Date Created</th><th>Date Modified</th></tr>";
strXml = new XMLSerializer().serializeToString(responce);
//console.log("returnString: " + strXml);
var oParser = new DOMParser();
oDOM = oParser.parseFromString(strXml, "text/xml");
//console.log(oDOM.getElementsByTagName("EmployeeID").length);
var l = oDOM.getElementsByTagName("EmployeeID").length;
for (i = 0; i <= l - 1; i++) {
a = oDOM.getElementsByTagName("Emp")[i];
_Emp = a.childNodes[0].nodeValue;
b = oDOM.getElementsByTagName("RA")[i];
_RA = b.childNodes[0].nodeValue;
c = oDOM.getElementsByTagName("PI")[i];
_PI = c.childNodes[0].nodeValue;
d = oDOM.getElementsByTagName("FirstName")[i];
_FirstName = d.childNodes[0].nodeValue;
e = oDOM.getElementsByTagName("LastName")[i];
_LastName = e.childNodes[0].nodeValue;
f = oDOM.getElementsByTagName("IsA")[i];
_IsA = f.childNodes[0].nodeValue;
g = oDOM.getElementsByTagName("DateCreated")[i];
_DateCreated = g.childNodes[0].nodeValue;
h = oDOM.getElementsByTagName("DateModified")[i];
_DateModified = h.childNodes[0].nodeValue;
table += "<tr><td>" +
a.childNodes[0].nodeValue + "</td><td>" +
b.childNodes[0].nodeValue + "</td><td>" +
c.childNodes[0].nodeValue + "</td><td>" +
d.childNodes[0].nodeValue + "</td><td>" +
e.childNodes[0].nodeValue + "</td><td>" +
//f.childNodes[0].nodeValue + "</td><td>" +
"<select id=\"s1\"><option value=\"0\">0</option><option value=\"1\">1</option></select>" + "</td><td>" +
g.childNodes[0].nodeValue + "</td><td>" +
h.childNodes[0].nodeValue + "</td></tr>";
document.getElementById('Proc').rows.item(3).cells(5).value = 1;
//OR
document.getElementById('s1').selectedValue = 1;
//NEITHER ONE WORKS
}
document.getElementById("Proc").innerHTML = table;
console.log(document.getElementById('Proc').rows(3).cells(5));
}
HTML
<div><center>
<table id="Proc"></table>
</center></div>
You must assign unique id values. Your code assigns all of them the id value s1 which is invalid in HTML.
Change your code as follows to assign s0, s1, s2 ... etc. For clarity I don't repeat the code that is not concerned:
for (i = 0; i <= l - 1; i++)
{
// ...
table += "<tr><td>" +
// ...
e.childNodes[0].nodeValue + "</td><td>" +
"<select id=\"s" + i + "\"><option value=\"0\">0</option><option value=\"1\">1</option></select>" + "</td><td>" +
// ...
}
You can access one of the select elements by its id with getElementById:
var element = document.getElementById('s' + i);
Where i is a number from 0 to the last one assigned in the loop.
You can get or set the value of a select element via its value attribute. For example, to set its value to 1, do:
document.getElementById('s' + i).value = '1';
Here we'll get div object
var div = document.getElementById('test');
Here we'll get table object
var table = div.getElementsByTagName('table')[0];
Here we'll add new select to td
table.rows[0].cells[0].innerHTML += '<select id="s2"></select>';
Search existed select (with id="s1")
var select_1 = table.rows[0].cells[0].getElementsByTagName('select')[0];
console.log(select_1);
Search all selects in td
var select_array = table.rows[0].cells[0].getElementsByTagName('select');
console.log(select_array);
https://jsfiddle.net/e59dzhsy/
document.getElementById('Proc').rows.item(3).cells(5) references a td, which does not have a value.
document.getElementById('s1') references the select box
you want document.getElementById('Proc').rows.item(3).cells(5).children[0] to reference the select
A better method would be to use some of the built in tag finding functions such as document.getElementById('Proc').rows[3].getElementsByTagName('select')[0]. Then you don't have to deal with what column the select is in. Of course, if you have more than one select on the row, then you'll need to do something different. At that point, I'd suggest adding class names to your selects so you can use document.getElementById('Proc').rows[3].getElementsByClassName('select1')[0]
I am trying to rebuild an old application without the loss of data. The current data has all been stored in xml files that i am trying to read using Javascript.
This is the Javascript (i'm new to this, feedback is appreciated):
// Create a connection to the file.
var Connect = new XMLHttpRequest();
// Define which file to open and
// send the request.
Connect.open("GET", "writers.xml", false);
Connect.setRequestHeader("Content-Type", "text/xml");
Connect.send(null);
// Place the response in an XML document.
var TheDocument = Connect.responseXML;
// Place the root node in an element.
var Customers = TheDocument.childNodes[0];
// Retrieve each customer in turn.
for (var i = 0; i < Customers.children.length; i++){
var Customer = Customers.children[i];
//Create div's for data
document.getElementById("body").innerHTML += "<div id='who" + i + "'></div>"
document.getElementById("body").innerHTML += "<div id='age" + i + "'></div>"
document.getElementById("body").innerHTML += "<div id='hobby" + i + "'></div>"
document.getElementById("body").innerHTML += "<div id='image" + i + "'></div>"
document.getElementById("body").innerHTML += "<div id='something" + i + "'></div>"
//Assign data to correct divs
var who = Customer.getElementsByTagName("name");
var who2 = who[0].textContent.toString();
document.getElementById("who"+i).innerHTML += who2;
var age = Customer.getElementsByTagName("age");
var age2 = age[0].textContent.toString();
document.getElementById("age"+i).innerHTML += age2;
var hobby = Customer.getElementsByTagName("hobby");
var hobby2 = hobby[0].textContent.toString();
document.getElementById("hobby"+i).innerHTML += hobby2;
var image = Customer.getElementsByTagName("image");
var image2 = image[0].textContent.toString();
document.getElementById("image"+i).innerHTML += image2;
var something = Customer.getElementsByTagName("something");
var something2 = something[0].textContent.toString();
document.getElementById("something"+i).innerHTML += something2;
}
This is an example of my xml file:
<doc>
<person>
<name>Paul</name>
<age>21</age>
<hobby>blabla</hobby>
<image>thisisanimage.jpg</image>
<something>Random string</something>
</person>
<person>
<name>Peter</name>
<age></age>
<hobby>blabla</hobby>
<image>thisisanimage.jpg</image>
<something>Random string</something>
</person>
</doc>
Now i am trying to filter Peter out, because the age field is empty. Anyone got an idea?
The easiest way is to add a condition in the loop, to test if the age is blank. If the age value is blank then the if block will not be entered, and the next iteration of the loop will start.
for (var i = 0; i < Customers.children.length; i++) {
var Customer = Customers.children[i];
var age = Customer.getElementsByTagName("age");
var age2 = age[0].textContent.toString();
if (age2 != '') { // only do the below code if age2 is not blank
//Create div's for data
document.getElementById("body").innerHTML += "<div id='who" + i + "'></div>"
document.getElementById("body").innerHTML += "<div id='age" + i + "'></div>"
document.getElementById("body").innerHTML += "<div id='hobby" + i + "'></div>"
document.getElementById("body").innerHTML += "<div id='image" + i + "'></div>"
document.getElementById("body").innerHTML += "<div id='something" + i + "'></div>"
document.getElementById("age" + i).innerHTML += age2;
//Assign data to correct divs
var who = Customer.getElementsByTagName("name");
var who2 = who[0].textContent.toString();
document.getElementById("who" + i).innerHTML += who2;
var hobby = Customer.getElementsByTagName("hobby");
var hobby2 = hobby[0].textContent.toString();
document.getElementById("hobby" + i).innerHTML += hobby2;
var image = Customer.getElementsByTagName("image");
var image2 = image[0].textContent.toString();
document.getElementById("image" + i).innerHTML += image2;
var something = Customer.getElementsByTagName("something");
var something2 = something[0].textContent.toString();
document.getElementById("something" + i).innerHTML += something2;
}
}
I've got a piece of code that duplicates a <table> but in the process changes id's. It took hours but I eventually got this to happen with:
var lookFor = 'url' + parseInt(uploadCount);
++uploadCount; //used to create a unique id
var replaceWith = 'url'+parseInt(uploadCount);
var regex = new RegExp(lookFor, 'g');
var tableHTML = '<table class="user-url-table" style="opacity:0;" id="url' + uploadCount + '">' + $('table.user-url-table').first().html().replace(regex, replaceWith) + '</table>';
$(tableHTML).insertAfter($('table.user-url-table').last());
However, the following doesn't work:
var lookFor = 'url' + parseInt(uploadCount);
var tableHTML = '<table class="user-url-table" style="opacity:0;" id="url' + uploadCount + '">' + $('table.user-url-table').first().html() + '</table>';
++uploadCount;
var replaceWith = 'url'+parseInt(uploadCount);
var regex = new RegExp(lookFor, 'g');
tableHTML = $('table.user-url-table').first().html().replace(regex, replaceWith);
But shouldn't they do exactly the same job....? The first piece of code surely just does everything in one line, whereas the second forms the <table> and then changes all instances of the id in it.
There are two errors on the second code. First, when you do tableHTML = $('table.user-url-table').first().html().replace(regex, replaceWith); on the last line, you throw away the preparation you did. You override the value of tableHTML.
The second error is that the result is not appended to the document, like you did with insertAfter in the first code.
To make if work, replace the last line with $('table.user-url-table').after(tableHTML.replace(regex, replaceWith));. This will insert tableHTML with the replaced id's after the first table.
Another way, much simpler, of doing the same thing is this:
var firstTable = $("#url1 tbody").html();
var result = "";
for (i = 2; i < 10; i++) {
result += '<table class="user-url-table" style="opacity:0.2;" id="url'
+ i + '">' + firstTable.replace("url1", "url" + i) + '</table>';
}
$("#url1").after(result);
Fiddle: http://jsfiddle.net/bortao/ydEPr/
I want to know how I change all the pre tags inside a document...
I'm using this:
var preContent = document.getElementById('code').innerHTML;
but this only changes the content of 1 pre tag... the one with the ID 'code'.
If you can show me how i can change all the pre tags using JavaScript I appreciate
Here's all the code:
window.onload = function () {
var preContent = document.getElementById('code').innerHTML;
var codeLine = new Array();
var newContent = '<table width="100%" border="1" '
+ 'cellpadding="0" cellspacing="0" >';
codeLine = preContent.split('\n');
for (var i = 0; i < codeLine.length; i++) {
newContent = newContent + '<tr><td class="codeTab1" >'
+ i.toString() + '</td><td class="codeTab2">'
+ codeLine[i] + '</td></tr>';
}
newContent = newContent + '</table>';
document.getElementById('code').innerHTML = newContent;
}
PS: This is to make a look like a normal compiler with numbers before the line
PPS: Each pre tag will have a different content and I want the same script to change it (if possible).
You can use getElementsByTagName:
var preElements = document.getElementsByTagName('pre');
for(var i = 0; i < preElements.length; ++ i)
{
var element = preElements[i];
/* modify element.innerHTML here */
}
First problem in you code . No two elements in a document can have same id .
So you can change it easily with jquery . look at the code .
$('pre').html("what ever text you want to show ");
Or with javascript you can do like this :
var x = document.getElementsByTagName('pre');
for(var i = 0; i < x.length; ++ i)
{
x.innerHTML = "what ever text you want to show";
}