We Keep Coding

how to change ckeditor value by javascript

my textarea is:
<textarea class="content" name="content" id="content" rows="10" cols="80"></textarea>
and initializing it as:
<script>
$(document).ready(function(){
///CKeditor
CKEDITOR.replace( 'content', {
height: 320,
} );
});
</script>
now i am getting data in an array and then changing the values of different elements according to it. the array that i am getting is:
[{"id":"5","subject_Id":"1","topic_id":"1","question_type_id":"4","exam_id":"1","difficulty_id":"1","year_id":"1","essay":"","right_marks":"2","negative_marks":"3","question":"question 2","options":"Ans CC~Ans BB~Ans AA~","correct_answer":"Ans BB~"}]
[{"id":"6","subject_Id":"1","topic_id":"1","question_type_id":"4","exam_id":"1","difficulty_id":"1","year_id":"1","essay":"","right_marks":"2","negative_marks":"3","question":"question 1","options":"<img alt=\"\" src=\"\/corePhp\/examinationsystem\/assets\/ckeditor\/kcfinder\/upload\/images\/profile-icon-9(1).png\" style=\"height:512px; width:512px\" \/>~Ans BB~Ans AA~","correct_answer":"Ans BB~"}]
[{"id":"18","subject_Id":"1","topic_id":"1","question_type_id":"1","exam_id":"1","difficulty_id":"1","year_id":"2","essay":"Essay 5","right_marks":"2","negative_marks":"3","question":"Brass gets discoloured in air because of the presence of which of the following gases in air?","options":"Oxygen~Hydrogen sulphide~Carbon dioxide~Nitrogen","correct_answer":"\"Hydrogen sulphide\""}]
then in my javascript
<script type="text/javascript">
function dbDataQuestion(quesId) {
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState === 4 && xmlhttp.status === 200)
{
var convert=JSON.parse(xmlhttp.responseText);
//console.log(convert[0].subject_Id);
document.getElementById("selectSubject").value=convert[0].subject_Id;
document.getElementById("selectTopic").value=convert[0].topic_id;
document.getElementById("selectQuestionType").value=convert[0].question_type_id;
document.getElementById("selectExam").value=convert[0].exam_id;
document.getElementById("selectYear").value=convert[0].year_id;
document.getElementById("selectDiffLvl").value=convert[0].difficulty_id;
document.getElementById("txtRightMarks").value=convert[0].right_marks;
document.getElementById("txtNegMarks").value=convert[0].negative_marks;
console.log(convert[0].question_type_id);
console.log(convert[0].question);
CKEDITOR.on("instanceReady", function(event)
{
//CKEDITOR.instances.content.insertHtml(convert[0].question);
CKEDITOR.instances.content.focus();
CKEDITOR.instances.content.setData(convert[0].question);
});
if(convert[0].essay){
document.getElementById("txtEssayName").value=convert[0].essay;
document.getElementById("radioEssayYes").checked = true;
}
else{
document.getElementById("txtEssayName").value=convert[0].essay;
document.getElementById("radioEssayNo").checked = true;
}
}
}
xmlhttp.open("POST","process/questions/quesDetails.php?quesId="+quesId, false);
xmlhttp.send();
}
</script>
as you can see i am consoling console.log(convert[0].question); in which i am getting correct data, but when i am writing CKEDITOR.instances.content.setData(convert[0].question); its not updating ck editor's value.
actually the function "dbDataQuestion(quesId)" is being called once at the time of page load at that time its working fine the CKEditor is showing question 2 which you can see is in the first array, after that I have a button on which I am getting the next array and so on. on clicking this button array is getting displayed in the console as well as other element are changing its values but CKEditor is showing the same old value that is question 1 and not question 2 on consoling console.log(convert[0].question); I am getting "question 2" which is correct.
Note: function dbDataQuestion(quesId) is where from where i am getting above mentioned array and on xmlhttp.readyState === 4 && xmlhttp.status === 200 of the function i am changing the values of the elements which includes ck editor. its once called at the time of page load and then its being called on a button click:
<button type="button" class="btn btn-xs btn-success" onclick="fetchQuestionDetails('next')">Next</button>
I am calling all my scripts at the bottom of the page.
thanks in advance.
Update:
I noticed that instanceReady event is not getting triggered by calling the function when the button is pressed. I altered my code to check
console.log(convert[0].question);
CKEDITOR.on("instanceReady", function(event)
{
console.log(convert[0].question);
console.log("sss");
CKEDITOR.instances.content.focus();
CKEDITOR.instances.content.setData(convert[0].question);
});
only console.log(convert[0].question); is getting triggered and none of the other console statements. What am I doing wrong?

