How to use jQuery ListView control on Image Button Click Event

obautista
obautista used Ask the Experts™
on
I am using a ListView Control.  In the ItemTemplate of the ListView, I create ImageButton controls for all of the images found in my datasource.  I want to use jQuery click event so that when I click on one of the images - I fire the jQuery function passing the ImageUrl property of the ImageButton.  I am setting the ImageUrl like this:  ImageUrl='<%# Bind("BoxArt.MediumUrl") %>'

I am not sure how to accomplish this.  Any help provided will be very much appreciated.  

I am using 4.0 .Net Framework.  I have this in my webconfig:
<pages clientIDMode="Static"></pages>   which is setting all of the ImageControls created in my ListView with an ID of "imgMovie".

Thanks
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
leakim971Multitechnician
Top Expert 2014

Commented:
Assuming the ID o your listview is : ListView1
Try :

$("input[type='image']", "#<%= ListView1.ClientID %>").click(function() { alert("Image clicked"); })

Author

Commented:
I have attached my code snippet  The alert is not being triggered.

    <script type="text/javascript">
        $(document).ready(function () {
            $("input[type='image']", "#<%= lvMovies.ClientID %>").click(function () {
                alert("Image clicked");
            });
        });
    </script>  
leakim971Multitechnician
Top Expert 2014

Commented:
could you right click on your page in your web browser and choose view source?
Please post it in code snippet (click on the link Code)
CompTIA Security+

Learn the essential functions of CompTIA Security+, which establishes the core knowledge required of any cybersecurity role and leads professionals into intermediate-level cybersecurity jobs.

Author

Commented:
Thanks.  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head><link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /><link href="Styles/styles.css" rel="Stylesheet" type="text/css" /> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script> 
    <script src="../Scripts/jquery.watermark.min.js" type="text/javascript"></script> 
    <script src="../Scripts/jquery.simplemodal-1.3.5.min.js" type="text/javascript"></script> 
    <script src="../Scripts/basic.js" type="text/javascript"></script> 
    <link type="text/css" href="Styles/demo.css" rel="stylesheet" media="screen" /><link type="text/css" href="Styles/basic.css" rel="stylesheet" media="screen" />    
        
    <script type="text/javascript">       
        $(document).ready(function () {
            $("input[type='image']", "#lvMovies").click(function () {
                alert("Image clicked");
            });
        });
    </script>   
<title> 
 
</title></head> 
<body> 
    <form method="post" action="Netflix-Dev.aspx" id="form"> 
 
