Value is not getting set in CKEditor setData

Question

$(document).on('change', "input[name='child']", function() {
    CKEDITOR.config.contentsCss = 'lib/bootstrap/css/bootstrap.css', 'lib/css/myStyle.css';
    CKEDITOR.config.extraPlugins = 'font';
    var pjID = {};
    var pjDesc = [];
    $("input[name='child']:checked").each(function() {
        pjDesc.push($(this).val());
    });
    if ($(this).prop("checked") == true) {
        pjID.projectsk = $(this).val();            
        $.ajax({
            url: 'sample.php',
            type: 'POST',
            data: pjID,
            success: function(result) {
            var response = JSON.parse(result);                    
            var content = CKEDITOR.instances.projectEditor.getData();         
            CKEDITOR.instances.projectEditor.setData(content + response.data[0].project_desc);            
          },
            error: function(error) {
                console.log(error);
            }
        });
    }
    else if ($(this).prop("checked") == false) {              
        var content = "";
        var contentVal = "";           
        $.each(pjDesc, function(key, val) {
            pjID.projectsk = val;              
            $.ajax({
                url: 'sample.php',
                type: 'POST',
                data: pjID,                    
                success: function(result) {
                    var response = JSON.parse(result);
                    console.log(response);
                    content = response.data[0].project_desc;
                    contentVal = contentVal+"<br>"+content;
                    console.log(contentVal);               
                },
                error: function(error) {
                    console.log(error);
                }

            });
            console.log('contentVal',contentVal);
            CKEDITOR.instances.projectEditor.setData(contentVal);
        });
    }
    CKEDITOR.replace('projectEditor');
});

The above code completely works except for the this line CKEDITOR.instances.projectEditor.setData(contentVal);. I get the exact output in console. But I am not able to set the value in ckeditor. I have tried using insertHtml,insertText and also foocallback(). Kindly help me out

score 0 · Accepted Answer · edited May 23 '17 at 12:09

You have to place following code in success part of ajax. because your line execute first and data comes in variable after it.

 console.log('contentVal',contentVal);
 CKEDITOR.instances.projectEditor.setData(contentVal);

just place above lines below these lines

contentVal = contentVal+"<br>"+content;
console.log(contentVal);

your variable prints on console because of async behavior of ajax and java script. you can follow the post to understand: https://stackoverflow.com/a/23667087/2651863

I ma going to modify your code:

    $(document).on('change', "input[name='child']", function() {
        CKEDITOR.config.contentsCss = 'lib/bootstrap/css/bootstrap.css', 'lib/css/myStyle.css';
        CKEDITOR.config.extraPlugins = 'font';
// its better to initilize CKeditor immidiate after configuration
 CKEDITOR.replace('projectEditor');
        var pjID = {};
        var pjDesc = [];
        $("input[name='child']:checked").each(function() {
            pjDesc.push($(this).val());
        });
        if ($(this).prop("checked") == true) {
            pjID.projectsk = $(this).val();            
            $.ajax({
                url: 'sample.php',
                type: 'POST',
                data: pjID,
                success: function(result) {
                var response = JSON.parse(result);                    
                var content = CKEDITOR.instances.projectEditor.getData();         
                CKEDITOR.instances.projectEditor.setData(content + response.data[0].project_desc);            
              },
                error: function(error) {
                    console.log(error);
                }
            });
        }
        else if ($(this).prop("checked") == false) {              
            var content = "";
            var contentVal = "";           
            $.each(pjDesc, function(key, val) {
                pjID.projectsk = val;              
                $.ajax({
                    url: 'sample.php',
                    type: 'POST',
                    data: pjID,                    
                    success: function(result) {
                        var response = JSON.parse(result);
                        console.log(response);
                        content = response.data[0].project_desc;
                        contentVal = contentVal+"<br>"+content;
                        console.log(contentVal);  
                // set data when actually it arrive
                console.log('contentVal',contentVal);
                CKEDITOR.instances.projectEditor.setData(contentVal);             
                    },
                    error: function(error) {
                        console.log(error);
                    }

                });

            });
        }

    });

Ok Deepak. I understand that is because of asyn behaviour of ajax and javascript. I have placed the code in the success part of ajax, but i dont get the expected output — suna, Feb 17 '17 at 07:03
you are using $ajax within $each loop. using aync calls in loops in not a good approach. you need to debug you code and checks for last updated value. — Deepak Sharma, Feb 17 '17 at 09:37

Value is not getting set in CKEditor setData

1 Answers1