Getting id of image button inside gridview using jquery

Question

I want to get the id of an image button inside of a gridview that is inside an updatepanel.

 $("<%# gvLineItems.ClientID %> tr img[id*='ibDelete']").click(function() {
                                                                alert('hi');
                                                                $(this).fadeOut(1000, function() {
                                                                    $(this).remove();
                                                                });       
                                                         });

What I want to do is upon clicking a delete button I want to fade the row out of my grid view then completly remove it.

This is not workign but is not throwing any errors. I have this inside of $(document).ready()

Does anyone know what I am doing incorrectly?

vvohra87 · Accepted Answer · 2011-08-10 19:14:16Z

1

Firstly you have a small typo - remove the # from the asp script snippet as follows

$("#" + "<%= gvLineItems.ClientID %> tr img[id*='ibDelete']")

You cannot bind an event to an element with the same id, even if it is in a different container.

$("<%# gvLineItems.ClientID %> tr img[id*='ibDelete']")

id="ibDelete" is a NO-NO.

Just change this to a class definition on the image and call it using 'img[class=lbDelete]'.

Finally, when you are usng inline scripting anywhere in the page, the operator '#' or '=' mean different things in terms of when and how they are executed. But like you pointed out, you will get an error when a client side script tries to use inline script tag content which is generated on the fly.

To resolve this, simple put the entire script tag into a server side control as such:

<div runat="server">
    <script type="text/javascript">
        .....
    </script>
</div>

Lemme know if you need anymore help, Cheers!

edited Aug 10, 2011 at 19:14

answered Aug 10, 2011 at 18:58

vvohra87

5,7044 gold badges24 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

oJM86o Over a year ago

no your first issue will not work, it causes the following to be thrown The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).

vvohra87 Over a year ago

hey, no problem, that error is coming because you have put the script as-is in the page. to fix it, just put the whole script tag inside a DIV which is a server side control. that way should work just fine.

James Hill · Accepted Answer · 2011-08-10 19:44:23Z

1

It appears that you're grabbing the client id of the control incorrectly. Try this:

$("#" + "<%# gvLineItems.ClientID %> tr").find('#ibDelete').click(...)

EDIT:

Per our discussion in chat:

$(".TempName").click(function() { 
    $(this).closest("tr").fadeOut(10000, function() { 
        $(this).remove(); 
    }); 
});

edited Aug 10, 2011 at 19:44

answered Aug 10, 2011 at 18:57

James Hill

62.1k22 gold badges150 silver badges166 bronze badges

6 Comments

oJM86o Over a year ago

Now when I run my site I get an error : The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>). Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

James Hill Over a year ago

Sry, typo. It should be <%# not <%=. The important thing is that you prepend the hash to the ID.

oJM86o Over a year ago

Still not executing the jquery, no script errors, but it does not do the alert or the fade effect.

James Hill Over a year ago

It sounds like you have a selector problem. Try out my edit above. Even better, assign the image a class and select by class. If you can post the markup that's rendered, I could write the selector for you.

oJM86o Over a year ago

@JamesHill let us continue this discussion in chat

|

Collectives™ on Stack Overflow

Getting id of image button inside gridview using jquery

2 Answers 2

2 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related