How to apply jQuery UI button to an html button in ASP.NET?

Question

I have a GridView with a button called btnShowTradeScreenshot. The GridView creates many buttons and I want to apply the jQuery button to it. Here's my relevant GridView code:

<asp:GridView 
    ID="grdTrades" 
    runat="server" 
    >            
    <Columns>            
        <asp:TemplateField HeaderText="Screenshot" >
            <ItemTemplate>
                <input name="btnShowTradeScreenshot" runat="server" visible='<%# Eval("screenshotId") != DBNull.Value %>' type="button" value='View...' onclick='<%# "ShowImageInNewPage(\"App_Handlers/ImageHandler.ashx?screenshotId=" + Eval("screenshotId") + "\")" %>' />
            </ItemTemplate>
        </asp:TemplateField>            
    </Columns>
</asp:GridView>

I am trying to apply the jQuery using this code:

<script type="text/javascript">
    $(document).ready(function () { $("#<%= btnShowTradeScreenshot.ClientID %>").button(); });
</script>

Nothing happens and I get the standard button, not the jQuery button. When I look at the page source, I notice that the buttons have mangled names like:

ctl00$contentMain$grdTrades$ctl05$ctl03

ctl00$contentMain$grdTrades$ctl10$ctl03 etc

Any ideas on how to apply the jQuery to all my buttons?

Thanks.

Klemen Slavič · Accepted Answer · 2010-11-19 13:33:46Z

2

You could use a class name on the buttons instead of relying on the ClientID; that way you save on JavaScript length and don't need to bind to every specific control.

In JS:

// equivalent to $(document).ready(function() {
$(function() {
  $('.customButton').button();
});

In ASP.NET:

<input type="button" runat="server" class="customButton" .../>

Also, if your grid is an AJAX-bound grid, the <input/> elements will be recreated and you'll need to rerun the code on the grid to get the styles applied:

$('#<%= grdTrades.ClientID %> .customButton').button();

answered Nov 19, 2010 at 13:33

Klemen Slavič

19.9k3 gold badges36 silver badges44 bronze badges

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

Comments

Darin Dimitrov · Accepted Answer · 2010-11-19 13:35:23Z

1

Try using a name selector instead:

$('input[name$=btnShowTradeScreenshot]').button();

or even better apply a CSS class to your input and then:

$('.button').button();

answered Nov 19, 2010 at 13:35

Darin Dimitrov

1.0m276 gold badges3.3k silver badges3k bronze badges

Comments

sh54 · Accepted Answer · 2010-11-19 13:38:26Z

0

There are many buttons created and ASP will generate different IDs for them so as to ensure each one has a unique ID. Since $('#...') is aimed at selecting a single uniquely identified element you cannot use it to select multiple buttons.

Try $(':button') to select all button objects. Alternatively you could set each button's class to something like ShowTradeScreenshot and then select them all with $('.ShowTradeScreenshot').

answered Nov 19, 2010 at 13:38

sh54

1,2981 gold badge11 silver badges21 bronze badges

Collectives™ on Stack Overflow

How to apply jQuery UI button to an html button in ASP.NET?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related