1

Topic: problem with a form created with ajax

I have a php file with the declaration of tinyMCE

        <SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
        tinyMCE.init(
        {
            mode: "none",
            theme : "advanced",
            plugins : "print",
            theme_advanced_toolbar_location : "top",
            theme_advanced_toolbar_align : "left",
            theme_advanced_path_location : "bottom",
            theme_advanced_resize_horizontal : false,
            theme_advanced_resizing : true,
            auto_reset_designmode : true,
             width : "600"
        }
        </SCRIPT>

Then I press a button and a form appear via ajax with a textarea inside. Then I invoke this command to load tinyMCE in the textarea.

               tinyMCE.execCommand("mceAddControl", true, "descripcion");

At this point, all is OK. If I press the submit button I get the content of tinyMCE with -> tinyMCE.getContent("descripcion"); and I save the content in a database.

But, if I click two times the the button to load with ajax the form and then I press the submit button, tinyMCE gives me an error "this.getDoc() has no properties". I don't know what to do. I have try all I have seen in docs, examples, etc.

Somebody can help me with this?

2

Re: problem with a form created with ajax

Do you have a example URL or document where this is happening?
What AJAX library are you using, is prototype.js part of it?

Best regards,
Spocke - Main developer of TinyMCE

3

Re: problem with a form created with ajax

I'm using scriptaculous.

----------------------------------------------------------------------------------------------------------------------------------------------------------------
This is an extract from the javascript file
----------------------------------------------------------------------------------------------------------------------------------------------------------------
function formularioRSS(id)
{
    if(!id)
        id = "";

    new Ajax.Updater("formularioRSS", "administracionRSS/ajaxU_formulario/" + id,
    {
        asynchronous: true,
        method: "get",
        onComplete: function()
        {
            document.getElementById("tituloFormulario").innerHTML = "Nuevo item RSS";
            new Effect.Appear("formularioRSS");
            tinyMCE.execCommand("mceAddControl", true, "descripcion");
        }
    })
}
----------------------------------------------------------------------------------------------------------------------------------------------------------------
This is an extract from the tpl file (smarty)
----------------------------------------------------------------------------------------------------------------------------------------------------------------
                <INPUT TYPE="button" CLASS="aceptar" VALUE="{$NUEVO_RSS}" onClick="javascript:formularioRSS();" />
        <DIV ID="formularioRSS" STYLE="display:visible;">
        </DIV>
        <SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
        tinyMCE.init(
        {literal}{{/literal}
            mode: "none",
            theme : "advanced",
            plugins : "print",
            theme_advanced_buttons1 : "copy,paste,separator,fontselect,fontsizeselect,bold,italic,underline,separator,strikethrough,justifyleft,justifycenter,justifyright, justifyfull,bullist,numlist,undo,redo,link,unlinkcut,separator,print",
            theme_advanced_buttons2 : "",
            theme_advanced_buttons3 : "",
            theme_advanced_toolbar_location : "top",
            theme_advanced_toolbar_align : "left",
            theme_advanced_path_location : "bottom",
            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]",
            theme_advanced_resize_horizontal : false,
            theme_advanced_resizing : true,
            auto_reset_designmode : true,
             width : "600"
        {literal}}{/literal});   
        </SCRIPT>
            <A NAME="formulario">
            <DIV ID="creacionRSS" CLASS="tab">
                <H1 ID="tituloFormulario"></H1>
                <DIV ID="cargador2" CLASS="cargador">
                <DIV CLASS="a_tab">
                    <FORM ACTION="administracionRSS" METHOD="post" ENCTYPE="text/plain">
                        <TABLE WIDTH="100%" CELLPADDING="4" CELLSPACING="1" BORDER="0" ALIGN="center" CLASS="tipo1">
                            <TR><TD CLASS="fila1"><IMG SRC="temas/{$_cmsTema}/imagenes/icono_03.png" WIDTH="9" HEIGHT="9" ALT="icono" /> {$TITULO_RSS}</TD></TR>
                              <TR><TD CLASS="fila1"><INPUT TYPE="text" NAME="titulo" ID="titulo" SIZE="115" VALUE="{$titulo_rss}" /></TD></TR>
                              <TR><TD CLASS="fila1"><IMG SRC="temas/{$_cmsTema}/imagenes/icono_03.png" WIDTH="9" HEIGHT="9" ALT="icono" /> {$DESCRIPCION_RSS}</TD></TR>
                              <TR><TD CLASS="fila1"><TEXTAREA NAME="descripcion" ID="descripcion" ROWS="15">{$descripcion_rss}</TEXTAREA></TD></TR>
                              <TR><TD CLASS="fila1"><IMG SRC="temas/{$_cmsTema}/imagenes/icono_03.png" WIDTH="9" HEIGHT="9" ALT="icono" /> {$ENLACE_RSS}</TD></TR>
                              <TR><TD CLASS="fila1"><INPUT TYPE="text" NAME="enlace" ID="enlace" SIZE="115"  VALUE="{$enlace_rss}" /></TD></TR>
                              <TR><TD CLASS="fila1"><IMG SRC="temas/{$_cmsTema}/imagenes/icono_03.png" WIDTH="9" HEIGHT="9" ALT="icono" /> {$TIPO_RSS}</TD></TR>
                              <TR><TD CLASS="fila1">{html_options name="tipos" id="tipos" values=$tipos output=$tipos selected=$tipo_rss}</TD></TR>
                              <TR><TD CLASS="fila1"><IMG SRC="temas/{$_cmsTema}/imagenes/icono_03.png" WIDTH="9" HEIGHT="9" ALT="icono" /> {$FECHA_PUBLICACION_RSS}</TD></TR>
                              <TR><TD CLASS="fila1">{html_select_date start_year="-1" end_year="+1" day_extra="id='Date_Day'" month_extra="id='Date_Month'" year_extra="id='Date_Year'" time=$fecha_rss field_order="DMY"} / {html_select_time hour_extra="id='Time_Hour'" minute_extra="id='Time_Minute'" second_extra="id='Time_Second'" time=$hora_rss}</TD></TR>
                              <TR><TD><INPUT TYPE="button" VALUE="{$GUARDAR}" CLASS="aceptar" onClick="guardarRSS();" /></TD></TR>
                          </TABLE>
                          <INPUT TYPE="hidden" NAME="id" ID="id" VALUE="{$id_rss}" />
                      </FORM>
                  </DIV>
                  </DIV>
                <DIV CLASS="b_tab"></DIV>
            </DIV>
