Does anyone actually know how to fix these errors? - javascript

Does anyone know how to deal with these erros? I'm new to Javascript and I'm currently trying to learn some api stuff for esri. I honestly don't understand what these errors mean or how to go about fixing them. Here are the errors:
XMLHttpRequest cannot load file://www.arcgis.com/sharing/rest/content/items/b3c3566f3e1c4b6b8035185fba217f54?f=json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
q {message: "Unable to load file://www.arcgis.com/sharing/rest/…b3c3566f3e1c4b6b8035185fba217f54?f=json status: 0", response: Object, status: 0, responseText: "", xhr: XMLHttpRequest…}
Here is the code that made them.
<!doctype html>
<html>
<head>
<title>Create a Web Map</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.14/esri/css/esri.css">
<style>
html, body, #mapDiv, .map.container{
padding: 0;
margin: 0;
height: 100%;
}
</style>
<script>var dojoConfig = { parseOnLoad:true };</script>
<!--<script> Access-Control-Allow-Origin: null </script> perhaps this could be part of a solution-->
<script src="http://js.arcgis.com/3.14compact/"></script>
<script>
var map;
require([
"esri/map",
"esri/arcgis/utils",
"dojo/domReady!"
], function(Map, arcgisUtils){
arcgisUtils.createMap( "b3c3566f3e1c4b6b8035185fba217f54", "mapDiv").then(function (response) {
map = response.map;
});
});
</script>
</head>
<body>
<div id="mapDiv"></div>
</body>
</html>
Any help would be great. I have to say I am completely lost at this point.

Look at the URL:
file://www.arcgis.com/.....
AJAX doesn't work on the file system. (Nor is that likely to be a valid file system path anyway, it looks like it should be a website.) It works on web servers.
Presumably you're opening this HTML file directly from your file system. Instead, host it on a web server (which can be your local computer) and open it through HTTP.
There may yet be other concerns regarding your AJAX requests. Perhaps you're not specifying the URL correctly (there isn't a complete enough example here to know for certain), or perhaps even once you're making a request to a web server it may be a cross-domain request. We can't really know. But at the very least, this has to run on a web server.

Related

Why does the Google API not work in my Universal Windows App?

Error: 0x800a138f - JavaScript runtime error: Unable to get property 'setApiKey' of undefined or null reference
Hello I'm desperatly trying to get this to work on my Universal Windows App. There is a sample for Googles URL shortener with instructions on how to use the API.
https://developers.google.com/api-client-library/javascript/samples/samples
All of this works when I run this in my Browser, but as soon as I start running this in my Universal Windows App, it won't work. I figured that it had something to do with the security of the UWP, inline skripts arent allowed and you can't load scripts from the web normally. You have to use a webview to load scripts from the web so I did this with this webview:
<x-ms-webview id="UrlShortenerWebview"src="ms-appx-web:///Pages/URLShortener/URLShortener.html" style="width: 200px; height: 200px; border: 1px solid black;"></x-ms-webview>
This is my URL Shortener html file:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="https://apis.google.com/js/api.js" type="text/javascript"></script>
<script>
function appendResults(text) {
var results = document.getElementById('results');
results.appendChild(document.createElement('P'));
results.appendChild(document.createTextNode(text));
}
function makeRequest() {
var request = gapi.client.urlshortener.url.get({
'shortUrl': 'http://goo,gl/fbsS'
});
request.then(function (response) {
appendResults(response.result.longUrl);
}, function (reason) {
console.log('Error: ' + reason.result.error.message);
});
}
function init() {
gapi.client.setApiKey('AIzaSyCzBnER6KmLiO2ZBIycZIPCEQEXxIrHnR0');
gapi.client.load('urlshortener', 'v1').then(makeRequest)
}
gapi.load("client", init);
</script>
</head>
<body>
<div id="results"></div>
</body>
</html>
Error: 0x800a138f - JavaScript runtime error: Unable to get property 'setApiKey' of undefined or null reference
I have no idea why that happens or what else I can do to fix this. Is it even possible to use the google api in windows apps???
Please check Rob's comments in your MSDN case: https://social.msdn.microsoft.com/Forums/windowsapps/en-US/bd101515-212b-4366-b60d-2807b2783f62
Rob mentioned two choices: calling local js files if Google permits it, or taking full control and stream your content to your x-ms-webview with navigateToLocalStreamUri method.

