Display TinyMCE editor to textareas after Jquery .load onclick

Question

I am trying to add a TinyMCE WYSIWYG editor to my textareas.

I have a table with a td that the user can click to .load a form with input fields, labels, textareas etc.

My td looks like this:

<a href="#" id="display_info" onclick="displayFacilityInformation(61)">Something</a>

displayFacilityInformation() looks like this:

function displayFacilityInformation (facID){
    $("#facility_details").load("facilitydetails.php?q="+facID);
    $('#facility_details_wrapper').show();
    $("#newaccount_form, #newuser_form, #newfacility_form, #accounts, #facilities, #new_section_form").hide(); //hide other divs

    //tinymce.EditorManager.execCommand('mceAddEditor',true, general_facility_info); //gave me console error "general_facility_info is undefined")

    //tinyMCE.execCommand('mceAddEditor', true, 'general_facility_info');

    //tinymce.init({
        //selector: "textarea"
    //});

    //tinyMCE.execCommand('mceAddEditor', true, 'body');
};

The various things I have tried are commented out. (general_facility_info is the ID of one of the textareas)

facilitydetails.php outputs an HTML form to a div id="facility_details" which has my textarea that I wish to become a tinyMCE editor.

My console is not throwing any errors and I am able to create other textareas that are tinymce editors in other (hidden) forms.

Does it have something to do with adding in elements with Jquery .load?

How can I make the newly added textarea's tinyMCE editors?

Sterling Archer Sterling Archer · Accepted Answer · 2015-06-03T19:00:36

You're loading this data asynchronously. You need to run the init method as a callback for when the load function is done running, otherwise it runs before the textareas have potentially loaded and nothing happens.

See the docs I linked to, where the 3rd optional param is:

complete Type: Function( String responseText, String textStatus, jqXHR jqXHR ) A callback function that is executed when the request completes.

So your method should look more like:

function displayFacilityInformation (facID){
    $("#facility_details").load("facilitydetails.php?q="+facID, function() {
        $('#facility_details_wrapper').show();
        $("#newaccount_form, #newuser_form, #newfacility_form, #accounts, #facilities, #new_section_form").hide(); //hide other divs

        tinymce.init({
            selector: "textarea"
        });
    });
};

Display TinyMCE editor to textareas after Jquery .load onclick

1 Answers