<script type="text/javascript"> 
//<![CDATA[
var theForm = document.forms['form'];
if (!theForm) {
    theForm = document.form;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script> 
 
 
<script src="/WebResource.axd?d=ID0jSt5Nsmz3ubCBZfe1BZgV4jt4A2B51ZN37cmXDlr_a84Q-tjbTL2h2HmG298-m-hm7GSXXYpRe0F73ESu9Lmy7nfKpoeO4jufTTOQRdk1&amp;t=634214884383820398" type="text/javascript"></script> 
 
 
<script src="/ScriptResource.axd?d=k3R8Kmc5ZdzOp2eEd7A4D18NPeTlu97R7e_ubmpFbdSMaWSDXx4u3NlslTYGZGT67FCS8m5zT3ex7T8lpfQGnQBXt-WzBbOanL_N_ULNQwy-Z8fmv_ShV8j0No-IQdkgvG4qZENwxhHTCCiK-vEvaQkxm514uZoFWTkeoU7QSfZsKru0O8k_9MqvV4xpP1Vf0&amp;t=2610f696" type="text/javascript"></script> 
<script type="text/javascript"> 
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
//]]>
</script> 
 
<script src="/ScriptResource.axd?d=nX5vCGsu3Gxc3SXkKXjnRIYkzlbtNOoKNUUv6A9_9b2fL8OFYlU0Ns8K6T1k3vT2-QrmdyMoIU6O6k42uYjMXfozqMRrrA3kUOnnCCEleDg8hBUQnMLY8hcgMxJ0sY3kR5GbxJNQ3slf55y3A19lyn2L8uN4wb7JfRL0G5e6LE2pLnfCOFIoA6DaCKAzTV7w0&amp;t=2610f696" type="text/javascript"></script> 
      
        <div>            
            <script type="text/javascript"> 
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$ScriptManager1', 'form', ['tctl00$Tab3ContentPlaceHolder$UpdatePanel2','UpdatePanel2'], [], [], 90, 'ctl00');
//]]>
</script> 
 
            <div id="tabs"> 
                <ul> 
                    <li><a href="#fragment-1"><span>One</span></a></li> 
                    <li><a href="#fragment-2"><span>Two</span></a></li> 
                    <li><a href="#fragment-3"><span>Three</span></a></li> 
                    <li><a href="#fragment-4"><span>Four</span></a></li> 
                    <li><a href="#fragment-5"><span>five</span></a></li> 
                    <li class="search">                   
                        <div id="pnlSearch" class="search" onkeypress="javascript:return WebForm_FireDefaultButton(event, &#39;btnSearch&#39;)"> 
	
                            <input name="ctl00$txtSearch" type="text" id="txtSearch" />                            
                                <input type="image" name="ctl00$btnSearch" id="btnSearch" src="Images/magnify_icon.gif" />                           
                        
</div>                   
                   </li> 
                </ul> 
                <div id="fragment-1">                   
                    
    <div id="container">    
        <div id="content"> 
            <div id="basic-modal">            
                
                        <table id="tblMovies" cellspacing="0" cellpadding="2"> 
 
		           
                        <tr id="ContactsRow" style="background-color: #FFFFFF"> 
			
                        <td id="td1" align="center" style="width:10px"> 
                            <input type="image" name="ctl00$Tab1ContentPlaceHolder$lvMovies$ctrl0$ctl01$imgMovie" id="imgMovie" src="http://cdn-3.nflximg.com/us/boxshots/small/70109893.jpg" /> 
                        </td> 
			
                    
                        <td id="td4" style="border-right: 1px solid #00C0C0">&nbsp;</td> 
			
                    
                        <td id="td1" align="center" style="width:10px"> 
                            <input type="image" name="ctl00$Tab1ContentPlaceHolder$lvMovies$ctrl0$ctl05$imgMovie" id="imgMovie" src="http://cdn-9.nflximg.com/us/boxshots/small/70115629.jpg" /> 
                        </td> 
			
                    
                        <td id="td4" style="border-right: 1px solid #00C0C0">&nbsp;</td> 
			
                    
                        <td id="td1" align="center" style="width:10px"> 
                            <input type="image" name="ctl00$Tab1ContentPlaceHolder$lvMovies$ctrl0$ctl09$imgMovie" id="imgMovie" src="http://cdn-0.nflximg.com/us/boxshots/small/70115630.jpg" /> 
                        </td> 
			
                    
                        <td id="td4" style="border-right: 1px solid #00C0C0">&nbsp;</td> 
			
                    
                        <td id="td1" align="center" style="width:10px"> 
                            <input type="image" name="ctl00$Tab1ContentPlaceHolder$lvMovies$ctrl0$ctl13$imgMovie" id="imgMovie" src="http://cdn-7.nflximg.com/us/boxshots/small/70115887.jpg" /> 
                        </td> 
			
                    
                        <td id="td4" style="border-right: 1px solid #00C0C0">&nbsp;</td> 
			
                    
                        <td id="td1" align="center" style="width:10px"> 
                            <input type="image" name="ctl00$Tab1ContentPlaceHolder$lvMovies$ctrl0$ctl17$imgMovie" id="imgMovie" src="http://cdn-8.nflximg.com/us/boxshots/small/70115878.jpg" /> 
                        </td> 
			
                    </tr> 
		
                    
		           
                        <tr id="ContactsRow" style="background-color: #FFFFFF"> 
			
                        <td id="td1" align="center" style="width:10px"> 
                            <input type="image" name="ctl00$Tab1ContentPlaceHolder$lvMovies$ctrl1$ctl01$imgMovie" id="imgMovie" src="http://cdn-0.nflximg.com/us/boxshots/small/70116690.jpg" /> 
                        </td> 
			
                    
                        <td id="td4" style="border-right: 1px solid #00C0C0">&nbsp;</td> 
			
                    
                        <td id="td1" align="center" style="width:10px"> 
                            <input type="image" name="ctl00$Tab1ContentPlaceHolder$lvMovies$ctrl1$ctl05$imgMovie" id="imgMovie" src="http://cdn-2.nflximg.com/us/boxshots/small/70117312.jpg" /> 
                        </td> 
			
                    
                        <td id="td4" style="border-right: 1px solid #00C0C0">&nbsp;</td> 
			
                    
                        <td id="td1" align="center" style="width:10px"> 
                            <input type="image" name="ctl00$Tab1ContentPlaceHolder$lvMovies$ctrl1$ctl09$imgMovie" id="imgMovie" src="http://cdn-2.nflximg.com/us/boxshots/small/70117582.jpg" /> 
                        </td> 
			
                    
                        <td id="td4" style="border-right: 1px solid #00C0C0">&nbsp;</td> 
			
                    
                        <td id="td1" align="center" style="width:10px"> 
                            <input type="image" name="ctl00$Tab1ContentPlaceHolder$lvMovies$ctrl1$ctl13$imgMovie" id="imgMovie" src="http://cdn-3.nflximg.com/us/boxshots/small/70120083.jpg" /> 
                        </td> 
			
                    
                        <td id="td4" style="border-right: 1px solid #00C0C0">&nbsp;</td> 
			
                    
                        <td id="td1" align="center" style="width:10px"> 
                            <input type="image" name="ctl00$Tab1ContentPlaceHolder$lvMovies$ctrl1$ctl17$imgMovie" id="imgMovie" src="http://cdn-0.nflximg.com/us/boxshots/small/70120340.jpg" /> 
                        </td> 
			
                    </tr> 
		
                    
		           
                        <tr id="ContactsRow" style="background-color: #FFFFFF"> 
			
                        <td id="td1" align="center" style="width:10px"> 
                            <input type="image" name="ctl00$Tab1ContentPlaceHolder$lvMovies$ctrl2$ctl01$imgMovie" id="imgMovie" src="http://cdn-6.nflximg.com/us/boxshots/small/70121926.jpg" /> 
                        </td> 
			
                    
                        <td id="td4" style="border-right: 1px solid #00C0C0">&nbsp;</td> 
			
                    
                        <td id="td1" align="center" style="width:10px"> 
                            <input type="image" name="ctl00$Tab1ContentPlaceHolder$lvMovies$ctrl2$ctl05$imgMovie" id="imgMovie" src="http://cdn-9.nflximg.com/us/boxshots/small/70122239.jpg" /> 
                        </td> 
			
                    
                        <td id="td4" style="border-right: 1px solid #00C0C0">&nbsp;</td> 
			
                    
                        <td id="td1" align="center" style="width:10px"> 
                            <input type="image" name="ctl00$Tab1ContentPlaceHolder$lvMovies$ctrl2$ctl09$imgMovie" id="imgMovie" src="http://cdn-0.nflximg.com/us/boxshots/small/70123920.jpg" /> 
                        </td> 
			
                    
                        <td id="td4" style="border-right: 1px solid #00C0C0">&nbsp;</td> 
			
                    
                        <td id="td1" align="center" style="width:10px"> 
                            <input type="image" name="ctl00$Tab1ContentPlaceHolder$lvMovies$ctrl2$ctl13$imgMovie" id="imgMovie" src="http://cdn-4.nflximg.com/us/boxshots/small/70126504.jpg" /> 
                        </td> 
			
                    
                        <td id="td4" style="border-right: 1px solid #00C0C0">&nbsp;</td> 
			
                    
                        <td id="td1" align="center" style="width:10px"> 
                            <input type="image" name="ctl00$Tab1ContentPlaceHolder$lvMovies$ctrl2$ctl17$imgMovie" id="imgMovie" src="http://cdn-5.nflximg.com/us/boxshots/small/70126505.jpg" /> 
                        </td> 
			
                    </tr> 
		
                    
		           
                        <tr id="ContactsRow" style="background-color: #FFFFFF"> 
			
                        <td id="td1" align="center" style="width:10px"> 
                            <input type="image" name="ctl00$Tab1ContentPlaceHolder$lvMovies$ctrl3$ctl01$imgMovie" id="imgMovie" src="http://cdn-9.nflximg.com/us/boxshots/small/70126749.jpg" /> 
                        </td> 
			
                    
                        <td id="td4" style="border-right: 1px solid #00C0C0">&nbsp;</td> 
			
                    
                        <td id="td1" align="center" style="width:10px"> 
                            <input type="image" name="ctl00$Tab1ContentPlaceHolder$lvMovies$ctrl3$ctl05$imgMovie" id="imgMovie" src="http://cdn-5.nflximg.com/us/boxshots/small/70125235.jpg" /> 
                        </td> 
			
                    
                        <td id="td4" style="border-right: 1px solid #00C0C0">&nbsp;</td> 
			
                    
                        <td id="td1" align="center" style="width:10px"> 
                            <input type="image" name="ctl00$Tab1ContentPlaceHolder$lvMovies$ctrl3$ctl09$imgMovie" id="imgMovie" src="http://cdn-2.nflximg.com/us/boxshots/small/70127232.jpg" /> 
                        </td> 
			
                    
                        <td id="td4" style="border-right: 1px solid #00C0C0">&nbsp;</td> 
			
                    
                        <td id="td1" align="center" style="width:10px"> 
                            <input type="image" name="ctl00$Tab1ContentPlaceHolder$lvMovies$ctrl3$ctl13$imgMovie" id="imgMovie" src="http://cdn-1.nflximg.com/us/boxshots/small/70125931.jpg" /> 
                        </td> 
			
                    
                        <td id="td4" style="border-right: 1px solid #00C0C0">&nbsp;</td> 
			
                    
                        <td id="td1" align="center" style="width:10px"> 
                            <input type="image" name="ctl00$Tab1ContentPlaceHolder$lvMovies$ctrl3$ctl17$imgMovie" id="imgMovie" src="http://cdn-1.nflximg.com/us/boxshots/small/70130141.jpg" /> 
                        </td> 
			
                    </tr> 
		
                    
		           
                        <tr id="ContactsRow" style="background-color: #FFFFFF"> 
			
                        <td id="td1" align="center" style="width:10px"> 
                            <input type="image" name="ctl00$Tab1ContentPlaceHolder$lvMovies$ctrl4$ctl01$imgMovie" id="imgMovie" src="http://cdn-0.nflximg.com/us/boxshots/small/70130180.jpg" /> 
                        </td> 
			
                    
                        <td id="td4" style="border-right: 1px solid #00C0C0">&nbsp;</td> 
			
                    
                        <td id="td1" align="center" style="width:10px"> 
                            <input type="image" name="ctl00$Tab1ContentPlaceHolder$lvMovies$ctrl4$ctl05$imgMovie" id="imgMovie" src="http://cdn-1.nflximg.com/us/boxshots/small/70128681.jpg" /> 
                        </td> 
			
                    
                        <td id="td4" style="border-right: 1px solid #00C0C0">&nbsp;</td> 
			
                    
                        <td id="td1" align="center" style="width:10px"> 
                            <input type="image" name="ctl00$Tab1ContentPlaceHolder$lvMovies$ctrl4$ctl09$imgMovie" id="imgMovie" src="http://cdn-8.nflximg.com/us/boxshots/small/70128718.jpg" /> 
                        </td> 
			
                    
                        <td id="td4" style="border-right: 1px solid #00C0C0">&nbsp;</td> 
			
                    
                        <td id="td1" align="center" style="width:10px"> 
                            <input type="image" name="ctl00$Tab1ContentPlaceHolder$lvMovies$ctrl4$ctl13$imgMovie" id="imgMovie" src="http://cdn-0.nflximg.com/us/boxshots/small/70130450.jpg" /> 
                        </td> 
			
                    
                        <td id="td4" style="border-right: 1px solid #00C0C0">&nbsp;</td> 
			
                    
                        <td id="td1" align="center" style="width:10px"> 
                            <input type="image" name="ctl00$Tab1ContentPlaceHolder$lvMovies$ctrl4$ctl17$imgMovie" id="imgMovie" src="http://cdn-9.nflximg.com/us/boxshots/small/70130819.jpg" /> 
                        </td> 
			
                    </tr> 
		
                    </table> 
            
                        <span id="MoviesDataPager"><a class="aspNetDisabled">|<< </a>&nbsp;<a class="aspNetDisabled"> < </a>&nbsp;<a href="javascript:__doPostBack(&#39;ctl00$Tab1ContentPlaceHolder$lvMovies$MoviesDataPager$ctl00$ctl02&#39;,&#39;&#39;)"> > </a>&nbsp;<a href="javascript:__doPostBack(&#39;ctl00$Tab1ContentPlaceHolder$lvMovies$MoviesDataPager$ctl00$ctl03&#39;,&#39;&#39;)"> >>|</a>&nbsp;</span> 
                    
                <input type="button" name="basic" value="Demo" class="basic"/>                 
            </div> 
            <!-- modal content -->        
		    <div id="basic-modal-content">  
                
                        <div style="width:500px"> 
                    
                        <div><h3>How to Train Your Dragon</h3></div> 
                        <div style="float:left; width:510px"> 
                            <span style="float:left;width:115px;"> 
                                <input type="image" name="ctl00$Tab1ContentPlaceHolder$rptMovie$ctl01$imgSelectedMovie" id="imgSelectedMovie" src="http://cdn-3.nflximg.com/us/boxshots/large/70109893.jpg" /> 
                            </span> 
                            <div style="float:left; width:305px; margin-left:5px;"> 
                                <span>Released: 2010</span> 
                                <span>Rated: PG</span> 
                                <span>Rated: 4.5</span> 
                                <span>Rated: 5880</span>                            
                            </div> 
                            
                        </div> 
                        <div style="clear:both"><h4>As the son of a Viking leader on the cusp of manhood, shy Hiccup Horrendous Haddock III faces a rite of passage: He must kill a dragon to prove his warrior mettle. But after downing a feared dragon, he realizes that he no longer wants to destroy it.</h4></div> 
                        <div> 
                            
                                    <h4>Ages 11-12</h4> 
                                
                                    <h4>Ages 8-10</h4> 
                                
                                    <h4>Book Characters</h4> 
                                
                                    <h4>Children & Family</h4> 
                                
                                    <h4>Family Adventures</h4> 
                                
                                    <h4>Family Animation</h4> 
                                
                                    <h4>Family Sci-Fi & Fantasy</h4>                                 
                        </div>                     
                        </div>                                                                
            </div> 
            <!-- preload the images --> 
		    <div style="display:none"> 
			    <img src="Images/x.png" alt="Close" /> 
		    </div>        
        </div>    
    </div>                        
                </div>                 
        </div> 
    </form> 
</body> 
</html>

Open in new window

Multitechnician
Top Expert 2014
Commented:
Ok use : $("input[type='image']", "#tblMovies")

<script type="text/javascript">
        $(document).ready(function () {
            $("input[type='image']", "#tblMovies").click(function () {
                alert("Image clicked");
            });
        });
    </script>

Open in new window

Author

Commented:
Thanks.  That worked.  One more question - notice the SRC on each Image.  How can I pass this value to the jQuery function?

Thanks -
leakim971Multitechnician
Top Expert 2014
Commented:
You don't really pass it, you get it directly :

<script type="text/javascript">
        $(document).ready(function () {
            $("input[type='image']", "#tblMovies").click(function () {
                var url = $(this).attr("src");
                alert("the url is : " + url);
            });
        });
    </script>

Author

Commented:
Thanks so much...
leakim971Multitechnician
Top Expert 2014

Commented:
You're welcome! Thanks for the points!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial