Solved

Referencing controls in an ASP.NET Repeater using JavaScript

Posted on 2014-11-05
13
190 Views
Last Modified: 2014-11-12
I'm currently using the following code to populate a textbox with values from other text boxes

<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>

Open in new window


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>

Open in new window


Obviously my script is no longer picking up. How do I change this so that I can find the controls in the repeater?
0
Comment
Question by:mwmiller78
  • 7
  • 6
13 Comments
 
LVL 4

Expert Comment

by:Ersoy Hasan
ID: 40425649
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.getElementsByClassName() (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.
0
 
LVL 4

Accepted Solution

by:
Ersoy Hasan earned 500 total points
ID: 40425658
Here is a way to do it :
<!-- wrap your html inputs in a div with classname and give your inputs a class name -->
<div class="entry">
    tbEntry1: <input type="text" class="tbEntry1" name="tbEntry1" id="tbEntry1" oninput="populate_it(this)"><br/>
    tbEntry2: <input type="text" class="tbEntry2" name="tbEntry2" id="tbEntry2" oninput="populate_it(this)"><br/>
    tbResult: <input type="text" class="tbResult" name="tbResult" id="tbResult">
</div>

Open in new window

//and your function now should use getElementsByClassName
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;
}

Open in new window

0
 

Author Comment

by:mwmiller78
ID: 40426217
Second option doesnt work. In my repeater class on databound, I've added:

            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 & "')")

Open in new window


What would be the proper script method now?
0
 

Author Comment

by:mwmiller78
ID: 40426226
nevermind, that wont work either, huh?
0
 
LVL 4

Expert Comment

by:Ersoy Hasan
ID: 40426240
GI.Attributes.Add("class", "tbEntry1");
GI.Attributes.Add("oninput", "populate_it(this)")
SN.Attributes.Add("class", "tbEntry2");
SN.Attributes.Add("oninput", "populate_it(this)")

Open in new window

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.
0
 
LVL 4

Expert Comment

by:Ersoy Hasan
ID: 40426266
here is a fiddle with the second option.
http://jsfiddle.net/qlayer/mjvuL26z/
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Comment

by:mwmiller78
ID: 40426425
HTML side:

<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>

Open in new window



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

Open in new window


When I ViewSource:

    <div class="entry">
        <input name="Repeater1$ctl00$tbEntry1" type="text" id="Repeater1_ctl00_tbEntry1" class="tbEntry1" name="tbEntry1" oninput="populate_it(&#39;Repeater1_ctl00_tbEntry1&#39;)" /><br />
        <input name="Repeater1$ctl00$tbEntry2" type="text" id="Repeater1_ctl00_tbEntry2" class="tbEntry2" name="tbEntry2" oninput="populate_it(&#39;Repeater1_ctl00_tbEntry2&#39;)" /><br />
        <input name="Repeater1$ctl00$tbResult" type="text" id="Repeater1_ctl00_tbResult" class="tbResult" name="tbResult" /><br />
</div>

Open in new window


What am I doing wrong??
0
 
LVL 4

Expert Comment

by:Ersoy Hasan
ID: 40426598
This has to be removed:
GI.Attributes.Add("oninput", "populate_it('" & GI.ClientID & "')")
SN.Attributes.Add("oninput", "populate_it('" & SN.ClientID & "')")

Open in new window

or changed to this:
GI.Attributes.Add("oninput", "populate_it(this)")
SN.Attributes.Add("oninput", "populate_it(this)")

Open in new window

0
 

Author Comment

by:mwmiller78
ID: 40426614
I actually did like you said and just removed the code behind. Here's my code now:

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>

Open in new window


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

Open in new window


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>

Open in new window


Still no luck
0
 
LVL 4

Expert Comment

by:Ersoy Hasan
ID: 40426633
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/)
0
 

Author Comment

by:mwmiller78
ID: 40426648
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.
0
 

Author Comment

by:mwmiller78
ID: 40426914
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:
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28552285.html
0
 

Author Comment

by:mwmiller78
ID: 40437760
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now