Mobile Devices Experience AJAX Failures

My AJAX requests are not working properly on mobile browsers and iPads, but they work perfectly on desktop computers. I am struggling to figure out what the issue might be.

var xmlhttp;
if(window.XMLHttpRequest){
    xmlhttp = new XMLHttpRequest();
}else{
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function(){
    if (xmlhttp.readyState == XMLHttpRequest.DONE ){
       if(xmlhttp.status == 200){
            console.log(xmlhttp.responseText);
       }else{
           alert("STATUS "+xmlhttp.status);
       }
    }
}
xmlhttp.open("GET","http://www.mywebsite.co.uk/assets/php/upvote.php?id="+id,true);
xmlhttp.send();

I have also experimented with these variations: 

xmlhttp.open("GET","/assets/php/upvote.php?id="+id,true);
and 
xmlhttp.open("GET","../php/upvote.php?id="+id,true);
All three methods are successful on desktop computers (displaying a success message in the console), but on mobile devices, they result in an alert with "STATUS 0".

I am puzzled as to why everything runs smoothly on desktops, but xmlhttp.status returns 0 on mobile devices.

javascriptajax

Answer №1

Hey, I really appreciate your assistance!

I decided to check out iOS Safari DevTools and monitor the console. Surprisingly, I encountered a cross site scripting issue even after adjusting my path to '/assets/php/...'

It turns out that a .htaccess file was redirecting all traffic through 'www.' but not for both directories where my main webpage and AJAX files resided (some paths had 'www.' while others didn't).

After making some edits to my .htaccess file (which strangely only affected desktop Chrome requests and not iOS Safari), everything is working perfectly now!

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

Is there a more efficient algorithm available to solve this problem in a quicker manner?

I'm currently working on iterating through the body tag and all of its nested children. I want to be able to access each child, even if they contain additional children within them. Can anyone offer a more efficient algorithm than the one I came up wi ...

javascriptalgorithmdomoptimization

Encountering vuex error when attempting to send data to Django backend

Currently, I am facing an issue while attempting to transmit data from my Vue.js frontend to the backend using Vuex and Vue-axios. Despite establishing a Vuex store and Vue-axios services, I encounter an error that reads [vuex] unknown action type: addGene ...

javascriptvue.jsaxioshttprequestvuex

Show or conceal a child component within a React application

In my React render function, I am working with the following code: <div> <InnerBox> <div>Box 1</div> <HiddenBox /> </InnerBox> <InnerBox> <div>Box 2</div> & ...

javascriptreactjs

Exploring the differences between scoping with let and without any scoping in

Within my code, there is a forEach loop containing a nested for loop. It's interesting that, even though I have a statement word = foo outside of the for loop but still inside the forEach loop, I can actually log the value of word after the entire for ...

javascript

Tips for Ensuring the Longevity of my Node.js Server

After developing an application in Node js with express js, I am facing an issue where the server shuts down whenever I close the command prompt. To start the app, I use the following command: c:/myApp > npm start I attempted to resolve this problem b ...

javascriptnode.jsexpress

Transform a numerical variable into a string data type

I am faced with a situation where I have a variable named val which is currently set to the number 5. Now, my goal is to update the value of val so that it becomes a string containing the character "5". Could someone guide me on how to achieve this? ...

javascriptnode.js

React / Express / MySQL - Best Practices for Managing MySQL Transactions

I'm currently working on a project that involves developing a React front-end with an Express back-end API that utilizes MySql. One of the challenges I am facing is determining where to handle MySql transactions in my project structure. The folder l ...

javascriptmysqlnode.jsreactjsexpress

How to add multiple entries using Node.js and Tedious

I am currently working with an array of customer objects that I need to insert into a SQL database. These customer objects are retrieved from the request data. For this task, I am utilizing Tedious for handling the request and Tedious Connectionpool to ma ...

javascriptsqlnode.jsfor-looptedious

Tips for incorporating your personal touch while utilizing Snipcart

I have created an ecommerce platform with GatsbyJS and Snipcart, but I am struggling to override the default theme provided by Snipcart. When I try to change the main default CSS through gatsby-config.js, it does not seem to work. Does anyone have a soluti ...

javascriptcssreactjssnipcart

Token generated by Sinch backend for use with Javascript and Android applications

I am currently exploring two distinct methods for creating the sinch authentication token on an app server. One approach is designed for the Android client while the other is tailored for the JS client. Is it feasible to utilize the same token for both the ...

javascriptandroidsinchandroid-sinch-api

What steps are necessary to instruct multer to store the file in a specific directory?

Having some issues with multer while trying to save an image in a specific folder. The path for the file gets uploaded to mlab successfully, but the problem arises when attempting to retrieve the image from the designated folder as it fails to save there ...

javascriptnode.jsfilefile-uploadmulter

Protractor performs the afterEach function prior to the expectations being met

I am completely baffled by the behavior of this code. Everything seems to be executing correctly up until the 'expect' statement, at which point it abruptly navigates to a new page and runs the afterEach function. I've tried various solution ...

javascriptangularprotractor

Setting up TailwindCSS in Nuxt3: A step-by-step guide

Looking to customize the default font Proxima Nova from TailwindCSS in my Nuxt3 project but navigating the file structure is a bit tricky for me. I've gone ahead and installed the tailwindcss module: npm i -D @nuxtjs/tailwindcss and added the module ...

javascriptvue.jsnuxt.jstailwind-cssnuxtjs3

SyntaxError: An invalid character was encountered (at file env.js, line 1, column 1)

This marks my debut question so kindly indulge me for a moment. I recently stumbled upon a guide that outlines how to dynamically alter environment variables in a React project without the need for re-building. You can find the guide here. The method work ...

javascripthtmlreactjsenvironment-variables

Start progress bars on several divs that share a common class

I'm attempting to utilize the ProgressBar.js Plugin on multiple div elements that share the same class form-progress This is my HTML code: <div class="form-progress"></div> And here is the corresponding JavaScript code: var form_pr ...

javascriptphpjqueryprogress-bar

The issue with Angular-gettext is that it fails to update dynamically generated strings in the code

Whenever I try to set the language using the code gettextCatalog.setCurrentLanguage(langString);, it doesn't seem to affect my side-nav menu. My side menu has two possible states: expanded or collapsed, and I use ng-include to control its content base ...

javascripthtmlangularjsangular-gettext

Error in Dimplejs: Line is not visible when series is empty

I have a dimplejs.org line chart set up. I am trying to colorize the Clicks data points from blue to red (blue for fewer clicks and a gradient from blue to red for more clicks). When I set the series as shown below, it works fine but the tooltip only incl ...

javascriptjqueryd3.jsdata-visualizationdimple.js

What is causing the lack of response in the select box on Mac Chrome when I try to click on it?

Similar Question: JQuery function doesn't work on Chrome on Mac, but works on Chrome on Win 7 and all other browsers I am encountering an issue with a select-option list <div class="social-option"> <select name="hex_theme_options[soc ...

javascriptjqueryhtmlmacos

Determine whether the user has authorized the website with long-term access to obtain location information in the browser

Everything is running smoothly as I call navigator.geolocation.getCurrentPosition in my web app. Users are guided to a screen that explains the benefits of sharing their location, and once they press a button, the request is initiated without any issues. ...

javascriptgeolocation

What is an alternative method for creating a horizontal line without the need for the <hr> tag?

Is there a way to create a slim horizontal line without using the <hr> tag ? This is what I attempted: .horizontal-line{ border-top: 1px solid #9E9E9E; border-bottom: 1px solid #9E9E9E; } While it does function, I am hoping for a thinner line. ...

javascripthtmlcsstagsvisual-web-developer-2010