PasteHTML doesnt work within a modal popup (example page attached)

  •  07-15-2010, 2:43 PM

    PasteHTML doesnt work within a modal popup (example page attached)

    Hello there,
     
    I'm evaluating and all seems well but I'm having an issue with a requirement I have.
     
    I have a modal popup with the editor inside.  I have a button that inserts some text at the cursor location and postsback.  I can see that the text is inserted but the data that goes to the server does not include the inserted text.  The odd thing is, i put an alert right after the PasteHTML() and it works?  I had problems uploading my text case so it's shown below.  Any help would be appreciated.
    Thanks!!
     
    -------------------------------------------------------------------------------------
     
    <%@ Page Language="VB" ValidateRequest="false" %>
    <%@ Register TagPrefix="CE" Namespace="CuteEditor" Assembly="CuteEditor" %>  
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <script runat="server">
        
        Protected Sub InsertText_Click(ByVal sender As Object, ByVal e As System.EventArgs)
            txtResult.Text = editor.Text
        End Sub

        Protected Sub InsertText2_Click(ByVal sender As Object, ByVal e As System.EventArgs)
            txtResult.Text = editor.Text
        End Sub
        
        Protected Sub btnShowPopUp_Click(ByVal sender As Object, ByVal e As System.EventArgs)
            ModalPopupExtender_pnlModalPop.Show()
        End Sub
        
    </script>

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>Untitled Page</title>
        
        <style type="text/css">
        .modalBackground {background-color:Gray;filter:alpha(opacity=70);opacity:0.7;}
        </style>
    </head>

    <script language="javascript">
        
    function insertMe(textToInsert) {
           
        //get editor
        var editor1 = document.getElementById('<%= editor.ClientID %>');          

        //paste replace text in editor
        editor1.PasteHTML(textToInsert);
    }

    function insertMe2(textToInsert) {
           
        //get editor
        var editor1 = document.getElementById('<%= editor.ClientID %>');          

        //paste replace text in editor
        editor1.PasteHTML(textToInsert);
        
        //alert
        alert("text inserted");
    }  
       
    </script>

    <body>
        <form id="form1" runat="server">
        
                <ajax:ToolkitScriptManager
            ID="ToolkitScriptManager"
            runat="server"
            AsyncPostBackTimeOut="360000"
            EnablePartialRendering="true"
            LOADSCRIPTSBEFOREUI=false
            ScriptMode=Release
            EnablePageMethods=true />  
        
        <div>
        
        <asp:Button ID="btnShowPopUp" runat="server" OnClick="btnShowPopUp_Click" Text="popup" /><br />
        
    <asp:Panel ID="pnlModalPop" runat="server" BackColor="GhostWhite" CssClass="modalPopup"
                                        Height="500px" HorizontalAlign="Center" Style="display: none" Width="600px">
                                        <asp:UpdatePanel ID="UpdatePanel_ModalPopUp" runat="server" UpdateMode="Conditional">
                                            <ContentTemplate>
                                            
        <CE:Editor id="editor" runat="server" Visible=true UseStandardDialog=true Width="100%" />
            <br />
            <asp:Button ID="InsertText" runat="server" Text="Insert Text" OnClientClick="BLOCKED SCRIPTinsertMe('This is Inserted Text'); return true;" OnClick="InsertText_Click" />
            <asp:Button ID="InsertText2" runat="server" Text="Insert Text (with alert after)" OnClientClick="BLOCKED SCRIPTinsertMe2('This is Inserted Text'); return true;" OnClick="InsertText2_Click" />
            <br />
            <br />
            <asp:Label ID="txtResult" runat="server" Text="Editor text after postback displays here" BorderWidth="1px" BorderStyle="Solid"></asp:Label>

                                            </ContentTemplate>
                                        </asp:UpdatePanel>
                                    </asp:Panel>
        

            
                                    <div style="display: none">
                                        <asp:Button ID="btnModalPop" runat="server" CssClass="button" />
                                    </div>
                                    <ajax:ModalPopupExtender ID="ModalPopupExtender_pnlModalPop"
                                    
                                        runat="server"
                                        BackgroundCssClass="modalBackground"
                                        Enabled="True"
                                        PopupControlID="pnlModalPop"
                                        TargetControlID="btnModalPop" >
                                    </ajax:ModalPopupExtender>    
            
        </form>
    </body>
    </html>
     
View Complete Thread