0

This question already has an answer here:

I have a problems with wp_editor() . Somewhere in my plugin, i want to dynamically add fields some are basic input, and there is also an editor. I use ajax to add these fields, and all is going as planned except for the editor fields throwing the error :

"Uncaught TypeError: Cannot read property 'canvas' of undefined"

Is there any specific way dealing with wp_editor in ajax request or am i missing something ?

php side :

add_action( 'wp_ajax_add_new_proposition_callback', array(&$this, 'add_new_proposition_callback') );

public function poll_manage()
{
    $nb_prop = 0;
    <form method="post">
    <div class="meta-box-sortables ui-sortable" id="propositionlist">

    </div>
    <input type="button" value="Ajouter une proposition" class="button" id="addnewprop" />
    <input type="hidden" name="nbprop" id="nbprop" value="<?php echo ($nb_prop+1) ?>" />
    </form>
}

public function add_new_proposition_callback()
{
    $prop_id = isset($_POST['prop_id']) ? (int)$_POST['prop_id'] : 1;
    echo '<div class="postbox propositionx" id="propositionx-'.$prop_id.'">
    <h3 class="collapseh" id="p'.$prop_id.'"><span class="collapsiblespan handle"></span>'.$prop_id.' : New proposition</h3>
    <div class="collapsediv" id="eltac'.$prop_id.'">
    <div class="formelt"><label for="propo'.$prop_id.'">Proposition</label>
    <input type="text" id="propo'.$prop_id.'" name="propo'.$prop_id.'" class="thepropo" size="60" value="" /></div>
    <div class="formelt"><label for="descrq'.$prop_id.'">Description</label>';
    wp_editor( '', 'descrq'.$prop_id, array('teeny'=>true, 'editor_class'=>'thepropoc') );
    echo $content.'</div>
    <div class="formelt">Answer
    <ul><li><label><input type="radio" class="open" name="open'.$prop_id.'" value="1"  /> yes</label></li>
    <li><label><input type="radio" class="open" name="open'.$prop_id.'" value="0"  /> no</label></li>
    </ul></div>
    </div><!-- .collapsediv -->
    </div><!-- .propositionx -->
    ';
    die();
}

js side :

...
    $('#addnewprop').click(function(){
        var params = {
            "action": "add_new_proposition_callback",//callback function
            "prop_id": $('#nbprop').val()
        };
        $.ajax({
            data: params,
            type: 'POST',
            url: php_data.ajax_url,
            success: function(data, status) {
                onSuccessAddNewProposition(data);
            }
        });
    });
    function onSuccessAddNewProposition(data){
        $('#propositionlist').append(data);//append proposition
        $('#nbprop').val(parseInt($('#nbprop').val())+1);//update proposition count
    }

Thanks in advance PS: I'm using WP 3.8.2

marked as duplicate by helgatheviking, tfrommen, gmazzap, fuxia Apr 18 '14 at 12:53

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

  • 1
    Duplicates: here and here which were both duplicates of this. Please do a bare minimum of research and/or explain why those questions aren't relevant. Personally, I do cloning TinyMCE editors without ajax, but either way it is tricky. – helgatheviking Apr 18 '14 at 10:13
  • Sorry, you are right. i went to fast asking before using the search bar. These answers didn't pop up when i wrote the title. though. But this is no excuse. – Overdose Apr 18 '14 at 12:07

Browse other questions tagged or ask your own question.