Problem with AJAX functionality, functioning properly on all browsers except for Internet Explorer

I have noticed that this code works perfectly in Chrome and Firefox, but unfortunately not in IE. This is expected due to browser compatibility issues. Can anyone identify any problems with this code that would make it ineffective in IE?

var waittime=400;
chatmsg = document.getElementById("chatmsg");
room = document.getElementById("roomid").value; 
sessid = document.getElementById("sessid").value;
chatmsg.focus()
document.getElementById("chatwindow").innerHTML = "loading...";
document.getElementById("userwindow").innerHTML = "Loading User List...";
var xmlhttp = false;
var xmlhttp2 = false;
var xmlhttp3 = false;

function ajax_read() {
if(window.XMLHttpRequest){
    xmlhttp=new XMLHttpRequest();
    if(xmlhttp.overrideMimeType){
        xmlhttp.overrideMimeType('text/xml');
    }
} else if(window.ActiveXObject){
    try{
        xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
    } catch(e) {
        try{
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        } catch(e){
        }
    }
}
if(!xmlhttp) {
    alert('Giving up :( Cannot create an XMLHTTP instance');
    return false;
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState==4) {
    document.getElementById("chatwindow").innerHTML = xmlhttp.responseText;
    setTimeout("ajax_read()", waittime);
    }
}
xmlhttp.open('GET','methods.php?method=r&room=' + room +'',true);
xmlhttp.send(null);
}

function user_read() {
if(window.XMLHttpRequest){
    xmlhttp3=new XMLHttpRequest();
    if(xmlhttp3.overrideMimeType){
        xmlhttp3.overrideMimeType('text/xml');
    }
} else if(window.ActiveXObject){
    try{
        xmlhttp3=new ActiveXObject("Msxml2.XMLHTTP");
    } catch(e) {
        try{
            xmlhttp3=new ActiveXObject("Microsoft.XMLHTTP");
        } catch(e){
        }
    }
}
if(!xmlhttp3) {
    alert('Giving up :( Cannot create an XMLHTTP instance');
    return false;
}
xmlhttp3.onreadystatechange = function() {
if (xmlhttp3.readyState==4) {
    document.getElementById("userwindow").innerHTML = xmlhttp3.responseText;
    setTimeout("user_read()", 10000);
    }
}
xmlhttp3.open('GET','methods.php?method=u&room=' + room +'',true);
xmlhttp3.send(null);
}

function ajax_write(url){
if(window.XMLHttpRequest){
    xmlhttp2=new XMLHttpRequest();
    if(xmlhttp2.overrideMimeType){
        xmlhttp2.overrideMimeType('text/xml');
    }
} else if(window.ActiveXObject){
    try{
        xmlhttp2=new ActiveXObject("Msxml2.XMLHTTP");
    } catch(e) {
        try{
            xmlhttp2=new ActiveXObject("Microsoft.XMLHTTP");
        } catch(e){
        }
    }
}
if(!xmlhttp2) {
    alert('Giving up :( Cannot create an XMLHTTP instance');
    return false;
}
xmlhttp2.open('GET',url,true);
xmlhttp2.send(null);
}

function submit_msg(){
nick = document.getElementById("chatnick").value;
msg = document.getElementById("chatmsg").value;
document.getElementById("chatmsg").value = "";
ajax_write("methods.php?method=w&m=" + msg + "&n=" + nick + "&room=" + room +    "&sessid=" + sessid + "");
}

function keyup(arg1) { 
if (arg1 == 13) submit_msg(); 
}
var intUpdate = setTimeout("ajax_read()", waittime);
var intUpdate = setTimeout("user_read()", 0);
javascriptajaxdom-events

Answer №1

Instead of directly addressing the question, I recommend utilizing jQuery to simplify your code. By incorporating jQuery, you can significantly reduce the amount of code required. Take for instance your user_read function, which would transform into:

function user_read() {
  $.ajax({
     type: "GET",
     url: "methods.php",
     data: {method: "u", room: room}
     dataType: "html"
     success: function (data, status, xhr) {
         $("#userwindow").html(data);
         setTimeout(user_read, 10000);
     }
   });
}

Moreover, jQuery is compatible with all browsers, eliminating any Internet Explorer compatibility issues you may encounter.

Answer №2

Experiment with running some sample code using the jQuery library on Internet Explorer - just to conduct a partial test to ensure the browser is functioning properly and to identify any potential bugs in the code.

Answer №3

For handling multiple ajax requests, jQuery would be the ideal choice. Other advanced browsers automatically fix certain issues that IE may struggle with, such as missing semicolons and other syntax errors. Additionally, I noticed you have two intUpdate declarations for different intervals at the end, and "xmlhttp2" is missing an onreadystatechange function.

