CODEWITHSUNDEEP
c#asp.netajaxwebformsajaxcontroltoolkit
Sercan Ozdemir
Sercan Ozdemir

Reputation: 4691

Asp.NET Ajax ModalPopupExtender not working properly

Hi im trying to prepare a step by step mechanisim for my website. First of all ajax modal popup and update panel combination is so complex, can't get it working.. Here's some of my code..

<asp:Button ID="fakeButton" runat="server" Style="display: none;" Text="" />
<asp:Button ID="fakeButton2" runat="server" Style="display: none;" Text="" />
<asp:Button ID="fakeButton3" runat="server" Style="display: none;" Text="" />

This is one of the modal windows:

 <ajax:ModalPopupExtender ID="mpeOrder2" runat="server" PopupControlID="pnlOrder2" TargetControlID="fakeButton3"
        BackgroundCssClass="modalBackground">
    </ajax:ModalPopupExtender>
    <asp:Panel ID="pnlOrder2" runat="server" CssClass="modalPopup" Style="display: none">
        <asp:UpdatePanel style="text-align: right" ID="updatePanel6" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="True">
            <ContentTemplate>
                <div class="header">Modal - 2</div>
                <div class="body">
                    <div class="footer" align="right">
                        <table>
                            <tr>
                                <td>
                                    <asp:Button ID="btnToStepOne" runat="server" OnClick="btnToStepOne_OnClick" Text="Back" CssClass="orderNo" />
                                </td>
                                <td>
                                    <asp:Button ID="btnToStepThree" OnClick="btnToStepThree_OnClick" runat="server" Text="Next" CssClass="yes" />
                                </td>
                            </tr>
                        </table>
                    </div>
            </ContentTemplate>
        </asp:UpdatePanel>
    </asp:Panel>

CodeBehind: 

protected void btnToStepOne_OnClick(object sender, EventArgs e)
{
    mpeOrder2.Hide();
    mpeOrder.Show();
}

 protected void btnToStepThree_OnClick(object sender, EventArgs e)
{
    mpeOrder2.Hide();
    mpeOrder3.Show();
}

And the others are the same of these codes. When i click my first component to open first modal popup, it works. Then i click next it works again. But after that when i click next again to see my third modal popup every popup disappeared, or i click randomly the next and show buttons modalpopups open all together and one above the other...This is sick..

None of these modals are in an update panel. As you can see only panels got their own update panels. Also im using

<ajax:ToolkitScriptManager EnableScriptLocalization="true" EnablePartialRendering="true" EnableScriptGlobalization="true"
            ID="ToolkitScriptManager1" AsyncPostBackTimeout="36000" runat="server" />

Any help would be appreciated.

Thanks.

Upvotes: 0

Views: 11054

Answers (2)

Shankar
Shankar

Reputation: 125

We had many issues with ajax popup. you might want to try the approach we have been using for past few months or so with out any issues. This approach creates a popup with out need of ajax / jquery / javascript /css/ update panel.

here: A modal popup with out using ajax, update panel, jquery or javascript. very simple to use. http://atldunia.com/youtube/Zpopup.aspx

Upvotes: 0

Sercan Ozdemir
Sercan Ozdemir

Reputation: 4691

I solved it after a few hours....

I forgot to close my body div inside the panel, that's why its getting nested. When i close my body div everything worked fine.

<ajax:ModalPopupExtender ID="mpeOrder2" runat="server" PopupControlID="pnlOrder2" TargetControlID="fakeButton3"
        BackgroundCssClass="modalBackground">
    </ajax:ModalPopupExtender>
    <asp:Panel ID="pnlOrder2" runat="server" CssClass="modalPopup" Style="display: none">
        <asp:UpdatePanel style="text-align: right" ID="updatePanel6" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="True">
            <ContentTemplate>
                <div class="header">Modal - 2</div>
                <div class="body">FINALLY</div>
                    <div class="footer" align="right">
                        <table>
                            <tr>
                                <td>
                                    <asp:Button ID="btnToStepOne" runat="server" OnClick="btnToStepOne_OnClick" Text="Back" CssClass="orderNo" />
                                </td>
                                <td>
                                    <asp:Button ID="btnToStepThree" OnClick="btnToStepThree_OnClick" runat="server" Text="Next" CssClass="yes" />
                                </td>
                            </tr>
                        </table>
                    </div>
            </ContentTemplate>
        </asp:UpdatePanel>
    </asp:Panel>

Upvotes: 1

Related Questions