Member_2_1242703
asked on
Referencing controls in an ASP.NET Repeater using JavaScript
I'm currently using the following code to populate a textbox with values from other text boxes
My textboxes are now all in a repeater nested in a GridView like so:
Obviously my script is no longer picking up. How do I change this so that I can find the controls in the repeater?
<html>
<head>
<script>
function populate_it(){
var d = document;
d.getElementById("tbResult").value = d.getElementById("tbEntry1").value+"-"+d.getElementById("tbEntry2").value;
}
</script>
</head>
<body>
tbEntry1: <input type="text" name="tbEntry1" id="tbEntry1" oninput="populate_it()"><br/>
tbEntry2: <input type="text" name="tbEntry2" id="tbEntry2" oninput="populate_it()"><br/>
tbResult: <input type="text" name="tbResult" id="tbResult">
</body>
</html>
My textboxes are now all in a repeater nested in a GridView like so:
<asp:GridView ID="GridView1" runat="server" >
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
tbEntry1: <input type="text" name="tbEntry1" id="tbEntry1" oninput="populate_it()"><br/>
tbEntry2: <input type="text" name="tbEntry2" id="tbEntry2" oninput="populate_it()"><br/>
tbResult: <input type="text" name="tbResult" id="tbResult">
</ItemTemplate>
<asp:Repeater>
</asp:GridView>
Obviously my script is no longer picking up. How do I change this so that I can find the controls in the repeater?
You wont be able to pick up the controls because Ids in the DOM must be unique. Better define a class in the inputs and select them by Document.getElementsByClas sName() (https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByClassName) and give your inputs unique ids so you will know what you have selected.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Second option doesnt work. In my repeater class on databound, I've added:
What would be the proper script method now?
Dim GI As TextBox = f.Item.FindControl("tbEntry1")
Dim SN As TextBox = f.Item.FindControl("tbSEntry2")
GI.Attributes.Add("oninput", "populate_it('" & GI.ClientID & "')")
SN.Attributes.Add("oninput", "populate_it('" & SN.ClientID & "')")
What would be the proper script method now?
ASKER
nevermind, that wont work either, huh?
GI.Attributes.Add("class", "tbEntry1");
GI.Attributes.Add("oninput", "populate_it(this)")
SN.Attributes.Add("class", "tbEntry2");
SN.Attributes.Add("oninput", "populate_it(this)")
and make the changes I showed you in the previous comment.P.S.
You don't even have to do it in codebehind just change the html in the repeater. as I showed you.
here is a fiddle with the second option.
http://jsfiddle.net/qlayer /mjvuL26z/
http://jsfiddle.net/qlayer
ASKER
HTML side:
CodeBehind:
When I ViewSource:
What am I doing wrong??
<script type="text/javascript">
window.populate_it = function populate_it(el) {
//traverse up to the div
var d = el.parentElement;
// select childs
d.getElementsByClassName("tbResult")[0].value = d.getElementsByClassName("tbEntry1")[0].value + "-" + d.getElementsByClassName("tbEntry2")[0].value;
}
</script>
<asp:Repeater ID="Repeater1" runat="server" OnItemDataBound="OnRepeaterDataBound">
<ItemTemplate>
<div class="entry">
<asp:TextBox ID="tbEntry1" runat="server" class="tbEntry1" name="tbEntry1" oninput="populate_it(this)"></asp:TextBox><br />
<asp:TextBox ID="tbEntry2" runat="server" class="tbEntry2" name="tbEntry2" oninput="populate_it(this)"></asp:TextBox><br />
<asp:TextBox ID="tbResult" runat="server" class="tbResult" name="tbResult"></asp:TextBox><br />
</div>
</ItemTemplate>
</asp:Repeater>
CodeBehind:
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not Page.IsPostBack Then
BindData()
End If
End Sub
Sub BindData()
Dim ds As New Data.DataSet
Dim da As New Data.SqlClient.SqlDataAdapter("SELECT * FROM tblWorkOrders WHERE ProjectID = '1'", connn)
da.Fill(ds, "employees")
Repeater1.DataSource = ds.Tables("employees")
Repeater1.DataBind()
End Sub
Protected Sub OnRepeaterDataBound(s As Object, f As RepeaterItemEventArgs)
If f.Item.ItemType = ListItemType.AlternatingItem Or f.Item.ItemType = ListItemType.Item Then
Dim GI As TextBox = f.Item.FindControl("tbEntry1")
Dim SN As TextBox = f.Item.FindControl("tbEntry2")
GI.Attributes.Add("oninput", "populate_it('" & GI.ClientID & "')")
SN.Attributes.Add("oninput", "populate_it('" & SN.ClientID & "')")
End If
End Sub
When I ViewSource:
<div class="entry">
<input name="Repeater1$ctl00$tbEntry1" type="text" id="Repeater1_ctl00_tbEntry1" class="tbEntry1" name="tbEntry1" oninput="populate_it('Repeater1_ctl00_tbEntry1')" /><br />
<input name="Repeater1$ctl00$tbEntry2" type="text" id="Repeater1_ctl00_tbEntry2" class="tbEntry2" name="tbEntry2" oninput="populate_it('Repeater1_ctl00_tbEntry2')" /><br />
<input name="Repeater1$ctl00$tbResult" type="text" id="Repeater1_ctl00_tbResult" class="tbResult" name="tbResult" /><br />
</div>
What am I doing wrong??
This has to be removed:
GI.Attributes.Add("oninput", "populate_it('" & GI.ClientID & "')")
SN.Attributes.Add("oninput", "populate_it('" & SN.ClientID & "')")
or changed to this:GI.Attributes.Add("oninput", "populate_it(this)")
SN.Attributes.Add("oninput", "populate_it(this)")
ASKER
I actually did like you said and just removed the code behind. Here's my code now:
HTML:
code behind:
ViewSource:
Still no luck
HTML:
<head runat="server">
<title></title>
<script type="text/javascript">
window.populate_it = function populate_it(el) {
//traverse up to the div
var d = el.parentElement;
// select childs
d.getElementsByClassName("tbResult")[0].value = d.getElementsByClassName("tbEntry1")[0].value + "-" + d.getElementsByClassName("tbEntry2")[0].value;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<div class="entry">
<asp:TextBox ID="tbEntry1" runat="server" class="tbEntry1" name="tbEntry1" oninput="populate_it(this)"></asp:TextBox><br />
<asp:TextBox ID="tbEntry2" runat="server" class="tbEntry2" name="tbEntry2" oninput="populate_it(this)"></asp:TextBox><br />
<asp:TextBox ID="tbResult" runat="server" class="tbResult" name="tbResult"></asp:TextBox><br />
</div>
</ItemTemplate>
</asp:Repeater>
</form>
</body>
</html>
code behind:
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not Page.IsPostBack Then
BindData()
End If
End Sub
Sub BindData()
Dim ds As New Data.DataSet
Dim da As New Data.SqlClient.SqlDataAdapter("SELECT * FROM tblWorkOrders WHERE ProjectID = '1'", connn)
da.Fill(ds, "employees")
Repeater1.DataSource = ds.Tables("employees")
Repeater1.DataBind()
End Sub
ViewSource:
<div class="entry">
<input name="Repeater1$ctl00$tbEntry1" type="text" id="Repeater1_ctl00_tbEntry1" class="tbEntry1" name="tbEntry1" oninput="populate_it(this)" /><br />
<input name="Repeater1$ctl00$tbEntry2" type="text" id="Repeater1_ctl00_tbEntry2" class="tbEntry2" name="tbEntry2" oninput="populate_it(this)" /><br />
<input name="Repeater1$ctl00$tbResult" type="text" id="Repeater1_ctl00_tbResult" class="tbResult" name="tbResult" /><br />
</div>
<div class="entry">
<input name="Repeater1$ctl01$tbEntry1" type="text" id="Repeater1_ctl01_tbEntry1" class="tbEntry1" name="tbEntry1" oninput="populate_it(this)" /><br />
<input name="Repeater1$ctl01$tbEntry2" type="text" id="Repeater1_ctl01_tbEntry2" class="tbEntry2" name="tbEntry2" oninput="populate_it(this)" /><br />
<input name="Repeater1$ctl01$tbResult" type="text" id="Repeater1_ctl01_tbResult" class="tbResult" name="tbResult" /><br />
</div>
Still no luck
what browser are you trying this (because getElementsByClassName wont work on ie8) ?
I am trying your code in fiddle and it works. (see http://jsfiddle.net/qlayer/mjvuL26z/1/)
I am trying your code in fiddle and it works. (see http://jsfiddle.net/qlayer/mjvuL26z/1/)
ASKER
Awww man...that was it. IE8 is the default browser for my IDE. Just tried it in Chrome and it worked fine. Sorry about that! Thanks so much for sticking with me.
ASKER
FYI..
This isn't working if I put the controls in a table inside the DIV unless they are all in the same TD
Question here:
https://www.experts-exchange.com/questions/28552285/JavaScript-GetElementsByClassName-inside-nested-table-or-nested-DIV-not-working.html
This isn't working if I put the controls in a table inside the DIV unless they are all in the same TD
Question here:
https://www.experts-exchange.com/questions/28552285/JavaScript-GetElementsByClassName-inside-nested-table-or-nested-DIV-not-working.html
ASKER