TinyMCE / Ajax Postback Problem

Last post 02-10-2008 2:29 PM by Siets. 8 replies.

Sort Posts:

  • TinyMCE / Ajax Postback Problem

    07-09-2007, 6:22 AM
    • Loading...
    • party42
    • Joined on 04-17-2006, 7:19 PM
    • 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

     

  • Re: TinyMCE / Ajax Postback Problem

    07-09-2007, 10:15 AM
    • Loading...
    • party42
    • Joined on 04-17-2006, 7:19 PM
    • Posts 29

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

  • 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
    • Loading...
    • party42
    • Joined on 04-17-2006, 7:19 PM
    • 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! 

  • Re: TinyMCE / Ajax Postback Problem

    07-19-2007, 9:14 PM
    Answer
    • Loading...
    • CodeOdyssey
    • Joined on 07-20-2007, 12:58 AM
    • Posts 1

    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
    • Loading...
    • party42
    • Joined on 04-17-2006, 7:19 PM
    • Posts 29

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

  • Re: TinyMCE / Ajax Postback Problem

    10-25-2007, 6:35 AM

    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
    • Loading...
    • steho706
    • Joined on 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
    • Loading...
    • Siets
    • Joined on 02-10-2008, 2: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. 


     

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