Problems with jQuery getJSON using local files in Chrome - ajax

I have a very simple test page that uses XHR requests with jQuery's $.getJSON and $.ajax methods. The same page works in some situations and not in others. Specificially, it doesn't work in Chrome on Ubuntu.
I'm testing on Ubuntu 9.10 with Chrome 5.0.342.7 beta and Mac OSX 10.6.2 with Chrome 5.0.307.9 beta.
It works correctly when files are installed on a web server from both Ubuntu/Chrome and Mac/Chrome (try it out here).
It works correctly when files are installed on local hard drive in Mac/Chrome (accessed with file:///...).
It FAILS when files are installed on local hard drive in Ubuntu/Chrome (access with file:///...).
The small set of 3 files can be downloaded in a tar/gzip file from here:
http://issues.tauren.com/testjson/testjson.tgz
When it works, the Chrome console will say:
XHR finished loading: "http://issues.tauren.com/testjson/data.json".
index.html:16Using getJSON
index.html:21
Object
result: "success"
__proto__: Object
index.html:22success
XHR finished loading: "http://issues.tauren.com/testjson/data.json".
index.html:29Using ajax with json dataType
index.html:34
Object
result: "success"
__proto__: Object
index.html:35success
XHR finished loading: "http://issues.tauren.com/testjson/data.json".
index.html:46Using ajax with text dataType
index.html:51{"result":"success"}
index.html:52undefined
When it doesn't work, the Chrome console will show this:
index.html:16Using getJSON
index.html:21null
index.html:22Uncaught TypeError: Cannot read property 'result' of null
index.html:29Using ajax with json dataType
index.html:34null
index.html:35Uncaught TypeError: Cannot read property 'result' of null
index.html:46Using ajax with text dataType
index.html:51
index.html:52undefined
Notice that it doesn't even show the XHR requests, although the success handler is run. I swear this was working previously in Ubuntu/Chrome, and am worried something got messed up. I already uninstalled and reinstalled Chrome, but that didn't help.
Can someone try it out locally on your Ubuntu system and tell me if you have any troubles? Note that it seems to be working fine in Firefox.

Another way to do it is to start a local HTTP server on your directory. On Ubuntu and MacOs with Python installed, it's a one-liner.
Go to the directory containing your web files, and :
python -m SimpleHTTPServer
Then connect to http://localhost:8000/index.html with any web browser to test your page.

This is a known issue with Chrome.
Here's the link in the bug tracker:
Issue 40787: Local files doesn't load with Ajax

On Windows, Chrome might be installed in your AppData folder:
"C:\Users\\AppData\Local\Google\Chrome\Application"
Before you execute the command, make sure all of your Chrome windows are closed and not otherwise running. Or, the command line param would not be effective.
chrome.exe --allow-file-access-from-files

You can place your json to js file and save it to global variable. It is not asynchronous, but it can help.

An additional way to get around the problem is by leveraging Flash Player's Local Only security sandbox and ExternalInterface methods. One can have JavaScript request a Flash application published using the Local Only security sandbox to load the file from the hard drive, and Flash can pass the data back to JavaScript via Flash's ExternalInterface class. I've tested this in Chrome, FF and IE9, and it works well. I'd be happy to share the code if anyone is interested.
EDIT: I've started a google code (ironic?) project for the implementation: http://code.google.com/p/flash-loader/

#Mike On Mac, type this in Terminal:
open -b com.google.chrome --args --disable-web-security

This code worked fine with sheet.jsonlocally with browser-sync as the local server.
-But when on my remote server I got a 404 for the sheet.json file using Chrome.
It worked fine in Safari and Firefox.
-Changed the name sheet.json to sheet.JSON. Then it worked on the remote server.
Anyone else have this experience?
getthejason = function(){
var dataurl = 'data/sheet.JSON';
var xhr = new XMLHttpRequest();
xhr.open('GET', dataurl, true);
xhr.responseType = 'text';
xhr.send();
console.log('getthejason!');
xhr.onload = function() {
.....
}

Related

The Web MIDI API is not supported by your browser - Google Chrome on Mac - when code is run locally

Folks,
I am trying work on a simple Web MIDI app.
I already looked up and found out that Google Chrome is the only browser that supports this. So, I installed this but I still get this.
WebMidi could not be enabled Error: The Web MIDI API is not supported
by your browser.
at WebMidi.enable (webmidi.min.js:30)
at script.js:430 (anonymous) # script.js:432 WebMidi.enable # webmidi.min.js:30 (anonymous) # script.js:430
Promise.then (async) (anonymous) # script.js:154
Mac - 10.15.2
Chrome - 79.0.3945.117
According to this link - https://www.midi.org/17-the-mma/99-web-midi , Chrome definitely has the support.
Important Note - If I were run the code directly on codepen, it works just fine. So the browser is working. But when I try to run locally, I get the error.
https://codepen.io/teropa/pen/JLjXGK
WebMidi.enable(err => {
if (err) {
console.error('WebMidi could not be enabled', err);
return;
}
What am I missing here? is this a chrome issue or Mac issue or some permission issue. Or, is there is something specific I need to make the MIDI code run locally?
I am using this server, https://www.npmjs.com/package/http-server, to run the code locally.
(I have looked at other questions but did not find anything that relates to Chrome on Mac)
I've used web-midi with Chromium and Opera on 10.12.6, so I wouldn't say that Chrome is the only browser that has web-midi.
With Opera I think I had to enable experimental features:
chrome://flags/#enable-experimental-web-platform-features
Maybe see if Chrome needs that too?
Or maybe it's just a side-effect of all the lock-down in 10.15?
if serving dev site from 0.0.0.0 you won't get any MIDI in browser, but when loading from 127.0.0.1 it should work ( as commented by user Alex above )

P5.js not loading sound

I am trying to load an mp3 files (according to the examples) but I am getting
Unable to load bg.mp3.
The request status was: 0 ()
The error stack trace includes: loadSound
I have referenced my problem to this Github issue https://github.com/processing/p5.js-sound/issues/141 but I am unable to find a solution.
Also, I am using Brackets editor which starts a local server and opens a new Chrome instance.
let mySound;
function preload() {
soundFormats('mp3', 'ogg');
mySound = loadSound("bg.mp3");
}
function setup(){
createCanvas(displayWidth,displayHeight);
mySound.setVolume(0.1);
mySound.play();
}
Strange, the Sound: Load and Play Sound example seems to work fine.
The error seems to point to on an XHR load error, but it's unclear why.
It's worth trying the full version of loadSound() including the error callback:loadSound(path, [successCallback], [errorCallback], [whileLoading]).
Hopefully the errorCallback details will help solve the problem
e.g.
let mySound;
function onSoundLoadSuccess(e){
console.log("load sound success",e);
}
function onSoundLoadError(e){
console.log("load sound error",e);
}
function onSoundLoadProgress(e){
console.log("load sound progress",e);
}
function preload() {
soundFormats('mp3', 'ogg');
mySound = loadSound("bg.mp3",onSoundLoadSuccess,onSoundLoadError,onSoundLoadProgress);
}
function setup(){
createCanvas(displayWidth,displayHeight);
mySound.setVolume(0.1);
mySound.play();
}
Also try to navigate to the web server Brackets launches and access the file manually.
(e.g. http://localhost:BRACKETS_HTTP_PORT_HERE/bg.mp3). If everything is ok (bg.mp3 is in the same folder as the index.html file), your browser should load and display the default audio playback controls.
It's worth noting there are many other http servers you could try, here a few examples:
if you're on OSX you can use Python's HTTP Server (python -m SimpleHTTPServer in python 2 or python -m http.server)
if you use node.js there' an http-server module (e.g. npm install http-server then http-server in your project folder)
Apache variants (depending on OS, MAMP/WAMP/XAMPP, etc.), though might be overkill
The quick fix for anyone having this issue is to use a Local web server. (mamp/xamp/local etc). Then reference it in the preload/setup
sound = loadSound('http://localhost/audio.mp3', loaded);
The documentation does state -
you will need the p5.sound library and a running local server

How does React deal with pre-compiled HTML from PhantomJS?

I compiled my reactjs using webpack and got a bundle file bundles.js. My bundles.js contains a component that make API calls to get the data.
I put this file in my html and pass the url to phantom.js to pre-compile static html for SEO reasons.
I am witnessing something strange here, the ajax calls for APIS are not getting fired at all.
For example, I have a component called Home which is called when I request for url /home. My Home component makes an ajax request to backend (django-rest) to get some data. Now when I call home page in phantomjs this api call is not getting fired.
Am I missing something here?
I have been using React based app rendering in Phantomjs since 2014. Make sure you use the latest Phantomjs version v2.x. The problems with Phantomjs occur because it uses older webkit engine, so if you have some CSS3 features used make sure they are prefixed correctly example flexbox layout.
From the JS side the PhantomJS does not support many newer APIs (example fetch etc.), to fix this add the polyfills and your fine. The most complicated thing is to track down errors, use the console.log and evaluate code inside the Phantomjs. There is also debugging mode which is actually quite difficult to use, but this could help you track down complex errors. I used webkit engine based browser Aurora to track down some of the issues.
For debugging the network traffic, try logging the requested and received events:
var page = require('webpage').create();
page.onResourceRequested = function(request) {
console.log('Request ' + JSON.stringify(request, undefined, 4));
};
page.onResourceReceived = function(response) {
console.log('Receive ' + JSON.stringify(response, undefined, 4));
};

Find out what exactly XMLHttpRequest is requesting

We're developing a cross-platform application using PhoneGap. At one point, it makes an AJAX request to a relative path, which works fine on both Android and iOS, but not Windows Phone - it gets a 404 response. An absolute URL works fine. The following code:
var a = document.createElement('a');
a.setAttribute('href', 'personalData.html');
console.log(a.href);
also resolves to the correct absolute URL. However, the following:
var xhr = new XMLHttpRequest();
xhr.open("GET", "personalData.html", true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
console.log(xhr);
}
};
returns 404. I want to find out what's going on. Is there any way to know what absolute path XHR is requesting?
XMLHttpRequest is a JavaScript object that was designed by Microsoft and adopted by Mozilla, Apple, and Google, it's not related to Phonegap.
https://developer.mozilla.org/en/DOM/XMLHttpRequest
Said this, you could try using an http Proxy like Fiddler to view all http trafic.
http://www.fiddler2.com/fiddler2/
Best regards.
In these cases, Fiddler Web Debugger is unbeatable. It will tell you exactly what the request is doing.
It also works with the Windows Phone emulator. To debug an actual device, setup FIddler to accept external connections and assign Fiddler as a proxy on the phone.
I have done both scenarios, works fine.
Give it a shot.
I have try your code in my project (Phonegap/WinPhone7) and your code didn't get anything till I initialized the request (xhr.send();).
I have no idea how you make request without this method.

Ajax locally testing

I'm new to this Ajax thing. I wanted to try this
http://labs.adobe.com/technologies/spry/samples/data_region/SuggestSample.html
neat little Autosuggest form.
The form doesn't work when i save it locally.
Below there is a list of what i've done and used so far :
Firefox -> save pages as ..(index.html)
new folder ( test23 )
also saved the products.xml
opened index.html
change this line : var dsProducts = new Spry.Data.XMLDataSet("../../demos/products/products.xml", "/products/product", { sortOnLoad: "name" })
into : var dsProducts = new Spry.Data.XMLDataSet("products.xml", "/products/product", { sortOnLoad: "name" })
test failed :(
Can anyone help me out ?
AJAX requests cannot access the local file system, so requests like that will fail. You will need to have the page up on a webserver. If you want a local one, install XAMPP or something similar.
I just tried for like three minutes and got it to work at the first try (without images). you have to remember to get all the scripts and actually point to them in the main html file.
Don't forget the script tags on lines 41 through 43.
Kris
-- additions:
I tested on my Mac's local filesystem without any server using Safari as my browser. I have since deleted the files but could easily do it again and put the files up for download.

Resources