jQuery Asp.NET Modal Progess WITHOUT Update Panel

Question

We are having ans issue with our store/site. We are using jQuery to fire a the AJAXToolkitExtender for a modal.
The issue is that we are supposed to wrap the button in an update panel that calls the jQuery that fires the modal. Our issue lies in that we are getting a double post back in Firefox and Chrome for some reason. Which in turn when we get an error back from the server to show on the UI it clears our cart. We want to get the status of our call through jQuery without having to use an UpdatePanel. UpdatePanels have known issues in Firefox as making a double post back. Does anyone have a straight client site solution or a solution where we don't have to use an update panel to get the status or our calls to the server and show and hide an update panel. Our code is below: In the ASCX

<script type="text/javascript" language="javascript">
    var ModalProgress = '<%= ModalProgress.ClientID %>';         
</script>
<script type="text/javascript" src="/Scripts/jsUpdateProgress.js"></script>
<asp:Panel ID="panelUpdateProgress" runat="server" CssClass="updateProgress">
        <asp:UpdateProgress ID="UpdateProg1" DisplayAfter="0" runat="server">

            <ProgressTemplate>
                <div id="processingOrderProgress">
               <div id="processingOrderProgressText"> 
<%=GetLocaleResourceString("Museum.MuseumOrderConfirmationProcessingText")%>
</div>

             <img src="../App_Themes/Museum/images/museumLayout/loading.gif" alt="Processing" />
                </div>
            </ProgressTemplate>
        </asp:UpdateProgress>
    </asp:Panel>

    <ajaxToolkit:ModalPopupExtender ID="ModalProgress" runat="server" TargetControlID="panelUpdateProgress"
        BackgroundCssClass="modalBackground" PopupControlID="panelUpdateProgress" />

This is the JS from the jsUpdateProgress.js

Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginReq);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endReq);

function beginReq(sender, args) {
    // shows the Popup 
    $find(ModalProgress).show();
}

function endReq(sender, args) {
    //  hides the Popup 
    $find(ModalProgress).hide();
}

One way to do this is to use PageMethods (or a Web Service) in conjunction with a jQuery Ajax call. There are many examples in SO about how to do this. — Icarus
– Icarus, Commented Oct 6, 2011 at 19:23

ClosDesign · Accepted Answer · 2011-10-14 15:24:49Z

1

I am going to close this. I actually use my button click to fire or show a modal div with jQuery. I don't wait for the beginReq or endReq, I just fire the modal. The page does a post back and since in the jQuery I hide the div on document.ready the modal disappears when the post back happens. I suppose you could do on page init too but either way. That is my solution. No update panel needed.

$(document).ready(function(){

$('#modalDiv').hide);

$('.submitBtn').click(function(){

  $('#modalDiv').show();

});

//after page does a post back or reload the modal disappears.

});

Simple as that.

answered Oct 14, 2011 at 15:24

ClosDesign

3,9649 gold badges42 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gilbert · Accepted Answer · 2011-10-07 05:54:18Z

0

You actually don't need to add an UpdateProgess control anymore because the methods on your jsUpdateProgress.js file is already sufficient to catch the update progress and completion.

I would suggest that you replace the UpdateProgress, and ModalPopupExtender with an HTML div popup and use your beginReq and endReq methods to show that. For better usability you should add a cancelReq method that allows you to cancel the current request.

answered Oct 7, 2011 at 5:54

Gilbert

362 bronze badges

2 Comments

ClosDesign Over a year ago

Do I need to wrap my button that fires all of this in an updatepanel? That what is currently being used around the button.

Gilbert Over a year ago

Yes you still have to or you can also just create an update panel somewhere in the form and add a Asynchronous button postback for the click event so you don't need to wrap it inside.

Collectives™ on Stack Overflow

jQuery Asp.NET Modal Progess WITHOUT Update Panel

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related