loadXML() results in error

FeliciaE

Hello, I need to get a value from a web page and use this in my p5.js sketch. I do this by using the loadXML command, but it does not work. What I want to achieve is getting a string with the source code of the web page, so that I can get the value out of this string. I tried to do this with the following code:

function setup() {
  createCanvas(200, 200);
  var url = 'http://creators.ewi.utwente.nl/site/s1712187/SmartPad/';
  loadXML(url, callback, error);
}

function draw() {
  
}

function callback() {
  print("it is callback");
}

function error() {
  print("it is error");
}

"It is error" is the line that is printed when I run the sketch. Who knows what my mistake is?? Of course the code should be extended by creating a string and reading the data etc. but first the loadXML function should load the html source code properly.

(The only examples that I can find are based on JSON instead of XML.)

GoToLoop

I've tried a tweaked version of your code here:
http://p5ide.HerokuApp.com/editor#?sketch=56f56352df864f0300d25ca5

Hitting F12 in the browser, I could spot this error message:

XMLHttpRequest cannot load http://creators.ewi.utwente.nl/site/s1712187/SmartPad/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://p5ide.herokuapp.com' is therefore not allowed access.

Therefore it's CORS related. We don't have permission to access that resource from that URL.

You can try out your luck w/ a CORS proxy though:
https://GitHub.com/technoboy10/crossorigin.me

const SITE = 'http:' + '//'
             'creators.ewi.utwente.nl/site/s1712187/SmartPad/';

function setup() {
  createCanvas(400, 400);
  noLoop();
  background(0300);
  loadXML(SITE, success, error);
}

function draw() {
}

function success(xml) {
  print('SUCCESS!');
  console.info(xml);
  background('blue');
  redraw();
}

function error(err) {
  print('ERROR!');
  console.log(err);
  background('red');
  redraw();
}

FeliciaE

When uploading this code, again the error callback is executed instead of the success callback. Also, running the code at http://p5ide.herokuapp.com/editor#?sketch=56f56352df864f0300d25ca5 does result in a red screen :/

GoToLoop

That's what I've said: I had the same error even w/ my tweaked version! ^#(^
A possible workaround is the CORS proxy link I've posted above. :-\"

FeliciaE

Sorry haha. But when implementing that in my code, I get this error: 22532: Uncaught TypeError: Cannot read property 'documentElement' of null.

FeliciaE

Is it even possible to load a HTML page using loadXML?

GoToLoop

I believe so, given HTML is based on XML.
Have you tried & read the instructions from https://GitHub.com/technoboy10/crossorigin.me already?

FeliciaE

I added http://crossorigin.me to my url and then I got the error mentioned before. Don't know what else I could do with this link you sent

GoToLoop

Can you post your latest attempt? :-$

FeliciaE

Sure, didn't change that much though

function setup() {
  createCanvas(200, 200);
  var url = 'http://crossorigin.me/http://creators.ewi.utwente.nl/site/s1712187/SmartPad/';
  iets = loadXML(url, gotData, error);
  print(iets);
}

function draw() {
  background(200);
}

function gotData(data) {
  print("data is available");
  //print(data);
}

function error() {
  print("an error has occured");
}

GoToLoop

I've modified the online example to include CrossOrigin.me too:
http://p5ide.HerokuApp.com/editor#?sketch=56f598faebe33e03002c17c2

This time the console error is:

Error on line 7: Uncaught TypeError: Cannot read property 'documentElement' of null

I dunno what else to help ya out, sorry. However you can still post this issue here:
https://GitHub.com/processing/p5.js/issues

const SITE = 'http:' + '//CrossOrigin.me/'+ 'http:' + '//' +
             'creators.ewi.utwente.nl/site/s1712187/SmartPad/';

FeliciaE

Yeah I got the same error in my sketch. Thanks anyway ;)

GoToLoop

https://GitHub.com/processing/p5.js/issues/1325

FeliciaE

I found the problem. It had nothing to do with cross-policy. The problem is that when testing the p5 sketch, you run it at the local host. Appearently, this local host cannot load the webpage you are requesting data from. So when you want to test the sketch, you need to upload it to a webpage which is not local, and then it should work!! It worked for me. The sketch above works fine, just not in the local server!

GoToLoop

... you run it at the local host. Apparently, this local host cannot load the webpage...

http://p5ide.HerokuApp.com/editor#?sketch=56f598faebe33e03002c17c2 isn't a local host.

Regardless http://p5ide.HerokuApp.com was not authorized to grab resources from http://creators.ewi.utwente.nl/site/s1712187/SmartPad.

It had nothing to do with cross-policy.
... you need to upload it to a webpage...

Au contraire, it's all about CORS! Either you had it uploaded to http://creators.ewi.utwente.nl itself or the URL host had authorization to grab resources from the former.

FeliciaE

I mean, when pressing play in p5.js editor, the sketch is uploaded to the local host. I did not mean "you" personally ;)

FeliciaE

Oh, and I used loadStrings instead of loadXML, maybe that's the reason why your sketch didn't work ;)

blindfish

You're using loadStrings to get a value from a webpage? :-&

Wait - are you actually using a webpage to transfer data to your sketch? :(|)

Either way just seems plain wrong... If you can implement it, the best approach would be to serve your data in JSON format in a .json file. That's very easily parsed by JavaScript and at a push you can using JSONP to get around cross-origin issues....

FeliciaE

The problem is that I don't have control over the webpage. It is html and I have to deal with that.. Any idea on how to do that without loadStrings?

blindfish

TBH in the case of the page you're pulling from you can get away with it ;)

It is generally a very bad idea to treat HTML as a string and to try and extract data via String methods. Instead it's better to generate a DOM model and inspect that with DOM methods like querySelector...