call blockUI on button onclick

Question

Hi,

I'm trying to call an blockUI after a buttonclick, but I can't get it to work. What am I doing wrong?

Script:

    $(function() {
        $('#<%= btnSave.ClientID %>').click(function(e) {   
            e.preventDefault();   
            $.blockUI({   
                message: '<div><h1><img src="Images/busy.gif" />   Please wait...</h1>',
                css: { textAlign: 'center', border: '3px solid #aaa', padding: '10px, 0px, 0px, 0px' , verticalalign: 'middle' }  
            }); 
            var btn = document.getElementById("ctl00_ContentPlaceHolder1_btnHidden");
            btn.click();                 
        }); 
    }); 

Button:

<asp:Button ID="btnSave" runat="server" Text="Save" CssClass="button" Width="200" />

Answer 1

Since you're in an UpdatePanel, use .live() here, like this:

$(function() {
    $('#<%= btnSave.ClientID %>').live('click', function(e) {   
        e.preventDefault();   
        $.blockUI({   
            message: '<div><h1><img src="Images/busy.gif" />   Please wait...</h1></div>',
            css: { textAlign: 'center', border: '3px solid #aaa', padding: '10px, 0px, 0px, 0px' , verticalalign: 'middle' }  
        }); 
        var btn = document.getElementById("ctl00_ContentPlaceHolder1_btnHidden");
        btn.click();                 
    }); 
}); 

.live() listens at the document level for a click from btnSave to bubble up...so it works when the element is added, removed, replaced, etc. (and your UpdatePanel is replacing it each postback), where as .click() attaches directly to the element...and that click handler is lost when the element is replaced.