Tips for retrieving the label value within a repeater control and storing it in a JavaScript variable

Question

Tips for retrieving the label value within a repeater control and storing it in a JavaScript variable

I need help extracting the label value from a repeater control and storing it in a JavaScript variable

<asp:Repeater ID="rep_tskAttachments" runat="server" OnItemDataBound="rep_tskAttachments_ItemDataBound">
        <asp:Label ID="rlbl_Remarks" runat="server" Text='<%# Eval("REMARKS") %>'></asp:Label>     
 </asp:Repeater>

This is what I have tried so far

var valComments =document.getElementById('<%=rlbl_Remarks.ClientID%>').innerText;

javascript asp.net

Answer 1

Answer №1

One issue is that the repeater may have varying amounts of "sets."

Here's one way to handle it:

        <asp:Repeater ID="Repeater1" runat="server">
            <ItemTemplate>
                <asp:Label ID="lblHotel" runat="server" 
                    width="200px"
                    Text='<%# Eval("HotelName") %>' >
                </asp:Label>

                <asp:Button ID="Button1" runat="server" Text="Row click (client side)"
                    OnClientClick='<%# "myrowfun(" + Container.ItemIndex.ToString + ");return false;" %>'
                    
                    />

                <br />
            </ItemTemplate>
        </asp:Repeater>

        <script>
            function myrowfun(ix) {
                alert("row click index = " + ix)
                lblID = "Repeater1_lblHotel_" + ix
                alert(lblID)
                
                alert("Hotel name from repeater = " + $('#' + lblID).text())
                
                MyLabel = document.getElementById(lblID)
                alert("Hotel = " +  MyLabel.innerText)
            }
        </script>

To populate the repeater, we can do this:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not IsPostBack Then
        LoadGrid()
    End If
End Sub

Sub LoadGrid()

    Using con As New SqlConnection(My.Settings.TEST3)
        Using cmdSQL =
            New SqlCommand("SELECT TOP 5 ID, FirstName, LastName, HotelName from tblHotels ORDER BY HotelName", con)

            con.Open()
            Repeater1.DataSource = cmdSQL.ExecuteReader
            Repeater1.DataBind()

        End Using
    End Using

End Sub

With this setup, you'll see something like this:

https://i.sstatic.net/CAoLw.png

When you click on a row, it triggers the JavaScript function and retrieves the corresponding hotel value.

For example:

https://i.sstatic.net/N5dO3.png

Even with only one set in the repeater, the index will start at 0, and each label will follow the naming convention:

"repeater name" + "_" + "label name" + "_" + row index

Answer 2

One issue is that the repeater may have varying amounts of "sets."

Here's one way to handle it:

        <asp:Repeater ID="Repeater1" runat="server">
            <ItemTemplate>
                <asp:Label ID="lblHotel" runat="server" 
                    width="200px"
                    Text='<%# Eval("HotelName") %>' >
                </asp:Label>

                <asp:Button ID="Button1" runat="server" Text="Row click (client side)"
                    OnClientClick='<%# "myrowfun(" + Container.ItemIndex.ToString + ");return false;" %>'
                    
                    />

                <br />
            </ItemTemplate>
        </asp:Repeater>

        <script>
            function myrowfun(ix) {
                alert("row click index = " + ix)
                lblID = "Repeater1_lblHotel_" + ix
                alert(lblID)
                
                alert("Hotel name from repeater = " + $('#' + lblID).text())
                
                MyLabel = document.getElementById(lblID)
                alert("Hotel = " +  MyLabel.innerText)
            }
        </script>

To populate the repeater, we can do this:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not IsPostBack Then
        LoadGrid()
    End If
End Sub

Sub LoadGrid()

    Using con As New SqlConnection(My.Settings.TEST3)
        Using cmdSQL =
            New SqlCommand("SELECT TOP 5 ID, FirstName, LastName, HotelName from tblHotels ORDER BY HotelName", con)

            con.Open()
            Repeater1.DataSource = cmdSQL.ExecuteReader
            Repeater1.DataBind()

        End Using
    End Using

End Sub

With this setup, you'll see something like this:

https://i.sstatic.net/CAoLw.png

When you click on a row, it triggers the JavaScript function and retrieves the corresponding hotel value.

For example:

https://i.sstatic.net/N5dO3.png

Even with only one set in the repeater, the index will start at 0, and each label will follow the naming convention:

"repeater name" + "_" + "label name" + "_" + row index

Tips for retrieving the label value within a repeater control and storing it in a JavaScript variable

Answer №1

Similar questions

Tips on updating route and content dynamically without triggering a page reload while ensuring search engine indexing compatibility

What is the best way to extract a specific year and month from a date in a datatable using

Jump to Anchor when Page Reloads

Utilize AJAX to dynamically populate a list in CodeIgniter

Adding Material-UI icons dynamically in a React TypeScript project requires understanding the integration of imported icons

Tips for generating a JSON string with nested structure

Navigating to a Different Page in React Based on Button Click and Meeting Specific Conditions

Developing a side panel for navigation

Collapse dropdown menus upon clicking outside of them

Looking to showcase more detailed items within ng-repeat in AngularJS

Unexpected behavior exhibited by DOM elements

What could be causing the issue with HTML not being printed upon button click in ReactJS?

Dropdown functionality in JavaScript and Bootstrap

How can one safeguard their JavaScript code from potential threats and unauthorized access?

ExpressJS subclasses are failing to inherit attributes and properties in callback functions

Retrieve the next 14 days starting from the current date by utilizing Moment.js

JavaScript date input formatting with HTML

What is the best way to achieve the functionality of this ajax jquery using vanilla JavaScript?

Unexpected CultureNotFoundException encountered in an ASP.NET Core API Controller

Button event causes the list to become empty