Ajax weird behavior in IE8 - javascript

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.

Related

XMLHttpRequest() is not working in Opera mini

I just Trying to make an asynchronous project with XMLHttpRequest. it works well on other browsers but not working on Opera Mini Mobile Browser. now tell me how can I fix this.
Code:
function runxml(){
var xmlhttpr;
var setup = document.getElementById("setup");
if(window.XMLHttpRequest) {
xmlhttpr = new XMLHttpRequest();
} else {
// for IE8 and Earlier
xmlhttpr = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttpr.onreadystatechange = function(){
if(this.readyState == 4 || this.status == 200) {
setup.innerHTML = this.responseText;
}
}
xmlhttpr.open("GET", "file.txt", true);
xmlhttpr.send();
}

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();
}

Javascript div refresh

I am trying to refresh a php script to show updated content as a database updates. I first built my php, then the code to refresh and then merge them. However, the script doesn't update. Anyone know why?
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(
function() {
setInterval(function() {
if(document.getElementById('gallery') != null){
function showLots() {
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) {
document.getElementById("gallery").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET","getuser.php",true);
xmlhttp.send();
}
}
}, 3000);
});
</script>
Thanks.
You did not called method showLots, First define it outside the function and than call it in setInterval
The issue with your code is that function showLots() is inside your if (document.getElementById('gallery') != null) conditional without the function actually executing.
Below is what your corrected code could could look like by moving the function showLots() definition up. showLots() is then called inside where you originally had the definition.
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
function showLots() {
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) {
document.getElementById("gallery").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET","getuser.php",true);
xmlhttp.send();
}
$(document).ready(function () {
setInterval(function () {
if (document.getElementById('gallery') !== null) {
showLots();
}
}, 3000);
});
</script>

responseText contains null/undefined in safari

Here is my js and problem:
function refreshDiagValues()
{
var xmlhttp = null;
var recv;
try {
// Firefox, Opera 8.0+, Safari
xmlhttp = new XMLHttpRequest();
} catch (e) {
// Internet Explorer
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
recv=xmlhttp.responseText;
document.getElementById("text7").innerHTML = recv;
}
};
xmlhttp.open("GET","ajax_DGS0101", false);
xmlhttp.send();
}
I could get this work in IE and chrome, but fails in safari.
I tested it by changing document.getElementById("text7").innerHTML = 5 and it shows the correct number on all browsers.
It feels like responseText does not contain any value for safari, but contains results for chrome and IE.
Could anyone help me?

What causes error in IE7?

I am using this JS code to reach a list of cities. It works in fireworks, chrome .e.t.c. But in ie7 it does not. the line document.getElementById(oDiv).innerHTML=xmlhttp.responseText; causes the error.
When I change "responseText" to "readyState", "statusText", "readyState" the scripts works. Only "responseText" causes problem.
What is the problem here?
function showAjax(oDiv, countrycode, dowhat) {
if (oDiv == "") {
document.getElementById(oDiv).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");
}
xmlhttp.open('POST', 'ajax.php?dowhat=' + dowhat + '&countrycode=' + countrycode, true);
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById(oDiv).innerHTML = xmlhttp.responseText;
//document.getElementById(oDiv).innerHTML=xmlhttp.readyState;
}
}
xmlhttp.send();
}
Click
<div id=citytd></div>
IE7 (and before, and IE8 in "compatibility" mode) has issues with getElementById, where it considers some things IDs that it shouldn't. I suspect you have a global variable, or another element with name="citytd", and IE is pick that up instead (even though, again, it shouldn't). More: ...by any other name, would smell as sweet

Categories