ASP.net button Jquery BlockUI

Question

I'm having trouble getting an ASP button to call a jquery script, in this case BlockUI, but I'm not sure what I'm doing wrong?

<asp:Button runat="server" ID="btnAddUser" Text="Add Currency Combination" ValidationGroup="valSum2" CssClass="showHide" OnClientClick="overlay"

    <script type="text/javascript" language="javascript">
    $(document).ready(function() { 
        $('#overlay').click(function() { 
        $.blockUI({ overlayCSS: { backgroundColor: '#00f' } }); 
    setTimeout($.unblockUI, 2000);
    }); 
});  </script>

Answer 1

You can call it using the css classname .ShowHide

    <script type="text/javascript" language="javascript">
    $(document).ready(function() { 
        $('.showHide').click(function() { 
        $.blockUI({ overlayCSS: { backgroundColor: '#00f' } }); 
    setTimeout($.unblockUI, 2000);
    }); 
});  </script>

Answer 2

Your script is looking for a DOM element with ID "overlay" which does not exist. The id of the button is btnAddUser.ClientID

<asp:Button runat="server" ID="btnAddUser" Text="Add Currency Combination" ValidationGroup="valSum2" CssClass="showHide" />  

    <script type="text/javascript" language="javascript">  
    $(document).ready(function() {   
        $('<%= btnAddUser.ClientID %>').click(function() {   
        $.blockUI({ overlayCSS: { backgroundColor: '#00f' } });   
    setTimeout($.unblockUI, 2000);  
    });   
});  </script>  

Note the removal of OnClientClick!

Alternatively you can make this code a named function and type its name in the OnClientClick property. You can also bind by CssClass ( $('.showHide') ) (see @PraveenVenu's answer) but this will bind the function to all elements that use this css class.

Answer 3

use ()

you have to execute the func ...

 OnClientClick="overlay()"