Member_2_1242703
asked on
JavaScript GetElementsByClassName inside nested table or nested DIV not working
I'm using the following code to populate a text box inside an APS.NET repeater using text on user input from other textboxes in the same repeater
This works fine. However, when I add the textboxes to a nested div or table, it no longer works
i.e.
Why is that? How can I make this work?
<script type="text/javascript">
window.populate_it = function populate_it(el) {
//traverse up to the div
var d = el.parentElement;
// select childs
d.getElementsByClassName("tbPartNumber")[0].value = d.getElementsByClassName("tbGraphicID")[0].value + "-" + d.getElementsByClassName("tbSpecNumber")[0].value + d.getElementsByClassName("tbElementID")[0].value;
}
</script>
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<div class="entry">
<table>
<tr>
<td>
<asp:TextBox ID="tbElementID" runat="server" class="tbElementID" name="tbElementID" oninput="populate_it(this)"></asp:TextBox><br />
<asp:TextBox ID="tbGraphicID" runat="server" class="tbGraphicID" name="tbGraphicID" oninput="populate_it(this)"></asp:TextBox><br />
<asp:TextBox ID="tbSpecNumber" runat="server" class="tbSpecNumber" name="tbSpecNumber" oninput="populate_it(this)"></asp:TextBox><br />
<asp:TextBox ID="tbPartNumber" runat="server" class="tbPartNumber" name="tbPartNumber"></asp:TextBox><br />
</td>
</tr>
</table>
</div>
</ItemTemplate>
</asp:Repeater>
This works fine. However, when I add the textboxes to a nested div or table, it no longer works
i.e.
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<div class="entry">
<table>
<tr>
<td>
<table>
<tr>
<td><asp:TextBox ID="tbElementID" runat="server" class="tbElementID" name="tbElementID" oninput="populate_it(this)"></asp:TextBox></td>
<tr><td>
<asp:TextBox ID="tbGraphicID" runat="server" class="tbGraphicID" name="tbGraphicID" oninput="populate_it(this)"></asp:TextBox></td>
<tr><td>
<asp:TextBox ID="tbSpecNumber" runat="server" class="tbSpecNumber" name="tbSpecNumber" oninput="populate_it(this)"></asp:TextBox></td>
<tr><td>
<asp:TextBox ID="tbPartNumber" runat="server" class="tbPartNumber" name="tbPartNumber"></asp:TextBox></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</ItemTemplate>
</asp:Repeater>
Why is that? How can I make this work?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
I fixed the javascript a little:
This will work as long as you wrap your every entry (asp repeater item) in a parent element with class name 'entry'
function closest(el, className) {
do {
el = el.parentNode;
if (el.className !== undefined && el.className.indexOf(className) > -1) {
// class name is found! let's return it. :)
return el;
}
} while (el.className !== undefined);
// not found :(
return null;
}
window.populate_it = function populate_it(el) {
//traverse up to the div
var d = closest(el.parentElement, 'entry');
// select childs
d.getElementsByClassName("tbPartNumber")[0].value = d.getElementsByClassName("tbGraphicID")[0].value + "-" + d.getElementsByClassName("tbSpecNumber")[0].value + d.getElementsByClassName("tbElementID")[0].value;
}
This will work as long as you wrap your every entry (asp repeater item) in a parent element with class name 'entry'
ASKER
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function closest(el, className) {
do {
el = el.parentNode;
if (el.className !== undefined && el.className.indexOf(className) > -1) {
// class name is found! let's return it. :)
return el;
}
} while (el.className !== undefined);
// not found :(
return null;
}
window.populate_it = function populate_it(el) {
//traverse up to the div
var d = closest(el.parentElement, 'entry');
// select childs
d.getElementsByClassName("tbPartNumber")[0].value = d.getElementsByClassName("tbGraphicID")[0].value + "-" + d.getElementsByClassName("tbSpecNumber")[0].value + d.getElementsByClassName("tbElementID")[0].value;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<div class="entry">
<table>
<tr>
<td>
<asp:TextBox ID="tbElementID" runat="server" Wrap="False" Width="178px"
Font-Names="Verdana" ForeColor="#666666" BackColor="#FFFFFF"
BorderColor="#999999" class="tbElementID" name="tbElementID" BorderWidth="1px" oninput="populate_it(this)"></asp:TextBox>
</td>
</tr>
<tr>
<td>
GID: <asp:TextBox ID="tbGraphicID" runat="server" Wrap="False" Width="176" Font-Names="Verdana" ForeColor="#666666" class="tbGraphicID" name="tbGraphicID" oninput="populate_it(this)"></asp:TextBox>
</td>
</tr>
<tr>
<td>
SNL <asp:TextBox ID="tbSpecNumber" runat="server" Wrap="False" Width="176" Font-Names="Verdana" ForeColor="#666666" class="tbSpecNumber" name="tbSpecNumber" oninput="populate_it(this)"></asp:TextBox>
</td>
</tr>
<tr>
<td>
PN:<asp:TextBox ID="tbPartNumber" runat="server" Wrap="False" Width="176" Font-Names="Verdana" ForeColor="#666666" BackColor="#FFFFFF"
class="tbPartnumber" name="tbPartnumber" BorderColor="#999999" BorderWidth="1px"></asp:TextBox>
</td>
</tr>
</table>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
</form>
</body>
</html>
The above code looks like this during runtime...
<div class="entry">
<table>
<tr>
<td>
<input name="Repeater1$ctl00$tbElementID" type="text" id="Repeater1_ctl00_tbElementID" class="tbElementID" name="tbElementID" oninput="populate_it(this)" style="color:#666666;background-color:White;border-color:#999999;border-width:1px;border-style:solid;font-family:Verdana;width:178px;" />
</td>
</tr>
<tr>
<td>
GID: <input name="Repeater1$ctl00$tbGraphicID" type="text" id="Repeater1_ctl00_tbGraphicID" class="tbGraphicID" name="tbGraphicID" oninput="populate_it(this)" style="color:#666666;font-family:Verdana;width:176px;" />
</td>
</tr>
<tr>
<td>
SNL <input name="Repeater1$ctl00$tbSpecNumber" type="text" id="Repeater1_ctl00_tbSpecNumber" class="tbSpecNumber" name="tbSpecNumber" oninput="populate_it(this)" style="color:#666666;font-family:Verdana;width:176px;" />
</td>
</tr>
<tr>
<td>
PN:<input name="Repeater1$ctl00$tbPartNumber" type="text" id="Repeater1_ctl00_tbPartNumber" class="tbPartnumber" name="tbPartnumber" style="color:#666666;background-color:White;border-color:#999999;border-width:1px;border-style:solid;font-family:Verdana;width:176px;" />
</td>
</tr>
</table>
</div>
<div class="entry">
<table>
<tr>
<td>
<input name="Repeater1$ctl01$tbElementID" type="text" id="Repeater1_ctl01_tbElementID" class="tbElementID" name="tbElementID" oninput="populate_it(this)" style="color:#666666;background-color:White;border-color:#999999;border-width:1px;border-style:solid;font-family:Verdana;width:178px;" />
</td>
</tr>
<tr>
<td>
GID: <input name="Repeater1$ctl01$tbGraphicID" type="text" id="Repeater1_ctl01_tbGraphicID" class="tbGraphicID" name="tbGraphicID" oninput="populate_it(this)" style="color:#666666;font-family:Verdana;width:176px;" />
</td>
</tr>
<tr>
<td>
SNL <input name="Repeater1$ctl01$tbSpecNumber" type="text" id="Repeater1_ctl01_tbSpecNumber" class="tbSpecNumber" name="tbSpecNumber" oninput="populate_it(this)" style="color:#666666;font-family:Verdana;width:176px;" />
</td>
</tr>
<tr>
<td>
PN:<input name="Repeater1$ctl01$tbPartNumber" type="text" id="Repeater1_ctl01_tbPartNumber" class="tbPartnumber" name="tbPartnumber" style="color:#666666;background-color:White;border-color:#999999;border-width:1px;border-style:solid;font-family:Verdana;width:176px;" />
</td>
</tr>
</table>
</div>
<div class="entry">
<table>
<tr>
<td>
<input name="Repeater1$ctl02$tbElementID" type="text" id="Repeater1_ctl02_tbElementID" class="tbElementID" name="tbElementID" oninput="populate_it(this)" style="color:#666666;background-color:White;border-color:#999999;border-width:1px;border-style:solid;font-family:Verdana;width:178px;" />
</td>
</tr>
<tr>
<td>
GID: <input name="Repeater1$ctl02$tbGraphicID" type="text" id="Repeater1_ctl02_tbGraphicID" class="tbGraphicID" name="tbGraphicID" oninput="populate_it(this)" style="color:#666666;font-family:Verdana;width:176px;" />
</td>
</tr>
<tr>
<td>
SNL <input name="Repeater1$ctl02$tbSpecNumber" type="text" id="Repeater1_ctl02_tbSpecNumber" class="tbSpecNumber" name="tbSpecNumber" oninput="populate_it(this)" style="color:#666666;font-family:Verdana;width:176px;" />
</td>
</tr>
<tr>
<td>
PN:<input name="Repeater1$ctl02$tbPartNumber" type="text" id="Repeater1_ctl02_tbPartNumber" class="tbPartnumber" name="tbPartnumber" style="color:#666666;background-color:White;border-color:#999999;border-width:1px;border-style:solid;font-family:Verdana;width:176px;" />
</td>
</tr>
</table>
</div>
I think that's what you're saying right? This does not work.
your class names must be exactly equal to those in javascript:
d.getElementsByClassName(" tbPartNumb er")!== tbPartnumber;
It is case sensitive it is not like Visual basic
<asp:TextBox ID="tbPartNumber" runat="server" Wrap="False" Width="176" Font-Names="Verdana" ForeColor="#666666" BackColor="#FFFFFF"
class="tbPartnumber" name="tbPartnumber" BorderColor="#999999" BorderWidth="1px"></asp:TextBox>
d.getElementsByClassName("tbPartNumber")
d.getElementsByClassName("
It is case sensitive it is not like Visual basic
ASKER
Gotcha. Bad habits...
Anything stick out to you here? Still not working...
Anything stick out to you here? Still not working...
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function closest(el, className) {
do {
el = el.parentNode;
if (el.className !== undefined && el.className.indexOf(className) > -1) {
// class name is found! let's return it. :)
return el;
}
} while (el.className !== undefined);
// not found :(
return null;
}
window.populate_it = function populate_it(el) {
//traverse up to the div
var d = closest(el.parentElement, 'entry');
// select childs
d.getElementsByClassName("tbPartNumber")[0].value = d.getElementsByClassName("tbGraphicID")[0].value + "-" + d.getElementsByClassName("tbSpecNumber")[0].value + d.getElementsByClassName("tbElementID")[0].value;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<div class="entry">
<table>
<tr>
<td>
EID: <asp:TextBox ID="tbElementID" runat="server" class="tbElementID" name="tbElementID" oninput="populate_it(this)"></asp:TextBox>
</td>
</tr>
<tr>
<td>
GID: <asp:TextBox ID="tbGraphicID" runat="server" class="tbGraphicID" name="tbGraphicID" oninput="populate_it(this)"></asp:TextBox>
</td>
</tr>
<tr>
<td>
SNL <asp:TextBox ID="tbSpecNumber" runat="server" class="tbSpecNumber" name="tbSpecNumber" oninput="populate_it(this)"></asp:TextBox>
</td>
</tr>
<tr>
<td>
PN:<asp:TextBox ID="tbPartNumber" runat="server" class="tbPartNumber" name="tbPartNumber"></asp:TextBox>
</td>
</tr>
</table>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
</form>
</body>
</html>
I cant see the problem can you share codebehind andare your running this in ie8 ?
Here is a version of populate_it function that should work on ie8 :
P.S. You still need closest function.
window.populate_it = function populate_it(el) {
//traverse up to the div
var d = closest(el.parentElement, 'entry');
console.log(d.getElementsByClassName("tbPartNumber").length);
// select childs
d.querySelectorAll(".tbPartNumber")[0].value = d.querySelectorAll(".tbGraphicID")[0].value + "-" + d.querySelectorAll(".tbSpecNumber")[0].value + d.querySelectorAll(".tbElementID")[0].value;
}
P.S. You still need closest function.
ASKER
Got it. thanks again!
ASKER
var d = el.parentElement;
by :
var d = el.parentElement.parentEle