Recently a new requirement came for cancel an async operation.  Being aware of the abortPostBack method the PageRequestManager, I figured that it would be pretty simple to implement this feature.  I added a ‘Cancel’ button to my progress indicator and wired the onclick handler to invoke the abortPostBack method.

Clicking cancel did abort the async postback however, because the OnUpdated animation only runs when the UpdatePanel is updated my indicator was never being hidden and it was appearing as if the application was hanging.   My approach to solving this was to look-up the animation component and invoke the animation myself.  like this:

 function abort(){

        var prm = Sys.WebForms.PageRequestManager.getInstance();
        if(prm get_isInAsyncPostBack()){
            //  abort the postback
            prm abortPostBack();
            //  get the reference to the animation for the gridview
            var animation = $find('animation');
            //  simulate stopping by replaying the animation
            animation._postBackPending = false;
            animation.get_OnUpdatingBehavior().quit();
            animation.get_OnUpdatedBehavior().play();
        }
    }

SOURCE

 (more...)

Problem

I have an ASP.NET WebForms app with an UpdatePanel containing a search area where I have a ASP:TextBox that I use for a jQuery autocomplete.

$(document).ready(function() {

$(“#tabContainer_tabSearchBreaks_txtSearchName”)

.autocomplete(“AutoCompleteEmployee.ashx”, { minChars: 3, maxItemsToShow: 10 });

})

This whole thing works fine, but if I click on a ASP:Button and process some code for the search area, the autocomplete javascript no longer works.

Solution

All event bindings defined in $(document).ready stop working after the first partial postback,substitute $(document).ready with the ASP.NET AJAX’s own pageLoad event. This may solve one problem.

function pageLoad() {

$(“#tabContainer_tabSearchBreaks_txtSearchName”)

.autocomplete(‘AutoCompleteEmployee.ashx’).result(function(event, data, formatted) {

document.getElementById(‘ctl00_ctl00_cpBody_body1_hdnItemId’).value = data[1]

}); ;

}