CODEWITHSUNDEEP
asp.net
ClosDesign
ClosDesign

Reputation: 3924

jQuery Asp.NET Modal Progess WITHOUT Update Panel

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();
}

Upvotes: 2

Views: 1893

Answers (2)

ClosDesign
ClosDesign

Reputation: 3924

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.

Upvotes: 1

Gilbert
Gilbert

Reputation: 36

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.

Upvotes: 0

Related Questions