Jquery ajax is giving me a 404 not found error

I have the following code:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
function loadPhotos(folderName){
var folder = "assets/photos/"+folderName+"/";
$.ajax({
url : folder,
success: function (data) {
$(data).find("a").attr("href", function (i, val) {
if( val.match(/\.(jpe?g|png|gif)$/) ) {
$("body").append( "<img src='"+ folder + val +"'>" );
}
});
}
});
}
</script>
</head>
<html>
<div onclick="loadPhotos('7thAnnual')">7th Annual</div>
</html>
For some odd reason when I click on the div, the loadPhotos function throws a 404 not found error on the ajax call.... but the directory that it is saying it can't find, does exist.
For the record I am running this on localhost (http://127.0.0.1:8020/).
the directory structure is Ljf/assets/photos/7thAnnual ....
so the full path would be http://127.0.0.1:8020/Ljf/assets/photos/7thAnnual
the 7thAnnual directory holds all the images
Any thoughts?
Okay.... so it seems that I have to fully qualify the name in the url like so:
var folder = "127.0.0.1:8020/Ljf/assets/photos/7thAnnual";
instead of using just:
var folder = "Ljf/assets/photos/7thAnnual"
This answer brings a
"Cross origin requests are only supported for protocol schemes: http,
data, chrome, chrome-extension, https, chrome-extension-resource."
which is a different issue than this post, but it does solve the
404 not found
So I'll mark it as the answer
You must create the directory assets/photos/7thAnnual/. Be sure you did that
If you run this in chrome and open the nifty little inspector
(right click on the background somewhere, choose inspect, then go to the network tab on the inspection window)
then click the div that should trigger the ajax, it should show you the path it tries to get to. (on your little network panel at the very bottom)
Make sure that the path looks right
Look at the response to see if there is any other potentially useful info
let me know what you find!

HTML button on client to run python script on server then send results to webpage on client

I have seen some previous questions, that were similar but I couldn't find anything like this. I have a webpage (on a server) and I would like the user to click a button which will execute a python script. I want this python script to run on the server and then send the results back to the webpage and display it.
When the user clicks the button, the data that will be sent to the server would be an XML file.
I just don't know where to start with all of this. What can I use to accomplish this?
Thanks for your time.
EDIT: I actually have the webpage all done and setup, and it produces the XML. I just need to run the python script when a user clicks on a button on the webpage. Not sure if that helps, but I'm posting it. Thanks
I WOULD LIKE A HIGH-LEVEL EXPLANATION FOR THIS PLEASE AND THANK YOU, since I don't know about what has been suggested to me already.
There is a lot of web libs for python. You may try bottle (work without installing, one-file, just put the „bottle.py” file in your work folder. A simple example:
from bottle import route, run, static_file, post, request
#route('/js/<filename>')
def js(filename):
return static_file(filename, root='js')
#route('/')
def index():return static_file('tst.html', root='./')
#post('/xml')
def xml():
for x in request.forms:
print(x)
return {'return': 'accepted'}
run(host='0.0.0.0', port=8000)
And html:
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>TTL</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<button onclick="test()">Test</button>
<script type="text/javascript">
function test() {
$.ajax({
url: 'xml',
type: 'POST',
data: '<my><xml>string</xml></my>',
dataType: 'json',
success: function (ret) {
alert(ret['return']);
}
});
}
</script>
</body>
</html>
Sorry for JQuery, to lazy to write plain js xhr.
Bottle is well documented, but cherrypy, pyramid, django, tornado also.

Update application cache

I wanted to make my site work offline and I did it. But the problem is that I can't update my manifest file. I have the function that should check for update and update it if is possible but I don't know why it's not working.
This is my index.html
<html manifest="VideoPlayer.appcache" >
<head>
<title>Video Player</title>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body id='main'>
...
<script>
window.addEventListener('load', function(e) {
window.applicationCache.addEventListener('updateready', function(e) {
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
window.applicationCache.swapCache();
if (confirm('A new version of this site is available. Load it?')) {
window.location.reload();
}
} else {}
}, false);
}, false);
....
</script>
</body>
</html>
And my VideoPlayer.appcache:
CACHE MANIFEST
index.html
style.css
http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
Can You tell me what's wrong with it?
I don't know whether your Javascript can make it easier (I sure hope so!), but what I have learned from experiments with appcached files is that they are only successfully updated/refreshed/reloaded in Chrome and Firefox under the following conditions:
The in your case VideoPlayer.appcache file itself must also be updated. You can do that by including a date and time in the file and change that to the date and time that you update the web page. See the below code block how to include date and time.
Chrome's normal but total browser cache must be cleared as well; just doing a 'hard reload' with Ctrl + F5 won't do. See here how to clear it: http://www.guidingtech.com/1662/clearing-cache-in-google-chrome/.
In Firefox, that doesn't even do, not even in combination with Ctrl + F5. Firefox's Offline Cache must be cleared: Tools -> Options -> Advanced -> Network -> Offline Web Content and User Data -> Remove [site].
Here is the date and time method for the appcache file:
CACHE MANIFEST
# 2014-06-25 — 15.50
CACHE:
[your to-appcache files here]
Changing the date and/or time will tell the browser that the to-appcache file is updated and should be reloaded.
I have not tested matters in IE, among others things because I don't have IE10, and IE9 doesn't do appcaches.
Let me know how it works out if you will, especially in combination with your Javascript.

Getting 404 for an external Javascript file in HTML on XAMPP

This is my first post on Stackoverflow. Please guide if I miss something.
I'm trying to do HTML5 development with external javascript file and testing the same on XAMPP 3.2.1 server.
I have stored "HF_Chapter10_WebWorkers_Example1" in "C:\xampp\htdocs" of XAMPP installation and the Javascript file "manager.js" is also residing in the same folder. The 'manager.js' internally creates a worker thread and invokes the same.
Issue: When I'm opening the HTML file in Google Chrome, I see 404 (in Dev chrome tools) stating the server can't find the external Javascript file referenced. Also, I see that the server is load the javascript file as 'text/HTML' instead of 'text/javascript'. I have tried appending type='text/javascript' in the call to the javascript but that didn't help either.
I'm trying to understand the reason of this issue.
This is what goes into the HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="dcterms.created" content="Wed, 08 Jan 2014 05:07:11 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title>HF_Chapter10_WebWork_Example1</title>
<LINK REL="stylesheet" HREF="theme.css" TYPE="text/css">
<script type="text/javascript" src="manager.js"> </script>
</head>
<body>
<p id="output"> ![enter image description here][1]</p>
</body>
</html>
This is what goes into the javascript file 'manager.js'
window.onload = function() {
//create the worker thread
var worker = new Worker("worker.js");
//send the message to the worker thread
worker.postMessage("ping");
//create an event listener to act on the messages arriving from the worker thread
worker.onmessage = function(event) {
var message = "Worker says" + event.data;
document.getElementById("p").innerhHTML = message;
}
}
This is what goes into the worker.js file:
onmessage = pingPong;
function pingPong(event) {
//based on the type of data, respond back with the 'postMessage'.
//Note that the message will go to the main javascript handler
if (event.data == "ping") {
postMessage("pong");
}
}
not clear what generates the 404 but this might help you
http://w3-video.com/Web_Tools/XAMPP/xampp_example_htdocs.html
I am attaching the image of the folder structure.

Categories