Using a tool like JSLint can greatly assist in identifying and resolving these issues.

I've made some adjustments to your code to ensure it runs without errors:

var waittime = 400;
chatmsg = document.getElementById("chatmsg");
room = document.getElementById("roomid").value; 
sessid = document.getElementById("sessid").value;
chatmsg.focus();
document.getElementById("chatwindow").innerHTML = "loading...";
document.getElementById("userwindow").innerHTML = "Loading User List...";
var xmlhttp = false;
var xmlhttp2 = false;
var xmlhttp3 = false;

function ajax_read() {
    if(window.XMLHttpRequest){
    xmlhttp=new XMLHttpRequest();
    if(xmlhttp.overrideMimeType){
        xmlhttp.overrideMimeType('text/xml');
    }
} else if(window.ActiveXObject){
    try{
        xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
    } catch(e) {
        try{
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        } catch(e){
    alert('Giving up :( Cannot create an XMLHTTP instance');
}
    }
}

xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState==4) {
    document.getElementById("chatwindow").innerHTML = xmlhttp.responseText;
    setTimeout(function(){ajax_read();}, waittime);
    }
};
xmlhttp.open('GET','methods.php?method=r&room=' + room +'',true);
xmlhttp.send();
}

function user_read() {
if(window.XMLHttpRequest){
    xmlhttp3=new XMLHttpRequest();
    if(xmlhttp3.overrideMimeType){
        xmlhttp3.overrideMimeType('text/xml');
    }
} else if(window.ActiveXObject){
    try{
        xmlhttp3=new ActiveXObject("Msxml2.XMLHTTP");
    } catch(e) {
        try{
            xmlhttp3=new ActiveXObject("Microsoft.XMLHTTP");
        } catch(e){
    alert('Giving up :( Cannot create an XMLHTTP instance');

        }
    }
}

xmlhttp3.onreadystatechange = function() {
if (xmlhttp3.readyState==4) {
    document.getElementById("userwindow").innerHTML = xmlhttp3.responseText;
    setTimeout(function(){user_read();}, 10000);
    }
};
xmlhttp3.open('GET','methods.php?method=u&room=' + room +'',true);
xmlhttp3.send();
}

function ajax_write(url){
if(window.XMLHttpRequest){
    xmlhttp2=new XMLHttpRequest();
    if(xmlhttp2.overrideMimeType){
        xmlhttp2.overrideMimeType('text/xml');
    }
} else if(window.ActiveXObject){
    try{
        xmlhttp2=new ActiveXObject("Msxml2.XMLHTTP");
    } catch(e) {
        try{
            xmlhttp2=new ActiveXObject("Microsoft.XMLHTTP");
        } catch(e){
    alert('Giving up :( Cannot create an XMLHTTP instance');

        }
    }
}
xmlhttp2.open('GET',url,true);
xmlhttp2.send();
}

function submit_msg(){
nick = document.getElementById("chatnick").value;
msg = document.getElementById("chatmsg").value;
document.getElementById("chatmsg").value = "";
ajax_write("methods.php?method=w&m=" + msg + "&n=" + nick + "&room=" + room +    "&sessid=" + sessid + "");
}

function keyup(arg1) { 
if (arg1 == 13) {submit_msg();}
}

var intUpdate = setTimeout(function(){ajax_read();}, waittime);
user_read();

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Steps for iterating over the "users" list and retrieving the contents of each "name" element

I'm attempting to iterate over the "users" array and retrieve the value of each "name". Although the loop seems to be functioning correctly, the value of "name" is returning as "undefined" four times. JavaScript: for(var i = 0; i < customer.users ...

javascriptjson

Removing a specific MySQL row using HTML in collaboration with Node.js

I've been working on a feature to allow users to delete specific rows from a table. Each row has a "Delete" link at the end, but when I click it, nothing happens. There are no errors displayed, and the console shows that 0 row(s) have been updated, ye ...

javascripthtmlmysqlsqlnode.js

Changing the size of an iframe and closing it by pressing the ESC

I am developing an application that requires the ability to resize an iframe. When the user clicks the "Full Screen" button, the iframe should expand to occupy the entire screen. The iframe should return to its original size when the user presses the "Es ...

javascriptjqueryhtml

Enhance your Next.js app with the SWC compiler by integrating Material UI and the swc-plugin-transform-import

I have encountered some challenges with transforming imports in Next.js using the SWC compiler. My goal is to utilize swc-plugin-transform-import instead of babel-plugin-transform-imports to simplify Material UI imports. Despite following the documented ...

javascriptnext.jsmaterial-uiswc-compiler

