I am working on a project where I have multiple labels within a listview control on an ASP.net page. My goal is to access the values of these labels in JavaScript in order to display specific data for each label when the user hovers over it with a mouse-over effect. While I have successfully accessed the value of the first lblID by assigning it to a variable in JavaScript, I am now faced with the challenge of accessing the values of the remaining labels (assuming there are 10 records in the listview).
Each label will contain a unique value such as 1, 5, or 24, which needs to be passed to an ASP.net file via JavaScript in order to retrieve the corresponding text for the mouse-over effect. The ASP.net page sys_get_rankings.aspx?id=1 will display the HTML for the mouse-over.
The issue lies in dynamically retrieving the values from the changing number of labels every time. The purpose of the JavaScript is to generate the desired mouse-over effect when the user hovers over an element with the class 'button'.
Below are excerpts of the code:
The JavaScript Code
<script type="text/javascript">
$(document).ready(function(){
$('.button').CreateBubblePopup({
position: 'top',
align: 'center',
innerHtml: '<img src="images/loading.gif" style="border:0px; vertical-align:middle; margin-right:10px; display:inline;" />loading!',
innerHtmlStyle: { color:'#FFFFFF', 'text-align':'center' },
themeName: 'all-black',
themePath: 'images/jquerybubblepopup-theme'
});
$('.button').mouseover(function(){
var button = $(this);
var x = document.getElementById('ctl00_cpMain_ListView1_ctrl0_lblID').innerText;
$.get('sys_get_rankings.aspx?Id=' + x, function(data) {
button.SetBubblePopupInnerHtml(data, false);
};
});
});
});
</script>
HTML / ASP.net Code
<asp:ListView ID="lstUsers" runat="server" DataSourceID="sqldsUsers">
...
<span style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight:
bold; color: #2661d1;" class="button"><%# Eval("Player_Name") %></span>
<asp:Label ID="lblID" runat="server" Text="" Visible="true" ><span style="color: #FFF">
<%#Eval("TheUserID")%></span></asp:Label>
...
</asp:ListView>
I hope this explanation clarifies the situation and I welcome any insights or suggestions to address this challenge!