Updatepanel progress bar onclientclick event

Question

I have an Update Progress bar which is working for OnClick event (Server Side), but I need Update Progress bar for OnClientClick event (Client Side).

I have tried below solution but it's not working for me.

Js:

function ComparableSearch() { 
   $get('UpdateProgress1').style.display = 'block';    
    window.scrollTo(0, 0);
   
    GetRefineSearchDetailsMap(StreetNo[0], StreetNo[1], StreetName, State, County, ZipCodeFrom, ZipCodeTo, SalePriceFrom,
                               SalePriceTo, LivingArea, LivingAreaTo, SaleDateFrom, SaleDateTo, SubjectPropertyId, Section, Subdivision,
                               LotSizeFrom, LotSizeTo, YearBuiltFrom, YearBuiltTo, Stories, PrivatePool, FirePlace, Disclosure, IsListing,
                               City, Design, FirePlaceTo);
  
    $("#map").show();
    $("#MainSearchResult").hide();
    return false;
   $get('UpdateProgress1').style.display = 'none';

}



function GetRefineSearchDetailsMap(aStreetNoFrom, aStreetNoTo, aStreetName, aState, aCounty, aZipCodeFrom, aZipCodeTo, aSalePriceFrom,
                                    aSalePriceTo, aLivingArea, aLivingAreaTo, aSaleDateFrom, aSaleDateTo, aSubjectPropertyId, aSection, aSubdivision, aLotSizeFrom,
                                    aLotSizeTo, aYearBuiltFrom, aYearBuiltTo, aStories, aPrivatePool, aFirePlace, aDisclosure, aIsListing, aCity, aDesign, aFirePlaceTo) {


    var SalesSearchCriteria = {        
        X1: X1,
        X2: X2,
        Y1: Y1,
        Y2: Y
    };
    request = $.ajax({
        url: "Form1004/SaleComparableHandler.ashx?type=GetRefineSearchDetailsMap&Tid=" + Math.random(),
        type: "POST",
        data: { "SearchCriteria": JSON.stringify(SalesSearchCriteria) },
        async: true,
        success: function (data) {
            if (data.length > 0) {
                if (data != "Error") {
                    
                }
                else {                    
                    alert("Your session has been expired");
                }
            }
            else {               
                alert("No data exists");
            }
        },
        error: function (XMLHttpRequest, status, errorThrown) {
            if (errorThrown != 'abort') {
                PopUpAlertBox("Please try again...<br/><br/>Below error occured <br/><br/> " + errorThrown + "");
            }
            else {
                PopUpAlertBox("Error : " + errorThrown + "");
            }           
        }
    });

    return false;
}

Answer 1

If I not mistaken, the Ajax is that you need.

I should create script on client side which will pass data to server (when the event Click is true), the result from server is data for your progress bar.

Small example here

Answer 2

You can use this to show an UpdateProgress control on javascript

$get('UpdateProgress1').style.display = 'block'; 

Similar thing to hide it

$get('UpdateProgress1').style.display = 'none';

EDIT

// display indicator before ajax starts
$get('UpdateProgress1').style.display = 'none';

$.ajax({
    url: "Form1004/SaleComparableHandler.ashx?type=GetRefineSearchDetailsMap&Tid=" + Math.random(),
    type: "POST",
    data: { "SearchCriteria": JSON.stringify(SalesSearchCriteria) },
    success: function (data) {
       // your code
    },
    error: function (XMLHttpRequest, status, errorThrown) {
       // your code
    }
})
.always(function() {
    // hide ajax indicator when ajax finished (success or error)
    $get('UpdateProgress1').style.display = 'none';
});