ASP.NET AJAX Discussion and Suggestions

Re: TinyMCE / Ajax Postback Problem

ulfat — Fri, 02 Oct 2009 09:48:44 GMT

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

Re: TinyMCE / Ajax Postback Problem

MeijerMartijn — Fri, 12 Jun 2009 09:32:03 GMT

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

Dave Sussman — Thu, 07 May 2009 14:31:35 GMT

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

forwheeler4 — Tue, 28 Apr 2009 13:20:43 GMT

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

codysechelski — Sun, 15 Mar 2009 00:41:42 GMT

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:

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

lucian.jp — Mon, 16 Feb 2009 18:48:56 GMT

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

Siets — Sun, 10 Feb 2008 19:29:11 GMT

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

steho706 — Tue, 05 Feb 2008 18:25:52 GMT

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

matthewwebster — Thu, 25 Oct 2007 10:35:02 GMT

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!

Re: TinyMCE / Ajax Postback Problem

party42 — Mon, 23 Jul 2007 21:06:51 GMT

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

Re: TinyMCE / Ajax Postback Problem

CodeOdyssey — Fri, 20 Jul 2007 01:14:04 GMT

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

party42 — Sun, 15 Jul 2007 10:57:46 GMT

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

Raymond Wen - MSFT — Fri, 13 Jul 2007 08:26:21 GMT

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:

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

Re: TinyMCE / Ajax Postback Problem

party42 — Mon, 09 Jul 2007 14:15:05 GMT

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

TinyMCE / Ajax Postback Problem

party42 — Mon, 09 Jul 2007 10:22:24 GMT

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 ).

Cheers, Nathan