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

Answer 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.