here's my problem : I'm using Bootstrap framework in an asp.net web app. When the user clicks a button, I want a bootstrap popup to show, asking for confirmation (Do you really want to... ?), then after clicking "Yes" button, the content of the modal changes to a processing gif (keeping the header though, only the modal body changes), launching a random process on a database. Finally, when the process is over, the modal body and footer change to a confirmation message ("Done") with a button to close the modal. I'm actually pretty close to it, but I've got no clue on how changing back the modal body to display the success message....

As you can see in my code, it's pretty messy. Guess because I don't know what's the right approach to it. I tried creating a bootstrap modal popup with an updatepanel and updateprogress, but how to change the content of the updatepanel to only display the success message ?

Here's my code:

<div id="ConfirmationDialog" class="modal fade">
<div class="modal-dialog" aria-labelledby="myModalLabel">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3 id="myModalLabel">Faire une offre</h3>
    </div>
    <asp:UpdatePanel ID="ConfirmationPanel" ClientIDMode="Static" runat="server">
        <ContentTemplate>
            <section id="ConfirmationSection">
                <div class="modal-body">
                    <p>
                        <asp:Label ID="ValidationLabel" runat="server" Text="Voulez-vous enchérir ?" ClientIDMode="Static" />
                    </p>
                </div>
                <div class="modal-footer">
                    <asp:Button ID="OfferValidationButton" runat="server" OnClick="OfferValidationButton_Click" CssClass="btn btn-primary" Text="Enchérir" ClientIDMode="Static" />
                    <asp:Button ID="ButtonCancel" ClientIDMode="Static" runat="server" CssClass="btn" data-dismiss="modal" aria-hidden="true" Text="Cancel" />
                </div>
            </section>
            <section id="SuccessSection">
                <div class="modal-body">
                    <p>
                        <asp:Label ID="LabelMessage" runat="server" meta:resourcekey="LabelMessageResource1" ClientIDMode="Static" />
                    </p>
                </div>
                <div class="modal-footer">
                    <asp:Button ID="Button2" ClientIDMode="Static" runat="server" CssClass="btn" data-dismiss="modal" aria-hidden="true" Text="Cancel" />
                </div>
            </section>
        </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="ConfirmationPanel" DynamicLayout="true">
        <ProgressTemplate>
            <div class="modal-body">
                <p class="text-center">
                    <asp:Label ID="LabelProgress" runat="server" Text="Enregistrement de votre offre..."></asp:Label>
                    <br />
                    <span class="loading style-1"></span>
                </p>
            </div>
            <div class="modal-footer">
                <asp:HyperLink ID="LinkBackToPiece" runat="server" CssClass="button" Text="Retour à l'objet" meta:resourcekey="LinkBackToPieceResource1" ClientIDMode="Static" />
            </div>
        </ProgressTemplate>
    </asp:UpdateProgress>
</div>
</div>

And the scripts:

        $('#OfferValidationButton').click(function() {
            $('#ConfirmationSection').hide();
            $('#SuccessSection').show();

        })

        $('#ButtonCancel').click(function() {
            $('#ConfirmationDialog').modal('hide');
            return false;
        });

Thanks for your answers !

Related posts

Recent Viewed