Search code examples
jqueryckeditorhtml-object

Populating CKEditor's dialog with ajax AND getting response, too


I have a peculiar problem that has to do with CKEditor's dialog. I've managed to embed a php file (containing Datatables) into the dialog window. User can then select a row that will be inserted into CKEditor.

Embedding HTML into dialog window seemed easy:

CKEDITOR.dialog.add( 'tableDialog', function( editor ) {
    return {
        title: 'parametres',
        minWidth: 800,
        minHeight: 500,
        contents: [
            {
                id: 'tab-basic',
                label: 'Basic Settings',
                elements: [
                    {
                    type:"html",
                    id:"htmlPreview",
                    style:"width:95%;height:95%;",
                    html:test_HTML,
                        commit: function( element ) {
etc..

what's funny is, that populating the variable 'test_HTML' is tricky. Defining it as HTML object works perfectly:

test_HTML = '<object type="text/html" data="http://entseditor.etest.ee/edit/mm_insert.php" style="width:100%; height:100%"><p></p></object>';

, doing it with jQuery ajax will fail:

var request = $.ajax({
  url: "http://entseditor.etest.ee/edit/mm_insert.php",
  //type: "POST",
  //data: {id : menuId},
  dataType: "html"
});

request.done(function(msg) {
  //$("#asdasd").html( msg );
    test_HTML =  msg ;
  //alert( 'success' + test_HTML );
});

request.fail(function(jqXHR, textStatus) {
  alert( "Request failed: " + textStatus );
});

(Request is good and gives proper response into id='asdasd', but CKEditor dialog window says: "Uncaught TypeError: Cannot call method 'charAt' of undefined". And still both HTMLs seem identical.)

Now there'd be no problem using the object, but then I can't seem to get the response from created #document. I've tried variables and hidden fields, but they are not accessible from the 'parent' document..

Does anybody have experience with this side of CKEditor?

(I'm sorry if I'm not explaining everything in proper terms..)


Solution

  • It's hard to get the big picture, but it kind of feels like a sync/async issue. Are you accessing the variable surely after it's set? Even if request.done function is declared before CKEDITOR.dialog.add the actual test_HTML = msg ; might be getting called after CKEDITOR.dialog.add is ran due to it being an async call.

    Meaning that while ajax is loading JavaScript keeps running along and performs CKEDITOR.dialog.add so that test_HTML remains undefined. Try to set it to a default value that is 100% surely set before any code accesses it and maby try to follow the flow in which order you code is performed.