How to get index of clicked image from datalist either javascript or jquery

Question

0.00/5 (No votes)

See more:

Hello,

XML

<asp:DataList RepeatColumns="3" ID="repdetails"     runat="server">
                           <ItemTemplate>
                           <table><tr><td style="border:1px solid #bfbfbf; width:50px;">
                                <asp:ImageButton ID="imgbtnid" runat="server" Width="40"
                OnClientClick="return   imagepopup(this.src);" Height="40" ImageUrl='<%# Eval("ivtf_docs_id", "../Imagenew.ashx?styleid={0}")%>'/>
                           </td></tr></table>
                           </ItemTemplate>
                           </asp:DataList>

When the page shows on browser, I have list of images in DataList. Now I need to get index of clicked image from DataList.
if I click first image, it should get index 0 , if it is second image, index should be 1 and etc..

JavaScript

function imagepopup(thmsubimg) {
                   // here how to get index of clicked image from datalist.
                  return false;
               }

Help needed

Posted 11-Mar-15 23:35pm

christhuxavier

Updated 12-Mar-15 2:44am

King Fisher

v2

Add a Solution

Comments

Mohibur Rashid 12-Mar-15 5:39am

Jquery is javascript. If you do not know that then it wont be easy for you to get the concept. Anyway, you can store custom data in your image Attributes and the use setAttribute to set and getAttribute to get the desired data. Give it a try.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) · Answer 1 · 2015-03-12T02:40:00

The problem is that you have Table inside the DataList. So, for each row of DataList, you will actually get many Tables and then their rows and then inside the td, you have the Image.

So, if you click on image and get into the function you have written, then you need to actually count the number of Images inside the main DataList Table and according to that find the index of that particular Image. That is because you are getting 3 columns (td) inside one row. So, when you will calculate according to the parent td index, you will find 0, 1, 2 for the first three images. Then next set of images who are in the next row, will be the same like 0, 1, 2. You won't get the actual index unless you calculate.

Please see the rendered HTML on browser and you will be clarified what I am talking about. Saying that, I would suggest you to redesign the markup or think of the logic which will fit into the correct structure.