locked
Modal Popup Extender and an Update Panel - "Cancel" Button problem RRS feed

  • Question

  • User-1628516020 posted

    This should be a quick "yes" answer - I am in the process of creating a very simple test, but I thought I'd ask on here too (also, so other people might be able to find the answer, if they have the same problem).

    I have created a modalpopupextender that opens up a panel containing an update panel.  I have a cancel button that is tied into the MPE's [CancelControlID] property and this closes the popup when I click it.  However, if I perform a partial postback within the update panel, the cancel button no longer works.  I have found an example online that seems to imply that the cancel button (and I'm guessing, by association) and the OK button should be outside the update panel.  Does the partial postback break the buttons' client script bindings, and thus should they always be placed outside the update panel?

    Friday, March 13, 2009 12:39 PM

All replies

  • User-1597315603 posted

    Hi mad-halfling   
     
    Beside using OkControlId and CancelControlId , We can also show or hide a Modal Popup by the following JavaScript code, which you can use to show or hide the Modal Popup:
     
    $find(“BehaviorIDofMPE”).show();
    $find(“BehaviorIDofMPE”).hide();
     
    In this scenario, you can use the $find(“BehaviorIDofMPE”).hide(); in the onclick event of "Cancel" button to instead of setting it as CancelControl.

    Thanks.

    Wednesday, March 18, 2009 3:52 AM
  • User-1628516020 posted

    Thanks for the reply, I was aware of that.  What I am referring to, is the following.

     If we work from a simple set of examples, without any additional code in the aspx.cs, to illustrate what I am talking about.

    We can create a simple popup, with OK and cancel buttons that close it with this code:-

     

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="ModalScriptTest1.aspx.cs" Inherits="ModalScriptTest1" %>
    
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            
            <asp:Button ID="ShowPopup" runat="server" Text="Show Popup" />
            <br />
            
            <cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" 
                PopupControlID="PopupPanel" TargetControlID="ShowPopup"
                OkControlID="ButtonOK" CancelControlID="ButtonCancel" >
            </cc1:ModalPopupExtender>
            
            <asp:Panel ID="PopupPanel" runat="server" BorderColor="Black" BorderStyle="Solid" BorderWidth="1">
                <asp:Label ID="PopupLabel" runat="server" Text="Popup Panel" /><br />
                <asp:Button ID="ButtonOK" runat="server" Text="OK" />
                <asp:Button ID="ButtonCancel" runat="server" Text="Cancel" />
            </asp:Panel>
        </div>
        </form>
    </body>
    </html>
    

     The [Show Popup] button then shows the popup and the OK and cancel buttons hide it.

    We can then add an update panel into the code, so that the modalpopup can be a bit more dynamic in its functionality (again, this is just a simple example with a single button that will cause a postback on the panel):-

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="ModalScriptTest2.aspx.cs" Inherits="ModalScriptTest2" %>
    
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            
            <asp:Button ID="ShowPopup" runat="server" Text="Show Popup" />
            <br />
            
            <cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" 
                PopupControlID="PopupPanel" TargetControlID="ShowPopup"
                OkControlID="ButtonOK" CancelControlID="ButtonCancel" >
            </cc1:ModalPopupExtender>
            
            <asp:Panel ID="PopupPanel" runat="server" BorderColor="Black" BorderStyle="Solid" BorderWidth="1">
                <asp:UpdatePanel ID="UpdatePanel" runat="server">
                    <ContentTemplate>
                        <asp:Button ID="PostBack" runat="server" Text="Post Back" /><br />
                        <asp:Label ID="PopupLabel" runat="server" Text="Popup Panel" /><br />
                        <asp:Button ID="ButtonOK" runat="server" Text="OK" />
                        <asp:Button ID="ButtonCancel" runat="server" Text="Cancel" />
                    </ContentTemplate>
                </asp:UpdatePanel>
            </asp:Panel>
        </div>
        </form>
    </body>
    </html>
    
     

    In this, if you show the popup and click the OK and cancel buttons, these function as before, but, if you perform the postback they no longer function (I am guessing the client side script isn't being reinstated on them after the postback).

    If you move them outside the update panel, but keep them within the popup panel, this seems to fix the issue:-

     

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="ModalScriptTest3.aspx.cs" Inherits="ModalScriptTest3" %>
    
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            
            <asp:Button ID="ShowPopup" runat="server" Text="Show Popup" />
            <br />
            
            <cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" 
                PopupControlID="PopupPanel" TargetControlID="ShowPopup"
                OkControlID="ButtonOK" CancelControlID="ButtonCancel" >
            </cc1:ModalPopupExtender>
            
            <asp:Panel ID="PopupPanel" runat="server" BorderColor="Black" BorderStyle="Solid" BorderWidth="1">
                <asp:UpdatePanel ID="UpdatePanel" runat="server">
                    <ContentTemplate>
                        <asp:Button ID="PostBack" runat="server" Text="Post Back" /><br />
                        <asp:Label ID="PopupLabel" runat="server" Text="Popup Panel" /><br />
                    </ContentTemplate>
                </asp:UpdatePanel>
                <asp:Button ID="ButtonOK" runat="server" Text="OK" />
                <asp:Button ID="ButtonCancel" runat="server" Text="Cancel" />
            </asp:Panel>
        </div>
        </form>
    </body>
    </html>
    

     

    What I am asking is, is this the correct way to fix this bug/problem, or am I doing something wrong in the way I use the buttons within the update panel?

     

    Thanks

     

    MH

    Wednesday, March 18, 2009 5:29 AM
  • User-1557807525 posted

    <div>

     

    <asp:Button ID="ShowPopup" runat="server" Text="Show Popup" OnClientClick="javascript:$find('ModalPopupExtender1').show();" />

    <br />

     

    <cc1:ModalPopupExtender ID="ModalPopupExtender2" runat="server"

    PopupControlID="PopupPanel" TargetControlID="ShowPopup"

    OkControlID="ButtonOK" CancelControlID="ButtonCancel" >

    </cc1:ModalPopupExtender>

     

    <asp:Panel ID="PopupPanel" runat="server" BorderColor="Black" BorderStyle="Solid" BorderWidth="1">

    <asp:UpdatePanel ID="UpdatePanel" runat="server">

    <ContentTemplate>

    <asp:Button ID="PostBack" runat="server" Text="Post Back" /><br />

    <asp:Label ID="PopupLabel" runat="server" Text="Popup Panel" /><br />

    <asp:Button ID="ButtonOK" OnClientClick="javascript:$find('ModalPopupExtender1').hide();" runat="server" Text="OK" />

    <asp:Button ID="ButtonCancel" OnClientClick="javascript:$find('ModalPopupExtender1').hide();" runat="server" Text="Cancel" />

    </ContentTemplate>

    </asp:UpdatePanel>

    </asp:Panel>

    </div>

    Do this way

    Wednesday, March 18, 2009 5:48 AM
  • User-1628516020 posted

    Yes, I fully appreciate that, but it's not as neat and tidy as using the supplied methods on the modal popup control.  For example if we add in

     

        <script type="text/javascript">
            function OKClicked() {
                alert('OK Clicked');
            }
            function CancelClicked() {
                alert('Cancel Clicked');
            }
        </script>
    

     

    and

    OnOkScript="OKClicked();" OnCancelScript="CancelClicked();" 
      

    to the cc1:ModalPopupExtender, we can handle the click events without having to add code directly to the buttons - especially useful if you want the programmatically change the methods called in the 2 ModalPopupExtender properties at the server side (I don't, but I'm trying to think of other people reading this thread who might).  But, again, placing these 2 buttons inside the update panel breaks this modalpopupcontrol <--> buttons scripting relationship after a postback.

    Please don't get me wrong, I'm not necessarily against writing the script at the client side (I've written large AJAX applications with PHP in the past, and so wrote all the AJAX functionality myself) but it doesn't necessarily seem to be the "best" (generally) way of coding, given the availability of the OnOkID/Script and OnCancelID/Script properties.  I more want to confirm that this is a bug, of sorts, and not something I'm doing wrong which is breaking the client-script attachement to the buttons.

    Wednesday, March 18, 2009 8:11 AM
  • User-1628516020 posted

    I was wondering if there was any official line on this, even if it's "yes, it's a known bug/issue"?

    Thursday, May 14, 2009 4:09 AM
  • User-1628516020 posted

    Bumping this issue - as far as I can see I'm using the modal popup object's properties correctly, or is there something I'm doing wrong?  Or is there a "rebind" command that needs to be executed as part of the update panel's postback functionality?

    Tuesday, May 26, 2009 10:07 AM
  • User-1628516020 posted

    Can anyone please shed any light on the base problem here - i.e. the moda-popup ok/cancel properties' javascript not getting re-bound on a panel postback - is this a known problem with the .NET AJAX?

    Friday, June 19, 2009 6:07 AM
  • User-2049829411 posted

    Just out of curiousity, is there any answer to this question?

    I'm running into the exact same problem with an update panel and the Modal popup extender.

    Friday, October 29, 2010 11:35 AM
  • User-1628516020 posted

    I've not had any further reply or found anything online - usually this means that it's a bug and/or it doesn't work properly.  This annoys me - if it was a known bug I wouldn't mind so much if it was admitted so we knew and could get a work-around together, but that doesn't seem to be the way things operate - I've had a few questions where I raise an issue, get told how to "fix" it, then post a simple example where it doesn't work (and so, therefore, I believe there is a bug) and then all goes quiet..... 

    Monday, November 1, 2010 5:24 AM
  • User-1628516020 posted
    Can anyone please answer this, even if to confirm that it's a known bug?
    Thursday, February 24, 2011 9:09 AM
  • Monday, January 27, 2014 9:41 PM
  • User-804859193 posted

    Just a thought.

    Is it OK to move the modal popup extender inside an update panel as well as moving back the OK and Cancel button in another update panel as well ?

    Monday, January 27, 2014 10:05 PM
  • User-7014347 posted

    Hi guys,

    Not sure if this is still helpful at this time, but someone in the future may find this helpful.

    What i did is to make the cancelbutton ( btnCancelByModal ) invisible on the UI and I created another button ( btnCancelByModal2 ) with Text="Cancel",  which will postback to server anyway and thus get ride of the modal pop.

    <asp:Button ID="btnCancelByModal" runat="server" ClientIDMode="Static"  style="display:none;"/>

    <asp:Button ID="btnCancelByModal2" runat="server" ClientIDMode="Static"  Text="Cancel" />

    Wednesday, July 16, 2014 12:28 PM