Safari's Failure to Execute Ajax Requests

My HTML page includes an ajax request that is functioning properly on Firefox, but does not work on Safari. While debugging, I noticed that the readystate is undefined and the status is "". Can anyone suggest why it might not be working on Safari?

Javascript Code:

<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "pegSolitaireSettings.html", true);
  xhttp.send();
}
function reloadGame() {
    location.reload();
}
</script>

HTML Code:

<div id="demo">
  <button type="button" onclick="loadDoc()">Settings</button>
  <div class="center-div">...</div>
</div>
javascriptajax

Answer №1

Firefox is automatically correcting the error, but Safari is not.

You have tried to request a relative URL: "pegSolitaireSettings.html"

To fix this issue, change it to: 

"http://HOSTNAME/pegSolitaireSettings.html"
or 
"//HOSTNAME/pegSolitaireSettings.html"
and it will work correctly.

Replace HOSTNAME with the domain name of the host.

Answer №2

My current setup is as follows and I have no issues accessing 

http://www.pegsolitaire.com/pegSolitaireSettings.html
in my web browser, indicating that the vhost is not the problem

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="CSS/styles.css" type="text/css">
<script>
    function loadDoc() {
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          document.getElementById("demo").innerHTML =
          this.responseText;
        }
      };
      xhttp.open("GET", "http://www.pegsolitaire.com/pegSolitaireSettings.html", true);
      xhttp.send();
    }
function reloadGame() {
location.reload();
}
</script> 
</head>

<body>
<div id="demo">
  <button type="button" onclick="loadDoc()">Settings</button>
  <div id="gameInfo" align="center"> <br>
      <div class="values" id="totalTime"></div>
    </div>
</div>
</body>
</html>

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

MUI's lazy loading feature can interfere with the functionality of useEffect

I have integrated a tabs interface using React's MUI library (https://mui.com/material-ui/react-tabs/#fixed-tabs) Here is the code I am using: import * as React from 'react'; import PropTypes from 'prop-types'; import SwipeableVie ...

javascriptreactjsmaterial-ui

Unable to retrieve variable using the require statement

When attempting to access the variable 'app' from the required index.js in my test, I encounter difficulty resolving the 'app' variable. server.js 'use strict'; var supertestKoa = require('supertest-koa-agent'); ...

javascriptnode.js

Tips for implementing Peer.js in Next.js using TypeScript?

Next.js has the ability to run on the server side, which can result in Peer.js throwing errors when used with Next.js. One user on Stack Overflow explains this issue: The error is likely due to peer js performing side effects during import. The suggest ...

javascripttypescriptnext.jspeerjs

Learn the technique in Vue to separate a string using commas and store the values in an array

As a Ruby enthusiast, I am delving into the world of Vue. In my project, users can input multiple styleCodes separated by commas. I aim to store these styleCodes in an array for flexible length calculations. See my code snippet below: <template> &l ...

javascriptvue.js

Having trouble understanding how to incorporate jQuery GetListItems with SharePoint SOAP - it seems simple, but can't figure it out!

I'm attempting to incorporate a SharePoint list into an Unordered List to set up a basic search function (since Sharepoint's Search functionality is quite lacking). Below is the code I found and adjusted: $(document).ready(function() { v ...

ajaxsharepointsoapjquery

The jQuery carousel script is not functioning

Currently developing a jQuery slideshow for my website, and I stumbled upon a code that fits my requirements perfectly. I made some adjustments to the code from this source: . My specifications were that the code should be created from scratch, lightweight ...

javascriptjqueryhtmlslideshow

Apache conf file configured with CSP not functioning properly when serving PHP files

While configuring the Apache CSP lockdown for a site, I encountered an unusual behavior when opening the same file as a PHP script compared to opening it as an HTML file. The HTML file looks like this: <html> <head> <meta http-equiv= ...

javascriptphphtmlapache

Executing Controller Actions within a JavaScript Timer

Presenting my latest timer: var eventDate = new Date(Date.parse(new Date) + 3600); function countdown() { var elapsed = Date.parse(eventDate) - Date.parse(new Date()); var seconds = Math.floor((elaps ...

javascriptc#asp.net

Issue: The variable does not appear to be getting updated

After spending the last 2 hours analyzing this JS code, I am still unable to figure out why the variable "message" is not being changed to "User already exists." The bizarre thing is that the code block labeled "Inside first if" is executed, but the "mes ...

javascriptexpress

Issue with getStaticProps not updating fetched values in Next.js production environment

I am currently working on building a blog using Next.js. Since the back-end is taken care of by another team, I am utilizing fetch API calls in getStaticProps to retrieve my articles, even though it may be considered best practice to interact with the data ...

javascriptreactjsnext.js

Error message: Act must be used when rendering components with React Testing Library

I am facing difficulty while using react-testing-library to test a toggle component. Upon clicking an icon (which is wrapped in a button component), I expect the text to switch from 'verified' to 'unverified'. Additionally, a function ...

javascriptreactjsasync-awaitjestjsreact-testing-library

Can Googlebot detect changes made to an HTML <title> tag using JavaScript?

Within my website, I have a search engine that operates using ajax technology. My goal is to assign a unique <title> for every search request made. This involves modifying the title each time I receive a response from the ajax feature. I am wonderin ...

javascriptajaxgooglebot

Ways to halt streaming without shutting down the Node.js server

I am currently facing an issue with closing a Twitter stream, as it causes my server to crash and requires a restart. Is there a way to close the stream without affecting the Nodejs (express) server? Here is the error message I am encountering: file:///mnt ...

javascriptnode.jsexpress

Sliding through HTML content

Unfortunately, I lack expertise in advanced HTML and CSS. After some investigation, I attempted to create a "content slider" similar to the one on the Redlight Traffic website (an anti-human trafficking organization). However, my efforts have been unsucces ...

javascripthtmlcssjscript

Uploading files using Ajax technology with extremely lengthy text

In our Portal, we have integrated the tinyMCE editor for users to create their mail body. To facilitate this feature, we have created a form that can be submitted using Ajax. Users are also allowed to attach documents to their mail body. Initially, I set ...

jqueryajaxtinymceliferay

Create a function that generates an HTML string and returns it to be used in JSX

As a newcomer to JSX/React, I am seeking guidance on removing inline code. I have created a function that returns the value to be displayed in the template/JSX. The function works well except when it needs to return a string along with an element like a Li ...

javascriptreactjsreact-routerjsx

Is it necessary for me to use a .jsx extension when saving my React component files?

After working with React for a few months, I recently noticed that some of my files have the .js extension while others have the .jsx extension. Surprisingly, when I write JSX code in the .js files, everything still functions correctly. Is there any signif ...

javascriptreactjsjsx

Change the input field to uppercase using JavaScript but do not use inline JavaScript

Hey there! I have a basic script set up (see below) with an input field allowing users to enter a query. This query is then sent to a socrata webservice to request specific data, which is displayed in an alert box. So far, everything works smoothly. var l ...

javascriptjqueryhtmljson

PHP array utilized in a dynamic dropdown menu

I am working on creating a PHP array for a select list that has dynamic options populated using JavaScript. My goal is to collect all the options selected and display them on the next page. I was wondering if there is a better way to achieve this task. C ...

phpjavascriptselectlist

Create a mechanism in the API to ensure that only positive values greater than or equal to 0 are accepted

My goal is to process the API result and filter out any values less than 0. I've attempted to implement this feature, but so far without success: private handleChart(data: Object): void { const series = []; for (const [key, value] of Object.e ...

javascriptangulartypescripthighcharts