I have a problem with an Azure Web App, as it does not load a .json file that is located on the server. The app is running fine until it needs to load the data from the .json file. The event is triggered by clicking a button that runs a javascript code that makes a XmlHttpRequest call.
This is the jQuery code (placed inside mvc_test.js file) that makes the request:
$(document).ready(function () {
var model = {
userLanguage: 'en-EN',
getData: function() {
return $.ajax({
url: "https://easyfabric.azurewebsites.net/js/clauses_array.json",
type: "GET",
dataType : "json", //"text"
timeout: 5000
});
}
};
I have used an absolute path to the resource, but i received the same error using a relative path.
The code above should get the data and pass it to a function that will print the data to the console.
It had worked before, but then i have changed intentionally to a wrong path for testing a modal window containing an error message. When i changed back to the correct path (yesterday) i start receiving 404 Errors. I have moved the ***.json file***in the same folder with the javascript file that makes the xhr request but does not work either. The index.html, .css and .js files, jquery and office-ui frameworks are loaded without problems.
The content of the app is deployed to the server from a github repository.
The Failed Request Tracing log in the Diagnostic section of Azure Portal gives me a warning of SECURITY_DENIED_BY_MIMEMAP and a MODULE_SET_RESPONSE_ERROR_STATUS.
Seems that some security setting on the server denies the access to the .json file. But it is strange that the .js file from the same folder is loaded ( as I have cleared the cache of my browser) and .json file is not.
Can anyone shed some light to this problems and how can be solved?
Thanks!
I had the same problem a few months ago.
I've fixed it by adding to the web.config these lines of code
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<staticContent>
<remove fileExtension=".json"/>
<mimeMap fileExtension=".json" mimeType="application/json"/>
</staticContent>
</system.webServer>
</configuration>
This essentially says to IIS to serve ALL .json files as a static file, as by default this feature is disabled.
If you don't have a web.config file you need to create it in the root folder of your website.
I hope I helped you :)
Related
So I have been getting the infamous 404.3 error when trying to use AXAJ to access a .json file launching the site (or more of a test app hehe) through WebMatrix on localhost.
Yes, I am aware of the IIS configuration. I am on Windows 8.1(x64), so I had to even turn on MIME types functionality separately. I configured a MIME type for .json with application/javascript. Then I went and added a handler to *.json, pointed it to C:\WINDOWS\system32\inetsrv\asp.dll. I set the verbs to GET and POST (those are what I use in my ajax function). I also tried unchecking the "Invoke the handler only if request is mapped to..." to no avail.
I am using one function to send data to PHP file which writes it to the JSON file and then another to fetch data from the JSON file directly. Writing through PHP works. Fetching doesn't. I am completely at a loss, does anyone have any ideas? The code I am using to fetch the data is your bog-standard ajax:
function getDate(path, callback) {
var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = function() {
if (httpRequest.readyState === 4) {
if (httpRequest.status === 200) {
var data = JSON.parse(httpRequest.responseText);
if (callback) callback(data);
}
}
};
httpRequest.open('GET', path);
httpRequest.send();
}
When I host this on my server space, it works totally fine. But I want to get it to work locally for testing purposes as well.
If writing to the file works but fetching doesn't work. Then you should check for the link of the file.
The error 404 as the name refers to, is an error for the file name. There isn't any other sort of error, even the Ajax request is working fine and giving the error 404 (file not found). So the only thing that you can do is, to make sure that while fetching the data, you use the correct link.
Here can be a help, when you send the Request through Ajax, there is a Network tab in your Browser's console. Open it, and look for the request. It would in red color denoting an error and click it. You'll see that the link you're providing isn't valid.
Look for the errors in the File Link then and update it.
The lengths I go to, to clean up my profile...
When you require a JSON format, or any file for that matter you have to specify in your request what data type you need, IIS will not make any assumptions. So
xhr.setRequestProperty('Content-Type', 'application/json');
is something one must not forget. I set also the X-Requested-With header. Note that to reproduce this issue I used IIS that is installed on Windows 10 Pro, so not exactly the same system (3 years later - holy crap!).
I am extremely new to using phonegap,codeigniter and jQuery Mobile (My first project) and have currently created an app with jQuery Mobile on the Client side and on the Server side I used the Codeigniter framework to create a RESTful API. Now when I am developing locally the app with in the browser (not yet using phonegap) communicates just fine with the API and no problems occur.
I placed the Codeigniter API on a server yesterday and I am now encountering 2 problems:
The App which was built using jQuery Mobile keeps getting the
following error:
Origin localhost is not allowed by Access-Control-Allow-Origin.
Now I have done some reading up and most people say to use jsonp instead of json and also to use the following on the Server Side:
$CI->output->set_header("Access-Control-Allow-Origin: *");
$CI->output->set_header("Access-Control-Expose-Headers: Access-Control-Allow-Origin");
$CI->output->set_status_header(200);
$CI->output->set_content_type('application/json');
Now my problem is I'm not entirely sure which one is used to fix the problem, weather it is both that need to be implemented etc. If they need to be fixed, how is it done? Is there a place that is well documented that can teach me how to deal with this problem, preferably I would like some where to read up on so I can learn?
The second problem is when I place the jQuery Mobile app into
phonegap and build it for Android. The app fails to get the
data from the server. Now is the reason for this because of the cross
domain error above or is this problem different? I also did some
reading up in this section as well and to my Android config.xml I
added the following code:
But I'm I still can't pull anything from the server. Like I said I'm a bit of a newbie but would really appreciate some help in this matter. Also I am aware that I haven't posted code but based on the comments I'll post which ever code the community needs to help solve this problem, just simply specify which code. Thank you for the help in advance!
About the Access-Control-Allow-Origin problem, I faced the same error and solved by placing this line <?php header('Access-Control-Allow-Origin: *'); ?> in the index.php which is in the root of the project.
This question hasn't been answered 100% but for now thanks to the help of #Niloy Saha, to fix the Access-Control-Allow-Origin error with with the Codeigniter RESTful frame work simply go to your controller in the Controller folder and right at the top paste;
header('Access-Control-Allow-Origin: *');
This then should allow you to communicate from the browser to the server and be able to get a response. After a good for hours of trying I managed to fix my problem. With in the Android project in the res/xml folder there is a file called config.xml. In that file be sure to have the following code:
<access origin="http://10.0.2.2*" subdomains="true"/>
and also make sure you have the following:
<uses-permission android:name="android.permission.INTERNET" />
in your AndroidManifest.xml. For me that seemed to get everything to work
I did similar thing as yours, Zend FW with API on server and jQuery Mobile App.
I've used JSONP, didn't use any Access-Control-Allow-Origin headers.
I have a method in my controller:
function returnData($data) {
header('Content-type: text/javascript');
echo $_GET['callback']. '('. json_encode($data). ')';
die();
}
At the end of API call i use it to return data.
Getting data in jQuery:
$.ajax({
dataType: "jsonp",
url: url,
data: {someparam: 'value'},
success: function(data) { /* ur data is here */ }
});
I'm developing a HTML5 application for Blackberry OS 5+.
I'm using jQuery to download and XML file and show it using this function:
$(document).ready(function()
{
$.ajax({
type: "GET",
url: "http://xxx.com/yyy/mTop",
dataType: "xml",
success: function(xml) {
$(xml).find('item').each(function(){
var tipo = $(this).find('tipo').text();
var porcentaje = $(this).find('porcentaje').text();
$('<div class="items"></div>').html('<p>' + tipo + ' - ' + porcentaje + '</p>').appendTo('#page-wrap');
});
}
});
});
But I'm getting this error:
XMLHttpRequest cannot load http://xxx.com/yyy/mTop. Origin file:// is not allowed by Access-Control-Allow-Origin.
How can I parse a remote XML file?
Maybe I need to convert XML retrieved to a DOM object for use with jQuery.
That's because of Same Origin Policy:
The policy permits scripts running on pages originating from the same site to access each other's methods and properties with no specific restrictions, but prevents access to most methods and properties across pages on different sites
you should use JSONP instead.
And the reason why you dont have a file location in your link ( url: "http ://xxx.com/yyy/mTop" ) is becouse the site "produces" an xml the moment you visit the folder, slowing down the website each time you reach it..
What you must do is:
go to http ://xxx.com/yyy/mTop on your browser
right click - view source code - copy to notepad - save as .xml
upload file to another folder
then change your code url to this url: "http ://xxx.com/yyy/mTop/yourdailyXMLcopy. xml
and keep updating the file daily..else you will kill the server querying each time any user uses your thing for a huge job...
Part of your problem is your file path is to a folder and not an XML file. Start there and see if you're problem still exists.
I recently published my MVC3 app to an IIS6.0 server and I have the following image reference in a .js script (see code block below) but the images are not showing up. I know that #Url.Content() works but I can't use that in a .js script.
Q1: What is the proper path to reference for images (or whatever contents)? Thx!
src: '/content/themes/base/images/down.gif'
Q2: The following controller/action isn't firing in my ajax/jquery method (I'm sure it's related) but same issue with path:
$.ajax(
{ url: '/Controller/MyMethod', // Not firing
Place: #Url.Content("~/Content/Image ...") instead of url only
Paths off the root of your web directory should be prefaced by '~/' like so:
src: '~/content/themes/base/images/down.gif'
This tells the server that the path is relative to the root.
I want use $.ajax to read some infomation from xml file,here is my js code :
$.ajax({
type: "get",
url: "Database/App_all.xml",
dataType: "xml",
timeout: 2000,
beforeSend: function () {
},
success: function (xml) {
$(xml).find("app[id='id-1']").appendTo($("#contain"));
},
error: function () {
alert("ajax failed!");
}
});
However, the code only work great in firefox and opera.
It doesn't work in chrome(7.0.517.24 ) and safari(5.0.1),failed without any alert,not even the alert("ajax failed").
Is there any bug in $.ajax in chrome and safari?so how to solve the problem?
thank you very much:)
You should use chrome's or safari's built-in developer tools (ctrl+shift+i) to track JS errors and track actual AJAX requests.
Is your code wrapped in document.ready? Is there any erros in javascript console? Also try to output something after success callback line.
Another cause for this could be incorrect mime-type for your XML file returned by server. It should be [Content-type: text/xml]. You can check that in chrome's or safari's built-in developer tools - just look for headers tab when xml resource is selected. If it 's actual problem, you may need to tweak web-server configuration (main config or .htaccess for apache) to return correct mime-type.
First thank you gajendra.bang and Māris Kiseļovs give me your advices,I have konw what's wrong with my code,after I get a bad resault ,I trying to know what the $.ajax get from xml exactly,so I use firebug check the div#contain I found that:
<div id="contain">
<auther>cocept</auther>
</div>
yes,I think the <auther></auther> must the problem,I don't even konw the $.ajax would get the tagname as well
so I rewrite it :
success: function (xml) {
$("#contain").html($(xml).find("app[id='id-1']").find("auther").text());
}
then the div$contain is:
<div id="contain">
cocept
</div>
so ,the chrome and safari could show again!
I suppose you have problem with reading of the local file per ajax. Ajax can be used to read a file from the same web server, but there are some security restriction if you read it not per HTTP.
In firefox and opera you can read local files (with url like file:///C:/Program%20Files/My/Database/App_all.xml) per ajax without any problem.
In Internet Explorer you should use dataType: 'text' and then convert the text to XML (read more here).
To be able to read local files in Chrome you have to restart chrome with another parameters:
chrome.exe --allow-file-access-from-files
(Be sure that all other instances of chorme closed before starting Chrome.exe in the way).
This is a problem for local files... You should try uploading them on a web server and check from there
$(xml).find("app[id='id-1']").appendTo($("#contain"));
what is xml basically returning, an element with "#" like "#mydiv" or class like ".mydiv"
I think you are trying to access an element and if you are not returning it with "#", try
$("#"+xml).find("app[id='id-1']").appendTo($("#contain"));