TinyMCE / Ajax Postback Problem

Rate It (1)

Last post 10-02-2009 5:48 AM by ulfat. 14 replies.

Sort Posts:

  • TinyMCE / Ajax Postback Problem

    07-09-2007, 6:22 AM
    • Member
      34 point Member
    • party42
    • Member since 04-17-2006, 7:19 PM
    • Utrecht
    • Posts 29

    Hiya all,

    I have a page which loads the TinyMCE editor. On the postback I obviously want to fetch that data again but the value stays empty. Strangely enough, when I disable the "updatepanel" control I do get the value. Now, this leaves me puzzled.

    Here's the code (c# from code behind) for the page that reads and writes the TinyMCE text:

    1            private Question _question;
    2 3 protected Question Question
    4 {
    5 get {
    6 if(_question == null)
    7 _question = GuiLayer.SelectQuestion(Convert.ToInt32(Request.QueryString["id"].ToString()));
    8 return _question;
    9 }
    10 }
    11
    12 protected void Page_Load(object sender, EventArgs e)
    13 {
    14 if (!Page.IsPostBack)
    15 {
    16 txtTekst.Text = Server.HtmlDecode(Question.AnswerPrefab);
    17 DataBind();
    18 }
    19 }
    20 21 protected void btnsaveQuestion_Click(object sender, EventArgs e)
    22 {
    23 if (Page.IsValid)
    24 {
    25 ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "init", "InitTiny();", true);
    26 Question.AnswerPrefab = Server.HtmlEncode(txtTekst.Text);
    27 GuiLayer.UpdateQuestion(_question);
    28 }
    29 }

    Here's the corresponding asp.net page:

     

    1    <asp:Content ID="Content1" ContentPlaceHolderID="DefaultPlaceHolder" Runat="Server">
    2 <script src="../../Scripts/tiny_mce/tiny_mce.js" type="text/javascript" language="javascript"></script>
    3 <script type="text/javascript" language="javascript">
    4 tinyMCE.init({
    5 mode : "textareas",
    6 encoding : "xml",
    7 theme : "advanced",
    8 theme_advanced_buttons1 : "bold,italic,underline,separator,strikethrough,justifyleft,justifycenter,justifyright,link,bullist,numlist,undo,redo,code",
    9 theme_advanced_buttons2 : "",
    10 theme_advanced_buttons3 : "",
    11 theme_advanced_toolbar_location : "top",
    12 theme_advanced_toolbar_align : "left",
    13 theme_advanced_path_location : "bottom",
    14 theme_advanced_resize_horizontal : false,
    15 theme_advanced_resizing : true,
    16 apply_source_formatting : true,
    17 extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]"
    18 });
    19
    20 function InitTiny()
    21 {tinyMCE.execCommand('mceAddControl', false, '<%# txtTekst.ClientID %>');}
    22 </script>
    23 <h3>ManageQuestion</h3>
    24 <p><asp:textbox runat="server" id="txtTekst" width="100%" textmode="multiLine" columns="80" rows="15" /></p>
    25 <br />
    26 <asp:button runat="server" id="btnSave" text="Save" onclick="btnsaveQuestion_Click" />
    27  
    28 <asp:button runat="server" id="btnBack" text="Back" postbackurl="~/Pages/Admin/ManageSurvey.aspx" />
    29
    30 </asp:Content>


    any help would be appreciated (obviously Wink ).

    Cheers, Nathan

     

    Regards,
    Nathan Brouwer

    http://www.nathanbrouwer.nl
  • Re: TinyMCE / Ajax Postback Problem

    07-09-2007, 10:15 AM
    • Member
      34 point Member
    • party42
    • Member since 04-17-2006, 7:19 PM
    • Utrecht
    • Posts 29

    ok, did some more testing, apparantly its a Firefox-only issue. The page works fine in Internet Explorer (7). 

    Regards,
    Nathan Brouwer

    http://www.nathanbrouwer.nl
  • Re: TinyMCE / Ajax Postback Problem

    07-13-2007, 4:26 AM
    Answer

    Hi Nathan,

    I'm not familiar with tinyMCE, but it seems it's not compatible with UpdatePanel.

    I think you can use javascript to copy all contents in it to a hiddenfield when the page is about to be posted. Then, retrieve the contents from the HiddenField rather from the control itself.

    For instance:

    <input type="submit" onclick="$get('hf').value = $get('id of tinyMCE').value"> 

    <input type="hidden" id="hf" />

     

    If this still doesn't work, I'd suggest contacting the vendor of the control for more help. 

     

  • Re: TinyMCE / Ajax Postback Problem

    07-15-2007, 6:57 AM
    • Member
      34 point Member
    • party42
    • Member since 04-17-2006, 7:19 PM
    • Utrecht
    • Posts 29

    Hi Raymond,


    You're right, that probably would have fixed it too. Right now I'm opening up the edit panel in a newwindow. Its a workaround but hey, it works. Maybe it'll be fixed in either the next version of TinyMCE or the updatepanel!

     

    cheers! 

    Regards,
    Nathan Brouwer

    http://www.nathanbrouwer.nl
  • Re: TinyMCE / Ajax Postback Problem

    07-19-2007, 9:14 PM
    Answer
    • Member
      24 point Member
    • CodeOdyssey
    • Member since 07-20-2007, 12:58 AM
    • Posts 2

    TinyMCE and UpdatePanels are really hard to use together. In Firefox especially.

    I've done a working example on my blog with the whole project in C# as zip-file. A reader  also translated it into VB.NET. Been testen in IE7, FF2 and Opera.

    I found the solution to get the values posted with a javascript-function on a forum, like this.

    function SaveMyPreciousValues()
    {
    tinyMCE.triggerSave(false,true);
    TextBox1 = document.getElementById('TextBox1');
    alert('Check value when posting: '+ TextBox1.value)
    }

    Then attach it to the button OnClientClick="SaveMyPreciousValues();"

    Read about it here: 

    http://codeodyssey.com/blog.aspx?id=334

    And in Swedish:

    http://codeodyssey.se/blog.aspx?id=334

    Hope this can help you.

  • Re: TinyMCE / Ajax Postback Problem

    07-23-2007, 5:06 PM
    • Member
      34 point Member
    • party42
    • Member since 04-17-2006, 7:19 PM
    • Utrecht
    • Posts 29

    Cheers, I'll look into that! Thanks for the help! 

    Regards,
    Nathan Brouwer

    http://www.nathanbrouwer.nl
  • Re: TinyMCE / Ajax Postback Problem

    10-25-2007, 6:35 AM
    • Participant
      1,260 point Participant
    • matthewwebster
    • Member since 09-18-2003, 7:56 PM
    • London
    • Posts 324

    Hi,

    Did you get answer results from your work?  I'm fighting this problem myself right now.  I'm using:

    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(TinyMCE_<%# ClientID %>);

    function TinyMCE_<%# ClientID %>(sender, args) {
    tinyMCE.init({
    blah...
    }

    But this does not appear to restyle the control properly!

    This post with no guarantees associated, being a personal submittal with no affiliation intended or implied.
    <mc:WittyRemark runat="server" id="wr1" />
  • Re: TinyMCE / Ajax Postback Problem

    02-05-2008, 1:25 PM
    • Member
      2 point Member
    • steho706
    • Member since 02-05-2008, 5:41 PM
    • Posts 1

    Hi!

    Have found a solution to your problem? After more than day searching for an acceptable solution, I found this approach working for me!

    1. Initialize the editor as you would do when you don't use a UpdatePanel with tinyMCE.init(...);
    2. Set the button's OnClientClick property to UpdateTextArea. This function updates the teaxtarea with the tinyMCE values from the IFrame before the values are posted.

    function UpdateTextArea()
    {

        tinyMCE.saveTrigger(false, true); 

    }


    3. Unload tinyMCE editor before the async post to server. If I don't unload the editor, i receive the error "this.getDoc() has no properties". Unload the editor with a function that is attached to the beginRequest event. Use
    Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler).

        function BeginRequestHandler(sender, args)
        {
            // Fix to make tinyMCE work with UpdatePanel

            var elem = args.get_postBackElement();
            if (elem.id == '<%= ibSave.ClientID %>') // Only the button unloads the editor
            {

                // Check that there is an instance to remove
                if (tinyMCE.getInstanceById('<%= tbContent.ClientID %>') != null && tinyMCE.getInstanceById('<%= tbContent.ClientID %>') != "undefined")
                {
                    tinyMCE.execCommand('mceFocus', false, '<%= tbContent.ClientID %>');   
                    tinyMCE.execCommand('mceRemoveControl',false,'<%= tbContent.ClientID %>');
                }
            }
        }
     

    4. Save the posted values on the server and capture the endrequest event with Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler)

        function EndRequestHandler(sender, args)
        {

           // Ensure that the editor is not loaded
           if (tinyMCE.getInstanceById('<%= tbContent.ClientID %>') == null || tinyMCE.getInstanceById('<%= tbContent.ClientID %>') == "undefined")
           {
               tinyMCE.execCommand('mceAddControl',false,'<%= tbContent.ClientID %>');
           }
        }

     Hope this info will help you!

     

    /Stefan 

  • Re: TinyMCE / Ajax Postback Problem

    02-10-2008, 2:29 PM
    • Member
      4 point Member
    • Siets
    • Member since 02-10-2008, 7:23 PM
    • Posts 3

    Hello.

     

    Cheers for that post steho706.

    I have worked a bit more with it and made an AJAX Extender - which extends the basics of your posting a bit more. Code is also available.

    http://weblog.e-agora.nl/cdevos/?p=4
    http://weblog.e-agora.nl/cdevos/wp-content/uploads/2008/02/tinymcetextbox.zip

    In essence all you need to do is

    1    <asp:TextBox ID=”TextBox1″ runat=”server” Width=”100%” Height=”200″ TextMode=”MultiLine” />
    2    <cc:TinyMCETextBoxExtender TargetControlID=”TextBox1” ID=”TinyMCETextBoxExtender1″ runat=”server” />
    
     


    So no more worries about this editor. Feel free to add to the project.

    Regards,

    CJ. 


     

  • Re: TinyMCE / Ajax Postback Problem

    02-16-2009, 1:48 PM
    • Member
      55 point Member
    • lucian.jp
    • Member since 08-08-2006, 8:42 PM
    • Posts 20

    Link is down for download, any mirrr somewhere?

    Thx

    **EDIT**

    Found one at : http://weblogs.asp.net/blogs/cjdevos/downloads/tinymcetextboxextender/tinymcetextbox.zip

  • Re: TinyMCE / Ajax Postback Problem

    03-14-2009, 8:41 PM
    • Member
      351 point Member
    • codysechelski
    • Member since 11-05-2007, 6:03 PM
    • Plano, Texas
    • Posts 88
    Wow, I was "this close" to giving up and ditching the whole astnc piece on this project til I found this post. Thanks steho706!

     I di have to make on minor twaek. When I tried to call

     

    tinyMCE.saveTrigger(false, true);

     I got an error saing that the method does not support that property. and it was not sending the text back to the text area

    I popedopen the tinyMCE script file and dida search for that method but couldn't find it. I'm guessing that it's just a newer version of tinyMCE. I'm using tinymce_3_2_1_1.  I did find a method called

    triggerSave

    that takes no args.I'll confess that the JS in this file is over my head, but I thought I would give it a try and it worked!

    Not sure if there is a better way, but it's working and I'm not complaining.

    I tested it in IE 7.0.6001.18000, Firefox 3.0.7, Chrome 1.0.154.48 and Opera 9.64

    Here is the complete script block I'm using:

     

    <script type="text/javascript">

    document.getElementById('<%= NameTextBox.ClientID %>').value = "Test from " + _browserName + " " + _browserVer; //just for testing - ignore this

    document.getElementById('<%= EmailTextBox.ClientID %>').value = "test.test@test.test"; //just for testing - ignore this

    function syncTinyMCE() { //SendLinkButton ClientClickEvent

    tinyMCE.triggerSave();

    }

    Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);

    function BeginRequestHandler(sender, args) {

    // Fix to make tinyMCE work with UpdatePanel --- steho706 is a freakin genius!

    var elem = args.get_postBackElement();

    if (elem.id == '<%= SendLinkButton.ClientID %>') // Only the button unloads the editor

    {

    // Check that there is an instance to remove --- steho706 is a freakin genius!

    if (tinyMCE.getInstanceById('<%= BodyTestBox.ClientID %>') != null && tinyMCE.getInstanceById('<%= BodyTestBox.ClientID %>') != "undefined") {

    tinyMCE.execCommand('mceFocus', false, '<%= BodyTestBox.ClientID %>');

    tinyMCE.execCommand('mceRemoveControl', false, '<%= BodyTestBox.ClientID %>');

    }

    }

    }

    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

    function EndRequestHandler(sender, args) {

    // Ensure that the editor is not loaded --- steho706 is a freakin genius!

    if (tinyMCE.getInstanceById('<%= BodyTestBox.ClientID %>') == null || tinyMCE.getInstanceById('<%= BodyTestBox.ClientID %>') == "undefined") {tinyMCE.execCommand('mceAddControl', false, '<%= BodyTestBox.ClientID %>');

    }

    }

    </script>

  • Re: TinyMCE / Ajax Postback Problem

    04-28-2009, 9:20 AM
    • Member
      8 point Member
    • forwheeler4
    • Member since 10-03-2007, 6:33 PM
    • Posts 18

    I am trying to use steho706's code and it works for the first callback but if I save the page again I get a permission denied error in the tiny_mce js. Is there a workaround for this error?

  • Re: TinyMCE / Ajax Postback Problem

    05-07-2009, 10:31 AM
    • All-Star
      16,809 point All-Star
    • Dave Sussman
    • Member since 06-17-2002, 11:53 AM
    • UK
    • Posts 2,333
    • TrustedFriends-MVPs

    I've spent most of the day trying to sort out the same problem and have come up with simple solution. My editor is in a form that has two modes: readonly and edit/insert, so I add and remove the tinyMCE editor dynamically; I only need it in the edit/insert mode. Eg:

            var notesID = "<%=NoteDetails.ClientID%>";

            Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);


            function pageLoaded(sender, args) {
                var currentMode = document.getElementById('<%=CurrentMode.ClientID%>');
                
                switch(currentMode.innerHTML) {
                case 'view':
                    removeEditor();
                    break;
                case 'edit':
                    initialiseEditor();
                    break;
                case 'new':
                    initialiseEditor();
                    break;
                }
            }

            function initialiseEditor() {
                tinyMCE.init({
                    mode: "exact"
                    , elements: notesID
                    , theme: "advanced"
                    , theme_advanced_toolbar_location: "top"
                    , theme_advanced_toolbar_align: "left"
                    , theme_advanced_buttons1: "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,formatselect,fontselect,fontsizeselect|,help"
                    , theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,code,|,insertdate,inserttime,preview,|,forecolor,backcolor"
                    , theme_advanced_buttons3: ""
                    , plugins: "inlinepopups"
                    , dialog_type: "modal"
                });
            }

            function removeEditor() {
                if (tinyMCE.getInstanceById(notesID) != null && tinyMCE.getInstanceById(notesID) != "undefined")
                    tinyMCE.remove(tinyMCE.getInstanceById(notesID));
            }

    This works well for me since I also need to run other script when the mode switches (removed from the above code for clarity), so ties in neatly. The CurrentMode element is simply a Label control set in server code.

  • Re: TinyMCE / Ajax Postback Problem

    06-12-2009, 5:32 AM
    • Member
      2 point Member
    • MeijerMartijn
    • Member since 06-12-2009, 9:12 AM
    • Posts 1

    This did the trick for me.

    I used this script:

     
    
    <script type="text/javascript">
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);
    Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequestHandler);
    
    function endRequestHandler(sender,args)
    {
        tinyMCE.idCounter=0;
        tinyMCE.execCommand('mceAddControl',false,'htmlContent');
    }
    
    function beginRequestHandler(sender,args)
    {
    }
    
    function UpdateTextArea()
    { 
        tinyMCE.triggerSave(false,true);
    }
    
     

    Because I used an ASP.NET button on my page, I had to add this in the page_load of my form:

      

        protected void Page_Load(object sender, EventArgs e)
        {
            Button1.Attributes.Add("onclick", "UpdateTextArea()");
        }
     
  • Re: TinyMCE / Ajax Postback Problem

    10-02-2009, 5:48 AM
    • Member
      8 point Member
    • ulfat
    • Member since 03-17-2008, 7:50 AM
    • Pakistan
    • Posts 6

    Hi  "MeijerMartijn"

       Thanks a lot for such a simle solution.

       I had just copied and pasted your scipt and it started working for me.


      Thanks again.


    Regards

    Ulfat Hussian



    Ulfat Hussain
Page 1 of 1 (15 items)