Adding an AJAX progress panel

Yehuda Lando asked on June 25, 2014 16:39

Hi,

In some of my pages, I use AJAX panels around my web parts.

Is there a way to hook an update progress panel to them so it will show up when making an AJAX request?

Thanks, Yehuda

ajax

Recent Answers

Yehuda Lando answered on June 26, 2014 13:11

I found how to do this. I added this script:

// Get the instance of PageRequestManager.
var prm = Sys.WebForms.PageRequestManager.getInstance();
// Add initializeRequest and endRequest
prm.add_initializeRequest(prm_InitializeRequest);
prm.add_endRequest(prm_EndRequest);

// Called when async postback begins
function prm_InitializeRequest(sender, args) {
    // get the divImage and set it to visible
    var panelProg = $get('loader');
    var el = $get(args._postBackElement.id);
    panelProg.style.display = '';
    panelProg.style.position = 'fixed';
    panelProg.top = el.offsetTop;
    panelProg.left = el.offsetLeft;
}

// Called when async postback ends
function prm_EndRequest(sender, args) {
    // get the divImage and hide it again
    var panelProg = $get('loader');

    panelProg.style.display = 'none';
    panelProg.style.position = '';
}

And I added a div like this:

<div id="loader" style="display:none;">
    <div class="circle"></div>
    <div class="circle1"></div>
</div>

And styled it with some css3 animations

2 votesVote for this answer Mark as a Correct answer