first thanks a lot #Muhammad Omer Aslam for responding, so quickly. i have not tried your answer but i ll try it and comment if it solved the problem or not but i found a way to make it work i removed instanceReady event and wrote
setTimeout(function(){
CKEDITOR.instances.content.setData(convert[0].question);
}, 1000);
and its working fine. but again thanks #Muhammad Omer Aslam

try it the following way by moving the initialization inside the ajax response section.
$(document).ready(function () {
dbDataQuestion(quesId);
});
Your function will look like this.
function dbDataQuestion(quesId) {
var xmlhttp;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
var convert = JSON.parse(xmlhttp.responseText);
//console.log(convert[0].subject_Id);
document.getElementById("selectSubject").value = convert[0].subject_Id;
document.getElementById("selectTopic").value = convert[0].topic_id;
document.getElementById("selectQuestionType").value = convert[0].question_type_id;
document.getElementById("selectExam").value = convert[0].exam_id;
document.getElementById("selectYear").value = convert[0].year_id;
document.getElementById("selectDiffLvl").value = convert[0].difficulty_id;
document.getElementById("txtRightMarks").value = convert[0].right_marks;
document.getElementById("txtNegMarks").value = convert[0].negative_marks;
console.log(convert[0].question_type_id);
console.log(convert[0].question);
///CKeditor
CKEDITOR.replace('content', {
height: 320,
});
CKEDITOR.on("instanceReady", function (event) {
//CKEDITOR.instances.content.insertHtml(convert[0].question);
CKEDITOR.instances.content.focus();
CKEDITOR.instances.content.setData(convert[0].question);
});
if (convert[0].essay) {
document.getElementById("txtEssayName").value = convert[0].essay;
document.getElementById("radioEssayYes").checked = true;
} else {
document.getElementById("txtEssayName").value = convert[0].essay;
document.getElementById("radioEssayNo").checked = true;
}
}
}
xmlhttp.open("POST", "process/questions/quesDetails.php?quesId=" + quesId, false);
xmlhttp.send();
}

Ajax weird behavior in IE8

Here's the code I use to ajax more reviews:
function showMoreReviews(str) {
var counter = Number($('#counter').val());
var xmlhttp;
if (str == "") {
document.getElementById("reviews").innerHTML = "";
return;
}
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
counter = counter + 10;
$('#counter').attr({ value: counter });
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//document.getElementById("reviews").innerHTML = xmlhttp.responseText;
$("#reviews").append("<div id='rnum" + counter + "'>" + xmlhttp.responseText + "</div>");
$("#rnum" + counter).hide().fadeIn(800);
}
}
console.log(str);
console.log(counter);
xmlhttp.open("GET", "/MoreReviewsAjax.asp?ml=" + str + "&c=" + counter, true);
xmlhttp.send();
}
It works fine in all browsers except in IE8.. Now here is the weird thing - the code will work if in IE8 I go to dev tools and start debugging for scripts. Otherwise it doesn't work.
PS I am using virtual PC and Windows XP w/ IE8 for IE8 tests.

Your console.log() calls are the problem.
You can add a cheap "polyfill" to your system:
if (!('console' in window)) {
window.console = {
log: function() {},
dir: function() {},
// whatever other console functions you use
};
}
Those dummy functions won't do anything, but they'll keep IE from losing it's mind.

ajax internet explorer onchange

My ajax script for loading the second select box, works in firefox and chrome, but internt explorers cant handle it. I call the onChange function from my select box and give the value from the select box to the function.
Code:
function getXMLHTTP()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
function getType(categoryName)
{
var strURL="includes/get.php?c="+categoryName+"&sid="+Math.random();
var req = getXMLHTTP();
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200)
{document.getElementById('type').innerHTML=req.responseText;
} else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
My second question is, is it possible to send the text between the options tag instead of the value in the options tag?

For your 1st question, I assume your if (req) returns false. Which IE version are you using? Try to add debug codes in getXMLHTTP() function to start diagnosing the codes. Try this solution provided by Microsoft: http://msdn.microsoft.com/en-us/library/ms537505(v=vs.85).aspx
I try not to repeat other's answer. Here is the answer for obtaining text in selected option tag : Getting the text from a drop-down box

IE6 and 7 issue with innerHTML

