JQuery / ASP.NET newbie questions about <asp:Button>

Question

Hey all, having an issue getting asp buttons to interact with JQuery. I'm basically trying to hide a div that contains a form and replace it with an processing image. It works fine for me when I use an HTML input button as the trigger but when I use an aspButton nothing happens.

This works (the id of the HTML button is 'btnSubmit'):

<script>
    $('#btnSubmit').click(function () {
        $('#form1').fadeOut('fast', function () {
            $('#processing').fadeIn('fast', function () {
            });
        });
    });
</script>

This doesn't (the id of the ASP button is 'btnSubmitASP'):

<script>
    $('#btnSubmitASP').click(function () {
        $('#form1').fadeOut('fast', function () {
            $('#processing').fadeIn('fast', function () {
            });
        });
    });
</script>

Any idea what the trick is to get the asp button to do this?

Thanks

Answer 1

The ASP.net server ID for the control is different from the html ID. (ASP.net calls this the client ID). You can get the client id this way:

$('#<%= this.btnSubmitASP.ClientID %>').click( /* etc */ );

Answer 2

If you are using asp.net 4.0 you can set the button's ClientIDMode property ='Static'. This will stop the runtime from mucking with the ID.