----------------------------------------------------------------------------------------------------------------------------------------------------------------

The problem appear when I press two times the first button and then I try to submit the form.

4

Re: problem with a form created with ajax

I'm using the gzip version for php, maybe this help you

5

Re: problem with a form created with ajax

I have same problem.
Any ideas?

6

Re: problem with a form created with ajax

First: sorry for my english smile)
Second: I wrote this function witch inits mce to all textareas. It works only after ajax set innerHtml value.

function mceAddControlToAllTextareas() {
   
    var textarea_num = document.getElementsByTagName("textarea").length
    var textarea;
   
    for (var i = 0; i <= textarea_num; i++)    {       
       
        textarea = document.getElementsByTagName("textarea")[i];
        if (textarea != null)    {
            tinyMCE.execCommand("mceAddControl", false, textarea.id);
        }
    }
}

7

Re: problem with a form created with ajax

hey i have the same problem.
i am using my own javascript ajax funtions.
i have a page which initializes tinymce. when the page with the textarea is loaded a function is called to tell tinymce which textarea to use: tinyMCE.execCommand("mceAddControl", false, editorid);
this all works fine, but if i reload the ajax loaded website by clicking the button again the editor cant be loaded and it says "this.getDoc() has no properties".

If you want to, I can give you access to the website and you can see it on your own.

kind regards,
Chris

8

Re: problem with a form created with ajax

me too, neon ... i'm getting the same this.getDoc() error ... using firefox 1.5 mac ... please post again if you figure this out

9

Re: problem with a form created with ajax

well, i think i've hacked around enough to get the functionality i was going for ...

after the new form is loaded in via AJAX and then an innerHTML assignment:

// add tinyMCE control to all textareas
var tas = pane.getElementsByTagName('textarea');
for(var i = 0; i < tas.length; i++) {
    var ta = tas[i];
    tinyMCE.execCommand('mceAddControl', false, ta.id);
}

all or those editors have a display:none style, so when they're revealed:

// reset any enclosed textareas
var tas = ex.getElementsByTagName('textarea');
for(var i = 0; i < tas.length; i++) {
    var ta = tas[i];
    tinyMCE.execCommand('mceResetDesignMode', false, ta.id);
}

and finally, the part that was stumping me before, avoiding the getDoc() error that was happening when i called triggerSave():

// manually save the tinyMCE content for each textarea
var tas = document.getElementsByTagName('textarea');
for(var i = 0; i < tas.length; i++) {
    // snag the textarea
    var ta = tas[i];
    // put focus in the editor
    tinyMCE.execInstanceCommand(ta.id, 'mceFocus');
    // manually save the content
    ta.value = tinyMCE.getContent();
}

i'm keeping my fingers crossed that i don't realize this actually doesn't solve the problem in five minutes ...

Last edited by lusallry (2006-04-13 08:09:42)

10

Re: problem with a form created with ajax

FUCK... i am really that stupid?
all of you, who have the same problem (as i described 2 posts above and the topic is about):
did anyone of you use this function to fix the ajax loaded textarea problem:

    var tinyMCEmode = true;
    function toogleEditorMode(sEditorID) {
        try {
            if(tinyMCEmode) {
                tinyMCE.execCommand("mceRemoveControl", false, sEditorID);
                tinyMCEmode = false;
            } else {
                tinyMCE.execCommand("mceAddControl", false, sEditorID);
                tinyMCEmode = true;
            }
        } catch(e) {
            //error handling

from the TinyMCE wiki?

11

Re: problem with a form created with ajax

Thank you very much for your ideas. I have written a post about it in my blog, solving the "getDoc()" problem with a different hack

12

Re: problem with a form created with ajax

This problem is solved very easily. You just have to reset TinyMCE's counter after each edit. Or better logically - before each edit wink
Something like this:

    tinyMCE.idCounter=0;
    tinyMCE.execCommand('mceAddControl', true, 'editor_content');

13

Re: problem with a form created with ajax

maahacka wrote:

This problem is solved very easily. You just have to reset TinyMCE's counter after each edit. Or better logically - before each edit wink
Something like this:

    tinyMCE.idCounter=0;
    tinyMCE.execCommand('mceAddControl', true, 'editor_content');

This doesn't solve the problem when you have several editors loading dynamically one after another (on different forms)

14

Re: problem with a form created with ajax

i ve the same... and in dinamically cases tiny doesnt work correctly with tinyMCE.idCounter=0;
please someone already found where is the problem?