How to use a ModalPopup within an UpdatePanel.

Last post 02-13-2008 1:19 PM by rcrust. 2 replies.

Sort Posts:

  • How to use a ModalPopup within an UpdatePanel.

    10-30-2007, 1:54 AM
    • Loading...
    • toanthrax
    • Joined on 09-25-2004, 8:37 AM
    • mumbai , india
    • Posts 20

     My requirement is simple, i have a label and a button on a form, On the click of the button i want to open a modal popup which will have a FreeTextBox editor.

    The editor will have the text which was in the label on the form. i need to edit this text and on click of another button which will be in the modalpopup.

    i need to save this to db and change the text of the label on the form and close the modalpopup. 

    How do i implement this using an UpdatePanel and a ModalPopup?

     

    I have tried doing the following, but was unsuccessful, please help asap. Thanks in advance.

     

    <form id="form1" runat="server">
        <div>
                <asp:ScriptManager ID="SM" runat="server">
                </asp:ScriptManager>
           </div>
        <div>
       
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
           
              
            <asp:Label ID="lblText" runat="server" Text="Announced at Interop New York, the e-mail feature synchs with Outlook Express, Outlook 2007, Outlook 2003, Apple Mail, Windows Mail, and Thunderbird 2.0."></asp:Label>    
       
            <asp:Button ID="btnEdit" runat="server" Text="Edit" OnClick="btnEdit_Click" />
       
       
            <asp:Panel ID="pnlHead" runat="server" Style="display: none" CssClass="modalPopup">
       
                <asp:Panel ID="pnlSubHead" runat="server" Style="cursor: move; background-color: #DDDDDD;
                    border: solid 1px Gray; color: Black">
                   
                    <div>
                        <FTB:FreeTextBox ID="ftb" runat="server">
                        </FTB:FreeTextBox>
                    </div>                                    
                   
                    <asp:Button ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click" />
                    <asp:Button ID="btnTest" runat="server" Text="Test" OnClick="btnTest_Click"/>
                    <asp:Button ID="btnCancel" runat="server" Text="Cancel"/>
                   
                </asp:Panel>
               
            </asp:Panel>
       
            <ajaxToolkit:ModalPopupExtender ID="MPE" runat="server" TargetControlID="btnEdit"
                PopupControlID="pnlHead" BackgroundCssClass="modalBackground" OkControlID="btnSave"
                CancelControlID="btnCancel" DropShadow="true"
                PopupDragHandleControlID="pnlSubHead" />
           
            </ContentTemplate>
            </asp:UpdatePanel>
       
        </div>
        </form>

     

    If Freedom is Outlawed, then only Outlaws will have Freedom!
  • Re: How to use a ModalPopup within an UpdatePanel.

    10-30-2007, 10:49 AM
    Answer

    Hello,

    Please see the code below:

     

    <script type="text/javascript" >

    function SetText()

    {

    $get('ftb').innerText = $get('lblText').innerText; //get the text to edit and put the text in the textbox

    $find('mymodal').show();//open the modal

    return false;

    }

    function clicked(elem)

    {

    alert(
    'You clicked ' + elem.id);return false;

    }

    </script>

     

    <asp:ScriptManager ID="sc1" runat="server" />

     

     

    <asp:LinkButton ID="dummy" Text="" runat="server" style="display:none"></asp:LinkButton>

    <asp:Label ID="lblText" runat="server" Text="Announced at Interop New York, the e-mail feature synchs with Outlook Express, Outlook 2007, Outlook 2003, Apple Mail, Windows Mail, and Thunderbird 2.0."></asp:Label>

     

    <asp:Button ID="btnEdit" runat="server" Text="Edit" OnClientClick="return SetText();" />

     

     

    <asp:Panel ID="pnlHead" runat="server" Style="display: none" CssClass="modalPopup">

     

    <asp:Panel ID="pnlSubHead" runat="server" Style="cursor: move; background-color: #DDDDDD;

    border: solid 1px Gray; color: Black">

     

    <div>

    <asp:TextBox ID="ftb" runat="server">

    </asp:TextBox>

    </div>

     

    <asp:Button ID="btnSave" runat="server" Text="Save" OnClientClick="return clicked(this);" />

    <asp:Button ID="btnTest" runat="server" Text="Test" OnClientClick="return clicked(this);"/>

    <asp:Button ID="btnCancel" runat="server" Text="Cancel" OnClientClick="return clicked(this);"/>

     

    </asp:Panel>

     

    </asp:Panel>

     

    <cc1:ModalPopupExtender ID="MPE" runat="server" TargetControlID="dummy"

    PopupControlID="pnlHead" BehaviorID="mymodal" BackgroundCssClass="modalBackground" OkControlID="btnSave"

    CancelControlID="btnCancel" DropShadow="true"

    PopupDragHandleControlID="pnlSubHead" />

    I don't use freetext box, but the differences should be minimal. I used all client side calls as well, so if you need server side calls, please let me know.

     

    Good Luck,

    Louis

  • Re: How to use a ModalPopup within an UpdatePanel.

    02-13-2008, 1:19 PM
    • Loading...
    • rcrust
    • Joined on 05-22-2007, 9:25 AM
    • Posts 2

    Old post I see, but thought what the heck...I've been messing around doing the same.  Trying to avoid the javascript events, so I myself am doing it server side. 

    When you say it doesn't work, I don't know what aspects do not...

    1) for instance did you put a break point in your codebehind that never was hit? 

    2) Did the modal open but just not behave as expected?

    If 1 is the your problem,  just remove the attribute OkControlID="btnSave"....having it there from my experience then means you have to define the Ok script event and handle it in javascript.  Removing that tag should allow your server side event to fire and perform.  Not seeing the code in that event, I can't tell you anything else.

    If 2 is your problem, first would have to know details....but can tell you I've noticed in 2008, the AJAX release doesn't work as it does in the prior version.  For instance I do the same somewhat, allowing a user to update a value that already exists on the form.  However, I have 2 validations, one that the new data is valid and two that it doesn't already exist on the DB, if any of those fail I write an error message to my Modal on a label.  All is great, but the page actually flashes now...same code in VS 2005 works great.  Which is why I'm actually here looking for some fix or will report the bug to codeplex.

    Anyway, maybe someone else stumbling through may find this useful...as I'm sure this post has been forgotten :-)

     

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