Reloading OK in Firefox, buggy in IE and WebKit

I was impressed with CKFinder, so I created a simple CMS with CKEditor. By means of Ajax I'm (re)loading the content of the text area. Upon opening, everything goes well, but when I want to load another text file, it gets rather buggy in IE(9), and terribly buggy in WebKit. In IE9, the previously loaded file is sometimes not replaced, and in Chrome, that is usually the case.

In Firefox on the other hand, the reloading works like a charm, and I'm not getting any error reports in any browser. Also, the console shows that the Ajax calls are correct. This is the code of the whole page with the editor, including the Ajax and reloading scripts:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Conijn Webdesign - Bijwerkmodule</title>
    <script src="ckeditor/ckeditor.js"></script>
<style>
html {
    overflow-y: hidden;
}
#extraControls {
    display: block;
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 9999; /* the editor has 9995 */
}
.touchScreen #extraControls {
    padding-top: 4px;
}
#uploader {
    height: 28px;
    padding-right: 8px;
    margin: 5px 0 0;
    background: #FEFEFD;
    background: linear-gradient(top, #FEFEFD, #F6F1E9);
    background: -moz-linear-gradient(top, #FEFEFD, #F6F1E9);
    background: -o-linear-gradient(top, #FEFEFD, #F6F1E9);
    background: -webkit-linear-gradient(top, #FEFEFD, #F6F1E9);
    background: -webkit-gradient(linear, left top, left bottom, from(#FEFEFD), to(#F6F1E9));
    background: -ms-linear-gradient(top, #FEFEFD, #F6F1E9);
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#FEFEFD,EndColorStr=#F6F1E9);
    zoom: 1;
    border: 1px solid #C0C0C0;
    border-radius: 3px;
    font: normal 12px Arial;
}
#uploader span {
    font: bold 17px Arial;
}
#uploader:hover {
    background: #F6EEE5;
    filter: none;
}
#fileSelector {
    padding: 4px;
    width: 150px;
    margin-top: 1px;
}
</style>
</head>
<body>
    <form name="theForm">
        <textarea name="editor1" id="editor1">
            <p>Selecteer een bestand om bij te werken, rechtsboven.</p>
        </textarea>
        <div id="extraControls">
            <select name="fileSelector" id="fileSelector" onchange="reloadEditor()">
                <option value="default.html"> Selecteer bestand </option>
                <option value="introductie.html" selected="selected"> Introductie </option>
                <option value="kwaliteitseisen.html"> Kwaliteitseisen </option>
            </select>
                <br>
            <button type="button" id="uploader" title="Opslaan op de server" onclick="document.location.reload()"><span>⇑</span>  Uploaden</button>
        </div>
    </form>
    <script>
    window.base = '/Websites/ConijnWebdesign/ckeditor/ckfinder/';
    function createEditor() {
        var editor = CKEDITOR.replace('editor1',
            {
                language: 'nl',
                uiColor: '#E3CEB5'
            }
        );

        function loadFile() {
            var file = theForm.elements['fileSelector'].value;
            var time = (new Date().getTime());
            var ajaxRequest = new XMLHttpRequest();
            ajaxRequest.onreadystatechange = function() {
                if (ajaxRequest.readyState == 4 && ajaxRequest.status == 200) {
                    theForm.editor1.value = ajaxRequest.responseText;
                }
            }
            ajaxRequest.open('GET','ckeditor/ckfinder/userfiles/tekstbestanden/'+file+'?time='+time,true);
            ajaxRequest.send();
            //console.log(file);
        }
        loadFile();
    }
    createEditor();

    function reloadEditor() {
        CKEDITOR.instances.editor1.destroy();
        createEditor();
    }
    </script>
</body>
</html>

My first and principle question is: is my code correct? And the second question is: if it is correct, is there a way to improve the functioning in IE and Chrome? I've already tried 'setTimeout' to create a delay between the destruction and recreation of the editor, but that is no cure. Neither is the addition of 'delete CKEDITOR.instances.editor1;' to the function 'reloadEditor', in between the descruction and the recreation of it.

I'm using CKEditor 4.4.3 Standard, FF30, Chrome35 and IE9.

Thanks in advance for trying to help out.

Sat, 07/26/2014 - 19:54

frankc

Joined: 08/10/2011

Posts: 6

I tried to edit my original

I tried to edit my original post, but I got an alert that that attempt was seen as spam(???), so I'm adding some more info this way.

I also tried putting the function loadFile at the top of the function createEditor, so (just) before the creation of the CKEditor. But although that did seem to improve matters in IE (I would need to do some more testing to be sure, because the errors in IE loading were very unpredictable), it did not improve matters in Chrome at all. Still largely erronous or simply non-loading.

Mon, 07/28/2014 - 16:52

frankc

Joined: 08/10/2011

Posts: 6

Resolved

The problem has been solved. After changing the content loading method from Ajax to PHP, things are now working well.