I am using a jquery function to display an alert box when I click on ImageButton inside the asp.net repeater.
<script type="text/javascript">
$('input[id$="imgButtonStory"]').click(function () {
alert("Hi, it's a photo story");
});
</script>
Repeater:
<asp:Repeater ID="rptrImages" runat="server">
<ItemTemplate>
<div class="col-md-4">
<div class="thumbnail">
<asp:ImageButton ID="imgButtonStory" runat="server" ImageUrl='<%# "UploadedImages/"+ Eval("Image") %>' CssClass="img-responsive img-rounded" />
</div>
</div>
</ItemTemplate>
Note: I want to do it this way only, not the other way.
Update:
My whole page:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="frmMain.aspx.cs" Inherits="HimHer.frmMain" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<%-- <link href="css/custom.css" rel="stylesheet" />--%>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" id="btncollapse" class="navbar-toggle" data-toggle="collapse" data-target="#navbarcollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" target="_self" href="learning.html">HerHim</a>
</div>
<div id="navbarcollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="Active"><a href="learning.html">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">About<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="me.html" target="_blank">Me</a></li>
<li><a href="her.html" target="_blank">Her</a></li>
<li></li>
</ul>
</li>
<li><a href="#">Our Story</a></li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid">
<asp:Repeater ID="rptrImages" runat="server">
<ItemTemplate>
<div class="col-md-4">
<div class="thumbnail">
<asp:ImageButton ID="imgButtonStory" ClientIDMode="Static" runat="server" ImageUrl='<%# "UploadedImages/"+ Eval("Image") %>' CssClass="img-responsive img-rounded" />
</div>
</div>
</ItemTemplate>
</asp:Repeater>
<%-- <div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="Images/1.jpg" alt="No Image" class="img-responsive img-rounded"/>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="Images/2.jpg" alt="No Image" class="img-responsive img-rounded" />
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="Images/3.jpg" alt="No Image" class="img-responsive img-rounded" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<a href="#"><img src="Images/1.jpg" alt="No Image" class="img-responsive img-rounded" /></a>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a href="#"><img src="Images/5.jpg" alt="No Image" class="img-responsive img-rounded"/></a>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a href="#"><img src="Images/1.jpg" alt="No Image" class="img-responsive img-rounded"/></a>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<a href="#"><img src="Images/2.jpg" alt="No Image" class="img-responsive img-rounded"/></a>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a href="#"><img src="Images/1.jpg" alt="No Image" class="img-responsive img-rounded"/></a>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a href="#"><img src="Images/10.jpg" alt="No Image" class="img-responsive img-rounded"/></a>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<a href="#"><img src="Images/3.jpg" alt="No Image" class="img-responsive img-rounded"/></a>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a href="#"><img src="Images/10.jpg" alt="No Image" class="img-responsive img-rounded"/></a>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a href="#"><img src="Images/1.jpg" alt="No Image" class="img-responsive img-rounded"/></a>
</div>
</div>
</div>--%>
</div>
<footer class="footer">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<a class="footer" href="#" target="_blank">Facebook</a>
<a class="footer" href="#" target="_blank">Quora</a>
<a class="footer" href="#" target="_blank">Twitter</a>
</div>
</div>
</div>
</footer>
</form>
<script type="text/javascript">
$("imgButtonStory").click
(
function () {
alert("Hi, it's a photo story");
}
);
</script>
</body>
</html>
I have uploaded my whole page for your reference. Please check it out. It's really annoying to have it in code. I mean the error. It has wasted a lot of time of mine.
The Id of the element ImageButton when rendered is a Dynamic Id because the Id attribute must be unique and inside a repeater this could not be granted, so it will never be "imgButtonStory". I think that you shall call the javascript function using OnClientClick of ImageButton (but I don't remember if it has OnClientClick) or, select the buttons with a class selector instead of an Id selector in jQuery function