i'm very new to this web related problems, please help
i'm working on sencha which proves to be very difficult wen it comes to json parsing . . . .
so i'm planning on retrieving the data to the html page and then load it into my js file. . .
so here is the problem:
i've already asked about it and got a reply..
http://jsbin.com/uwuca5
but now wen i use the html source code locally in my system or even by using the IIS i couldn't parse the data. . . . . . .
here is the link for my json file:
http://compliantbox.com/optionsedge/sample.php
i'm trying to use this link in my code and retrive the data but the data is returning null
Please Help
Thank you,
You may be running into the Same Origin Policy. Are you trying to retrieve the data from a different "origin"? For instance, when running locally on IIS (ajax stuff mostly doesn't work unless you're using a server), are you trying to reach out to http://compliantbox.com/optionsedge/sample.php to get the data? If so, that won't work in most cases (see the link for why). For instance, if I modify the JSBin code I gave you in my previous answer to use http://compliantbox.com/optionsedge/sample.php instead of http://jsbin.com/uwura4, it fails (example).
Cross-origin calls are possible, but you largely have to be in charge of both sides of the call for them to work. There's CORS (requiring special headers from the server, and support in the browser that's missing in IE6 and IE7; it's in IE8 but you have to use an XDomainRequest instead of an XMLHttpRequest), and there's JSON-P (requiring the source to support JSON-P explicitly).
I'm not familiar with Sencha, but it seems that you're trying to make a cross-domain AJAX call (calling the url http://compliantbox.com/optionsedge/sample.php from within another domain, e.g. from within your local web-site) which is basically not allowed (at least by using XmlHTTPRequest object).
I'd suggest you to take a look at these posts:
Forum post on jQuery web-site
The jQuery cross-domain AJAX guide
-- Pavel
If you need read the JSON from a different domain you can try first read the document from your server and serve it.
Jquery:
$.getJson("Url-in-your-domain");
Url-in-your-domain:
Read the remote document and serve it.
Try if you don't find any solution.
Related
I am trying to create a map and I have been using this tutorial https://newmedia.report/classes/coding/2018/mapping-in-d3/. I think the problem is that I can't load local files, but I am not sure how to fix it.
I have looked at other StackOverflow answers but keep getting the same problem. I tried setting up a dev server but it still isn't working. I also tried in firefox with the same code and got the error The Same Origin Policy disallows reading the remote resource at the file. (Reason: CORS request not HTTP). Then an error saying TypeError: NetworkError when attempting to fetch resource.
I am using all the same code from the tutorial but it isn't working.
Promise.all([
d3.json("ccc_precinct_topo.json"),
d3.csv("CCC_Primary_results.csv")
])
.then(function(data){
URL scheme must be "HTTP" or "HTTPS" for CORS request.
I keep getting an error like this for both files.
The recommended way would be to install a web server on your development system, e.g. XAMPP for a Windows or LAMP for a Linux system. Otherwise whenever you test something using AJAX calls you will run into problems of some sort.
Just for demonstration purposes you could save the JSON and CSV data as local variables. To do so, copy the contents of the JSON file "ccc_precinct_topo.json" into array data[0]:
var data= [];
data[0]= [...]; // contents of "ccc_precinct_topo.json"
In a second step, save the contents of the CSV file "CCC_Primary_results.csv" as a string into a new variable and use d3.csv.parse() to convert it into an array structure:
var csvContent= 'String|With|CSV|Values';
data[1]= d3.csv.parse(csvContent);
Now to see if you get correct values, send the data to the console:
console.log(data);
Open the Developer Tools (Hit F12) and refresh the page. In the Console section you should see an array with two elements, both should be array structures.
Instead of using Promises and d3.json(), d3.csv(), continue with the code you find below the .then(function(data){.
P.S. In most cases someone writing a tutorial about web services or pages assumes that the shown code will be used as part of a web project and thus will be loaded by a web server. But you are right, it could have been mentioned as a prerequisite, e.g. "Before you start, set up LAMP or XAMPP on your development system".
I'm a desktop developer that is trying to learn some web basics on the side. I've previously put together an asp.net mvc website that worked more or less okay and am currently working on a simpler, html/css/js only website.
A number of the pages on the website will contain images, with a number of pieces of data accompanying them, so I thought I'd put together a JSON with all of the data, including the links to the images and generate the image list on page load. The problem that I ran into is the JavaScript cross origin request when trying to fetch the JSON file.
I've looked around at solutions and most of them recommend spinning up a server - either asp.net or node.js to fetch the JSON from. Couple of questions:
If I can write HTML that references image files, why can I not fetch a json from javascript? Is there a fundamental piece of understanding that I'm missing here?
Is there any other way of using a JSON without spinning up a web server? Should I try embedding it into the HTML? Is that a bad idea?
Any other pointers/links to resources with relevant info :)
// My JavaScript:
<script>
$(document).ready(function(){
buildGallery('test.json', '#gallery');
});
// Builds a collection of thumbnails from the json specified inside of specified div
function buildGallery(jsonUrl, galleryDiv){
$.getJSON(jsonUrl, function(data){
// Ensure the data is in correct format
if (typeof(data) !== 'object'){
return;
}
// Build the gallery
$.each(data['images'], function(key, image){
var thumbnail = '<img src="' + image['url'] + '"/>'
$(galleryDiv).append(thumbnail);
});
});
}
</script>
This is based of: https://api.jquery.com/jQuery.getJSON/
Thanks heaps!
There are a couple issues with what you are trying to accomplish with the provided code.
First, you are trying to make an Ajax request to a resource that is not hosted on an http server. Ajax is a wrapper for XMLHttpRequest which was designed for fetching resources using the http protocol. However, it can support other protocols such as file, and ftp.
Second, CORS is not controlled by the browser, it's controlled by the http server. Cross domain origin requests can work, but only if the resource you are requesting responds with an http header that allows your domain to access it. Since the resource you are requesting has nothing to do with http, it will probably throw an error.
So why do images work using the file:// scheme? The <img/> tag supports loading resources using any scheme your browser cares to support. It turns out most browsers support it.
So I can't get json into my app without an http server!#? Yes and no. No because you usually cannot request a resource not served through an http server using XMLHttpRequest. However, you can still request resources through other means.
I recommend using the File API for reading files from the users filesystem.
Created javascript widget. Testing on my own domain and its working fine. However when posting on a 3rd party site it looks like it's not connecting to the database and getting the data.
Here is the part of the js file where I get the data:
/******* Load HTML *******/
var jsonp_url = "http://www.example.com/widget/data.php";
$.getJSON(jsonp_url, function(data) {
When I test on example.com everything is fine. I set the permissions on data.php to 777 and it still isn't working. Please help!
you cannot make an ajax call across different domains:
let's say your domain is 'example.com', and the third party site has 'thirdparty.com'. you install the widget on thirdparty.com. The widget code on thirdparty.com will try to make an ajax request to 'example.com'. Which is forbidden by the browser.
You can always replace the ajax call with a straight < script > tag. This doesn't have any restriction.
Hope it helps
You have a variable called jsonp_url, but the URL you use doesn't include the string callback=? which the documentation says triggers jsonp mode.
You need to include that in the URL and make sure that your server side script is outputting JSONP (using $_GET['callback'] (with suitable sanitisation) to determine the function name you wrap the JSON in).
they need to enable cross orgin resource sharing. http://enable-cors.org/
Hi
Is it possible to load an XML file from a domain that differs from scripts domain with pure javascript and without using a php/asp/jsp/... script as proxy?
Something like xmlHttpRequest but with ability to manage cross domain requests.
Thanks
You can use something called JSONP. I know the name sucks, because it's not really related to JSON. But this requires you have control over the other domain. You need to wrap your XML inside a function call, or assign it to a javascript variable:
func('<xml></xml>');
or
var myxml = '<xml></xml>';
So if your other domain returns one of these two formats, you can use the <script src="http://otherdomain/yourjsonp"></script> syntax in your html to load that data in JavaScript. It's a little hacky but a lot of people use it.
It is possible with yql! (Yahoo did it for you)
Go to this site and simple at the "select from url='xxx' " replace the xxx with your xml url. Use the url created at the text box below and do a simple xmlrequest. You won't have any cross-domain prolems
Not sure if it's possible but how do I read a resource from a url using javascript without ajax?
for example, the following url is a static text file containing json encoded text
http://mysite.s3.amazonaws.com/jsonencodedcontent.txt
I'd like to use javascript to read the content from above link, read the json content into a javascript variable.
I can't use ajax because of cross site and I have no control over amazon S3 domain.
anyway to achieve this?
Try #Ben's suggestion first. If for any reason that doesn't work in your case, here's two options I've both seen and used, which may or may not be available in your case (I'm providing two overly simplified examples just to clarify my points):
Create a server side resource that resides in your domain and retrieves and returns the cross site content for you:
<?php
die(file_get_contents('http://mysite.s3.amazonaws.com/jsonencodedcontent.txt'));
Use mod_rewrite (or something similar) to create a virtual resource in your domain that resolves to the remote content behind the scenes:
RewriteEngine On
RewriteRule ^jsonencodedcontext\.txt$ http://mysite.s3.amazonaws.com/jsonencodedcontent.txt [P]