Hi,
In my web application there was a function to send Messages. I used jquery Light Box to pop up the message form. But when i hit GridView button for each row, it display only firstly created light box every time. Take a lookat code so u can understand.
<ItemTemplate>
<asp:Label ID="mn" runat="server" Text='<%#Eval("MobileToNum") %>' CssClass="dn"></asp:Label>
<a href="#" runat="server" id="cli" data-reveal-id="m" class="phone-number-click my-anc"><img src="../images/SMS.jpg" /></a>
<asp:Label ID="smsresultlbl" runat="server" Font-Size="XX-Small" Font-Bold="true"></asp:Label>
<div id="m" class="reveal-modal mydiv">
<table class="noborder">
<tr>
<td>Mobile No:</td><td><asp:TextBox ID="mobileNoTxt" runat="server" CssClass="textarea-medium"></asp:TextBox><%-- <asp:RequiredFieldValidator
ID="RequiredFieldValidator1" runat="server" ErrorMessage="Enter Mobile Number" ControlToValidate="mobileNoTxt" ValidationGroup="sms" Display="Dynamic"></asp:RequiredFieldValidator>--%></td>
</tr>
<tr><td></td><td><asp:Button ID="confirmbtn" runat="server" onclick="confirmbtn_Click" Text="Send"></asp:Button></td></tr>
</table>
<a class="close-reveal-modal">×</a>
</div>
</ItemTemplate>
The reason was data-reveal-id and pop up div id not in same name. I used javascript code for match these.
<script type="text/javascript">
$(".phone-number-click").click(function() {
//console.log($("span", $(this).parent()).html());
$("#" + $(this).attr("mobnum")).val($("span", $(this).parent()).html());
});
$(".my-anc").each(function(e) {
var id = "id-" + e;
$(this).attr("data-reveal-id", id);
$(".mydiv:eq(" + e + ")").attr("id", id);
});
</script>