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

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()开发者_JAVA技巧; });
</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.

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();

Try using a name selector instead:

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

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

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

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').