IE6 and 7 issue with innerHTML
I have used ajax in the application i have develop, but there are issues with IE6 and IE7, they doesn't support innerHTML. What must be used to fixed this issue and to be a cross browser compatible?
the sample code looks like this.
function showFAQ(src, target){
xhr.onreadystatechange=function(){
if(xhr.readyState == 4 && xhr.status == 200){
document.getElementById('resultDiv').innerHTML=xhr.responseText;
}
}
str = "?action=get&request="+src;
xhr.open("GET", "./requests/data.php"+encodeURI(str), true);
xhr.send();
}
In FireFox, IE8 and other major browsers works fine. Just the problem is with IE6 and 7.
Any help/advice will be appreciated.
Thanks

IE cannot update readonly elements using innerHTML... consider this too.. :)

Try
var xmlHttp;
function getXmlHttpObject() {
var xmlHttp = null;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
} catch (e) {
// Internet Explorer 6+
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
var xhr = getXmlHttpObject();
Update
Try adding
xhr.send(null);
after
str = "?action=get&request="+src;
xhr.open("GET", "./requests/data.php"+encodeURI(str), true);

innerHTML is supported as of IE5. I think you problem is the use of the xmlhttprequest object. That one is only supported as of IE7. You can however ActiveXObject as stealthyninja's code uses.

XML Parsing not working in IE

I am trying to parse a XML file, it works perfectly in FF but dont in IE. Pls help debug this. The code is as follows.
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","books.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
document.write("<table border='1'>");
var x=xmlDoc.getElementsByTagName("StepName");
for (i=0;i<x.length;i++)
{
document.write("<tr><td>");
document.write(x[i].getAttribute("name"));
document.write("</td><td>");
document.write(x[i].getElementsByTagName("StepStatus")[0].childNodes[0].nodeValue);
document.write("</td><td>");
document.write(x[i].getElementsByTagName("StepDescription")[0].childNodes[0].nodeValue);
document.write("</td></tr>");
}
document.write("</table>");

Your code, improved and annotated:
abstract things like XmlHttp requests into dedicated functions for reusability
always use the var keyword for declaring variables; forgetting this is a source of nasty bugs
use meaningful variable names wherever possible; single-letter names are suitable for loop counters but not for a lot else
never do synchronous HTTP requests, use callbacks instead
functions that do sanity checks first and return early tend to be less deeply nested
do not build HTML with document.write(), use the DOM instead
function getXml(url, onsuccess) {
var xmlhttp;
if (window.XMLHttpRequest) { // IE10+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // IE5 - IE9
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", url, true);
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState != 4) return;
if (xmlhttp.statusCode !== 200 || !xmlhttp.responseXML) return;
if (typeof onsuccess !== "function") return;
onsuccess.call(xmlhttp, xmlhttp.responseXML);
};
xmlhttp.send();
}
Now we can use it as follows:
getXml("books.xml", function (xmlDoc) {
var table = e("table", document.body), // see helper function e below
steps = xmlDoc.getElementsByTagName("StepName"),
i, step, tr;
for (i = 0; i < steps.length; i++) {
step = steps[i];
tr = e("tr", table);
e("td", tr, step.getAttribute("name"));
e("td", tr, step.getElementsByTagName("StepStatus")[0].childNodes[0].nodeValue);
e("td", tr, step.getElementsByTagName("StepDescription")[0].childNodes[0].nodeValue);
}
});
// helper function to build HTML elements with the DOM
function e(name, parentNode, text) {
var elem = document.createElement(name),
textProp = elem.hasOwnProperty("textContent") ? "textContent" : "innerText";
if (text) elem[textProp] = text;
if (parentNode && parentNode.appendChild) parentNode.appendChild(e);
return elem;
}
I suspect that your problem lies here:
step.getElementsByTagName("StepStatus")[0].childNodes[0].nodeValue
Maybe you are making assumptions about the document structure that are incorrect. But unless you post your XML, this is hard to say.

i had similar problem and following code works for all browser ...the trick is use separate code XML for IE browsers or that are version of less than 10 .
so every time Ajax is call a method parseXml is called with input parameter XML Dom or text, depending on browser .... and if current browser is IE, it upload XML doc, process it according to Microsoft standards and return XML and rest of processes in Ajax carries on as expected!!
note : browser.msie is not supported in jQuery 1.9 but you can add jquery-migrate-1.2.1.min.js in order to make it compatible or use userAgent and find which is current browser
$.ajax({
type: 'GET',
url: 'XML_file.xml',
dataType: ($.browser.msie) ? "text" : "xml",
success: function (xml) {
var processedXML = parseXml(xml);
$(processedXML).find('my record').each(function () { //code }
});
function parseXml(xml) {
if ($.browser.msie) {
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", "XML_file.xml", false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
xml = xmlDoc;
}
return xml;
}