Monday, March 26, 2012

Modal Popup extender in accordion pane

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

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


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="http://pics.10026.com/?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="http://pics.10026.com/?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).


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.

No comments:

Post a Comment