Modal Popup extender in accordion pane

Last post 05-02-2007 4:22 PM by ccm682. 3 replies.

Sort Posts:

  • Modal Popup extender in accordion pane

    10-08-2006, 5:30 AM
    • Loading...
    • obachem
    • Joined on 10-08-2006, 9:22 AM
    • Posts 2

    I have a modal popup extender in an accordion pane. Here the code of the modal popup extender:

     

    <atlasToolkit:ModalPopupExtender  ID="ModalPopupExtender" runat="server">
    <atlasToolkit:ModalPopupProperties TargetControlID="btnDeleteTeacher" PopupControlID="pnlDeleteTeacher" BackgroundCssClass="modalBackground" DropShadow="true" OkControlID="OkDeleteTeacher" CancelControlID="CancelDeleteTeacher" OnOkScript="deleteteacher()"/>
    </atlasToolkit:ModalPopupExtender>

      this modalpopup extender is in an accordion pane and it does popup when i click on the button btnDeleteTeacher, but if i then confirm within the modal popup extender the specified function deleteteacher is not called. is there a workaround or is it just not possible to use a modal popup extender within a accordion plane?

     thx in advance,

     

    obachem
     

  • Re: Modal Popup extender in accordion pane

    10-24-2006, 7:44 PM

    Hi obachem,

    You should be able to include a ModalPopup inside an Accordion without any problems.  Perhaps you can post a small sample of what you tried to possibly resolve the issue.

    Thanks,
    Ted

    This posting is provided "AS IS" with no warranties, and confers no rights.
  • Re: Modal Popup extender in accordion pane

    05-02-2007, 3:36 PM
    • Loading...
    • ccm682
    • Joined on 05-03-2006, 12:55 PM
    • Posts 5

    I'm having the same problem, it works fine in IE, but doesn't work in FireFox.  Here is an example:

            <atc:AccordionPane ID="AccordionPane2" runat="server" ContentCssClass="AccordionBody"
                HeaderCssClass="AccordionHeader">
                <Header>
                    <asp:LinkButton ID="LinkButton15" runat="server" onmouseover="pop(this);">
                        <div onmouseout="this.style.backgroundColor = '';" onmouseover="this.style.backgroundColor = '#FDCFAA';"
                            style="width: 98.5%; cursor: pointer; padding-top: 10px; padding-bottom: 10px;" onclick="DemosClick();">
                            <div style="width: 98%; height: 20px;">
                                <asp:LinkButton ID="LinkButton16" runat="server">
                                    <twc:Rollover ID="Rollover4" runat="server" BorderWidth="0" ImageUrl="images/title_demos.gif"
                                        RollOverImageUrl="images/title_demos.gif" Style="float: left;"
                                        ToolTip="View Details.."></twc:Rollover>
                                </asp:LinkButton>
                                <asp:LinkButton ID="LinkButton17" runat="server">
                                    <asp:Image ID="DemosExpand" runat="server" BorderStyle="none" Style="float: right;"
                                        ToolTip="View Details.." />
                                </asp:LinkButton>
                            </div>
                        </div>
                    </asp:LinkButton>

                    <script language="javascript" type="text/javascript">
                        function DemosClick() {
                            TitleClick('<%= DemosExpand.ClientID %>');
                        }
                    </script>

                </Header>
                <Content>
                    <table cellpadding="0" cellspacing="0">
                        <tr>
                            <td>
                                <img src="images/content_top.gif" width="100%" alt=""/></td>
                        </tr>
                        <tr>
                            <td style="background-image: url(images/content_middle.gif); padding-left: 10px;
                                padding-right: 10px;">
                                <!-- Content -->
                                Below are a few demos demostrating Trimedia's ability to make your project come
                                to life. We are adding new demos regularly, so check back often:
                                <ul>
                                    <asp:LinkButton ID="LinkButton18" runat="server" OnClientClick="doMovie('MedicalDemo.flv'); return false;"><li>Cardiology Patient Education Video</li></asp:LinkButton>
                                    <asp:LinkButton ID="LinkButton19" runat="server" OnClientClick="doMovie('AnimDemo.flv'); return false;"><li>3D Animation Demostration</li></asp:LinkButton>
                                    <asp:LinkButton ID="LinkButton20" runat="server" OnClientClick="doMovie('AudioDemo.flv', false); return false;"><li>Audio / Commercial Demo</li></asp:LinkButton>
                                </ul>
                                <atc:ModalPopupExtender ID="ModalPopupExtender1" runat="server" BackgroundCssClass="modalBackground"
                                    OkControlID="OkButton" PopupControlID="VideoPanel" PopupDragHandleControlID="image2"
                                    TargetControlID="LinkButton18">
                                </atc:ModalPopupExtender>
                                <atc:ModalPopupExtender ID="ModalPopupExtender2" runat="server" BackgroundCssClass="modalBackground"
                                    OkControlID="OkButton" PopupControlID="VideoPanel" PopupDragHandleControlID="image2"
                                    TargetControlID="LinkButton19">
                                </atc:ModalPopupExtender>
                                <atc:ModalPopupExtender ID="ModalPopupExtender3" runat="server" BackgroundCssClass="modalBackground"
                                    OkControlID="OkButton" PopupControlID="VideoPanel" PopupDragHandleControlID="image2"
                                    TargetControlID="LinkButton20">
                                </atc:ModalPopupExtender>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <img src="images/content_bottom.gif" width="100%" alt=""/>
                            </td>
                        </tr>
                    </table>
                </Content>
            </atc:AccordionPane>

    I ran it through the Javascript debugger in FireFox and everything seems to setup properly on the ModalPopupBehaviour, but something in the way that the Accordion works somehow breaks the Onclick event on the LinkButton because it is never calls the ModalPopup code (but the code placed in the OnClientClick is called).

  • Re: Modal Popup extender in accordion pane

    05-02-2007, 4:22 PM
    • Loading...
    • ccm682
    • Joined on 05-03-2006, 12:55 PM
    • Posts 5

    The problem exists in that the Accordion is not able to fully stop the Postback code from running when in an updatepanel, at least if I don't put a OnClientClick="return false;" into the LinkButton, I see it post back to the server.  (Even when not in a UpdatePanel, a ModalPopup attached to a LinkButton inside of an Accordion in FireFox, still doesn't work but I still think it is somehow related to postbacks).  I hooked up an image instead of a LinkButton and everything works as expected.

Page 1 of 1 (4 items)
Microsoft Communities
Page view counter