When trying to retrieve a value from a custom render function in React with TypeScript, an error occurs indicating that the value is not assignable to type 'ReactNode'

Recently, I attempted to develop a versatile swiper component using Next.js 13 (App Router) v13.4.12 along with TypeScript. However, I encountered an issue when trying to access data from the component props, which involves a custom function for rendering ...

javascriptreactjstypescriptswiper.js

jQuery enables the creation of fresh form fields

Currently, I am working on a form that initially consists of 2 text input fields. The typical use case involves the user entering a number in one field and their name in the other. Following this, the page updates itself without reloading. However, there a ...

javascriptjqueryhtmlformsdynamic

What reasons could be preventing the state from updating correctly in Vuex?

Currently, I am working on a project where I am utilizing vuex along with axios to retrieve data from the backend. The issue arises when I try to access the state - even though the updated state is displayed successfully when I console-log it, there seems ...

javascriptvue.jsaxiosstatevuex

What could be the reason for the failure of my class isInstance() check

Do you see any issues with the object being an instance of ChatRoom? Let me know your thoughts. Class: export class ChatRoom { public id?: number; public name_of_chat_room: string; public chat_creator_user_id: number; public chat_room_is_active: 0 ...

javascripttypescript

Is it possible to implement a wsdl webservice in Phonegap?

Does anyone know the best way to call a wsdl webservice in Phonegap? Any suggestions on source code or tutorials that could be helpful? ...

javascriptandroidioscordovawsdl

Adjust webpage display with JavaScript

Utilizing the mobile-first approach of Zurb Foundation, I successfully created a responsive design. However, my client now requires a direct link labeled "View desktop version" in the footer for when the website is accessed on mobile devices or tablets. T ...

javascriptcssmedia-querieszurb-foundation

Is it possible to achieve efficient Autocompletion features within VS Code?

Just had my first experience with PhpStorm and I must say, I'm impressed, especially with the completion feature. Pressing Ctrl + Space on my Mac gives me relevant suggestions, like when I'm in a JS file and my project includes jQuery, I get Ele ...

javascripthtmljqueryvisual-studio-codephpstorm

POSTing with AngularJS

My PHP page, submit.php, is designed to take the "data" parameter as either get or post, and save it into a local file. I have confirmed its functionality by testing it with jQuery's $.ajax method. Now, however, I need to integrate AngularJS into my a ...

javascriptajaxangularjs

NodeJS Streams: Delay in data transfer with Readable.pipe()

My understanding was that Stream.Readable.pipe() would immediately pipe data as it receives it, but I'm facing unexpected results while trying to create my own streams. const { Writable, Readable } = require("stream"); const writable = new ...

javascriptnode.jsstreamnodejs-stream

What is the correct way to retrieve the location offset of a specific DOM element?

As I attempt to determine the offsets of an element utilizing element.getBoundingClientRect(), a challenge arises when the webpage is extensive in vertical length and involves scrolling. The function then provides me with the offsets of the element relat ...

javascripthtml

Retrieve an object using the coordinates (x,y) from a given list

I am working with a two-dimensional array, matrix[2][2], that I have stored in a list: var list= ["a","b","c","d"]; In addition to the list, I also have two specific coordinates: var x = 0; var y = 1; My goal is to ...

javascriptarrays

Troubleshooting problems with AJAX in WordPress

I have been attempting to transfer an array from PHP to JavaScript in order to display search results from a database. After converting the array into JSON format, I am facing difficulties in retrieving it. Despite having colleagues experienced in AJAX, we ...

javascriptphpjsonajaxwordpress

After triggering an action, I am eager to make a selection from the store

To accomplish my task, I must first select from the store and verify if there is no data available. If no data is found, I need to dispatch an action and then re-select from the store once again. Here is the code snippet that I am currently using: t ...

javascriptangulartypescriptreduxngrx

Utilizing Next.js to dynamically render a modal using data from the router's query parameters

I have an interactive feed that showcases cards. These cards trigger a modal to open, providing more details related to each card. The information is passed down two levels using props and everything functions smoothly until I incorporate Next Link for mod ...

javascriptreactjsnext.js

Ways to loop through HTML elements based on certain criteria?

Issue : The v-for loop is successfully iterating and binding data in the HTML template, but there is a challenge in partially iterating it based on certain conditions. Please refer to the JSFiddle link below for a demo. Objective : In the provided demo li ...

javascriptvue.jsfor-loopvuejs2

Issue with importing and exporting JavaScript on an HTML file is not functioning as expected

I recently worked on a basic JavaScript project involving export/import and encountered an error when inserting it into the HTML. The error message read: "Uncaught SyntaxError: Cannot use import statement outside a module". I researched this issue on Stack ...

javascripthtmlimportexport