AJAX Update Progress (UpdateProgress) in AJAX Modal Popup (ModalPopupExtender)

Using article by Matt Berseth ModalPopup as an AJAX Progress Indicator I wanted to show an Update Progress on button click event, however, he is not using an UpdateProgres control, which wasn't good enough for me as I had to load another page when the button was clicked.

So I used slightly different approach which worked for me:

<script type="text/javascript">        //  a reference to the popup behavior        var _popup;                function validate(){            //  find the popup behavior            this._popup = $find('ctl00_BaseContents_mdlPopup');            // show the popup            this._popup.show();        }

</script>

 

<asp:UpdatePanel id="upChanges" runat="server"><contenttemplate><vs:IdentifyChangesSummary id=identifyChangesSummary1 runat=server/></contenttemplate>

</asp:UpdatePanel>

<cc1:ModalPopupExtender id="mdlPopup"  runat="server" TargetControlID="UpdateProgress1" PopupControlID="UpdateProgress1" BackgroundCssClass="modalBackground"  /><asp:UpdateProgress id="UpdateProgress1" runat="server" AssociatedUpdatePanelID="upChanges">      <progresstemplate>   <asp:Panel id="pnlPopup" runat="server" CssClass="updateProgress">            <div class="divUpdateProgress">            <img src="../images/ajax-working.gif" alt="Please Wait" style="vertical-align: middle;" />            <span class="updateProgressMessage">Saving Data...</span>            </div>        </asp:Panel>     </progresstemplate>

</asp:UpdateProgress>

Code  behind:

if (!Page.IsPostBack)

   {      btnSaveSelectedChanges.Attributes.Add("OnClick", "validate()");

   }

And stylesheet:

/*** modal update progress ***/.modalBackground {    background-color:Gray;    filter:alpha(opacity=80);    opacity:0.80;         }.updateProgress{    border-width:1px;     border-style:solid;     background-color:#FFFFFF;     position:absolute;     width:150px;     height:40px;     vertical-align: middle;   }.updateProgressMessage{    margin:auto;     font-family:Trebuchet MS;     font-size:small;     vertical-align: middle;} .divUpdateProgress{      text-align:center;      margin:4px;      vertical-align: middle;

}

 

Published Wednesday, March 19, 2008 1:41 PM by funky_rus

Comments

# re: AJAX Update Progress (UpdateProgress) in AJAX Modal Popup (ModalPopupExtender)

Wednesday, March 19, 2008 8:59 AM by funky_rus

S**t!! The Clipboard -> Word -> Clipboard -> weblog wysiwyg just doesn't work :(((

# re: AJAX Update Progress (UpdateProgress) in AJAX Modal Popup (ModalPopupExtender)

Monday, June 16, 2008 7:00 AM by Psi

Can't believe I actually wasted 15 minutes trying to read this garbage and test it.  Half the controls are missing and what is a vs?

A little more explanation next time, I'm sure your code does actually work, you just need to tell people what exactly it is you're doing.

# re: AJAX Update Progress (UpdateProgress) in AJAX Modal Popup (ModalPopupExtender)

Monday, December 14, 2009 11:22 AM by smp

this._popup.show(); in asp.net 2.0, I am getting an error saying-object does not support this property or method!!

# re: AJAX Update Progress (UpdateProgress) in AJAX Modal Popup (ModalPopupExtender)

Monday, December 14, 2009 11:31 AM by smp

using this._popup.show(); in asp.net 2.0, I am getting an error saying-object does not support this property or method!!

# re: AJAX Update Progress (UpdateProgress) in AJAX Modal Popup (ModalPopupExtender)

Monday, January 2, 2012 12:32 AM by Amiy

I tried this but not working

# re: AJAX Update Progress (UpdateProgress) in AJAX Modal Popup (ModalPopupExtender)

Monday, November 12, 2012 1:52 PM by discount north face

Do you have a spam issue on this website; I also am a blogger, and I was curious about your situation; many of us have created some nice methods and we are looking to exchange methods with others, please shoot me an email if interested.

# re: AJAX Update Progress (UpdateProgress) in AJAX Modal Popup (ModalPopupExtender)

Sunday, April 14, 2013 7:31 AM by Lincoln

Way cool! Some extremely valid points! I appreciate you writing this write-up

plus the rest of the site is also very good.