I have encountered a problem with Internet Explorer and JSON Web Services and was wondering if anyone else has as well. Using jQuery, I tried to access a specific URL on the same domain that returns JSON data. This works perfectly on Firefox and Chrome. However, the first Ajax request always fails in Internet Explorer. What's more interesting is that subsequent Ajax requests DO work, even though the request emanates from the same function!
At first, I thought that I might have done something wrong with jQuery but ... when I tried accessing my JSON Web service URL using Internet Explorer (directly into the address bar on a new tab), it also fails the first time, and succeeds afterwards. So I thought that it might be a problem with my Web service, but then I have the same issue with Web services available freely on the Internet. Every time I open a new tab and try to access a JSON Web service, the first call always fails.
Did anyone experience the same problem with Internet Explorer and JSON Web Service? I am focusing on the wrong problem: is the issue with IE not capable of accessing the Web service irrelevant, and the problem with jQuery is somewhere else?
My AJAX call is written as follows:
$.ajax({
async: true,
type: 'GET',
url: '<JSON Web service URL>',
dataType: 'json',
cache: false, // Doesn't help
success: function(data, textStatus, xhr) {
alert('success');
},
error: function(xhr, textStatus, error) {
alert('failure');
}
});
I've tried this on several configurations, but the problem is always there:
Windows XP / Seven
Internet Explorer 7 (Real and IE 8 Emulated mode) / 8
Chrome 11
Firefox 4
jQuery 1.5.1 / 1.5.2
Thanks in advance,
I was facing same issue, updating jQuery to 1.6.4 solved the issue :)
Related
When I send a POST request to my local dev install of WordPress under MAMP 4.1 (Mac OS X 10.12 Sierra) It returns the entire HTML of the home page rather than the expected response. The behavior seems similar to this post except that I'm sure that the cause is not in the syntax of the request nor the WooCommerce-related plugin (NSP-Code Software License) that receives it (REST is enabled).
I've reinstalled MAMP, tried MAMP Pro, and recreated a simple WordPress test site several times, to no avail. An identical dev site on my laptop (MacBook Pro with same environment) works perfectly with requests sent from either PHP scripts or the Postman app. Postman does offer a clue, though, among the headers of the reply on my desktop install:
Link →http://localhost:8888/wordpress/wp-json/; rel="https://api.w.org/"
Link →http://localhost:8888/wordpress/; rel=shortlink
Server →Apache/2.2.31 (Unix) mod_wsgi/3.5 Python/2.7.13 PHP/5.4.45 mod_ssl/2.2.31 OpenSSL/1.0.2j DAV/2 mod_fastcgi/2.4.6 mod_perl/2.0.9 Perl/v5.24.0
My ISP has PHP 5.4.45 so I'm targeting that, although I get the same result with PHP 7.1. Is there anything in the local dev environment that could cause this?
Please check your functions properly and your function must be like this in proper way
In php file
add_action("wp_ajax_submit_form_data", "new_submit_form_data" );
function new_submit_form_data(){
if(isset($_POST['id'])){
$id = $_POST['id'];
// your code to manipulate data
}
die();
}
In jquery file
jQuery("#input-id").live("click", function(){
var id = jQuery(".textinput").val();
jQuery.ajax({
method: "POST",
url: ajaxurl,
dataType:"json",
contentType: "application/json",
data: {"id":id,action:"submit_form_data"},
success: function(response){
console.log(response);
}
});
}
After that view the response and do whatever you want to do with the response data.
Installing DesktopServer to replace MAMP solved the problem. It's not as configurable as MAMP, but it works!
I want to build a PhoneGap HTML5 app with a StackMob backend. There seems to be a shortage of books, videos, and tutorials on the topic.
Specifically, how can I build a Phonegap + StackMob app without using Require.js and Backbone.js?
I think stackmob developer website: https://developer.stackmob.com/ is the best resource.
Using phoneGap with StackMob is independent of using Backbone.js and Require.js. The StackMob SDK is built using Backbone.js for managing models and collections.
So, if you want to build an app without Backbone.js, you can make bare AJAX calls to StackMob. Here is a JSFiddle showing how.
http://jsfiddle.net/ericktai/mr925/
/*
We want to prepare the Request headers we're going to send to StackMob. It should look like:
{
'Accept': application/vnd.stackmob+json; version=0',
'X-StackMob-API-Key-dc0e228a-ccd3-4799-acd5-819f6c074ace': 1,
'Range': 'objects=0-9' //this is optional, but I did it here to show pagination and extra header fields
}
You can actually have the public key in the header as:
'X-StackMob-API-Key': dc0e228a-ccd3-4799-acd5-819f6c074ace
OR
'X-StackMob-API-Key-dc0e228a-ccd3-4799-acd5-819f6c074ace': 1
The first is our original format. The reason why I chose the latter is because of this specific example. I'm making cross domain requests jsfiddle.net to api.stackmob.com, which the browser doesn't allow UNLESS we use CORS (cross origin resource sharing). StackMob servers support CORS, but it needs the latter header format to do so. (it was introduced later). iOS and Android SDKs use the first format.
Node.js should be able to use the first format because it doesn't restrict cross domain calls.
The "1" value in the latter format is arbitrary. IE just doesn't allow the value of a header to be empty, so we filled it with "1".
*/
var publicKeyHeader = 'X-StackMob-API-Key-dc0e228a-ccd3-4799-acd5-819f6c074ace';
var requestHeaders = {};
requestHeaders['Accept'] = 'application/vnd.stackmob+json; version=0';
requestHeaders[publicKeyHeader] = 1;
requestHeaders['Range'] = 'objects=0-9'; //set pagination to first 10
$.ajax({
url: 'https://api.stackmob.com/item',
headers: requestHeaders, //set the headers
type: 'GET',
success: function(data, textStatus, xhr) {
console.debug(data);
},
error: function(xhr, textStatus, error) {
console.debug(error);
}
});
Regarding phoneGap, you'll want to look at the following docs.
https://developer.stackmob.com/js-sdk/using-the-js-sdk-with-phonegap-guide
I've used Adobe phoneGap build successfully.
Btw- I am the Platform Evangelist at StackMob
I've been working on a site that implements Twitter's API using jQuery's $.ajax function. It works when I run it on my machine, but when I upload it to my server and run it, it returns at 403: forbidden every time. I definitely haven't exceeded their rate limit, so I don't think I've been blacklisted. A few of my colleagues have developed similar problems in their pages since around midnight last night. Does anyone know if Twitter is changing their API? Have they depreciated the json requests?
Here is my code for those interested:
$(document).ready(function() {
$.ajax({
type: "GET",
url: "http://search.twitter.com/search.json?q=not+art&rpp=100&callback=?",
dataType: "json",
success: function(data) {
d = data.results;
for(i=0;i<d.length;i++){
var idStr = d[i].id_str;
console.log(i+" = "+idStr);
}
}
});
});
I'm fairly certain it's not a code issue since it still works running offline, but there isn't any word from twitter on recent changes that I can find. Any help or info would be greatly appreciated. Are we all going to have to learn a new API?
EDIT 3/29/13
The problem appears to be connected to using a shared IP address to access the search.twitter.com API. The Twitter Developer forums didn't have any more information than that, unfortunately, but if you are having similar problems, look into that.
I am a novice to Angularjs and tried to follow example given for $http.get on angularjs website documentation.
I have a REST service, which when invoked returns data as follows:
http://abc.com:8080/Files/REST/v1/list?&filter=FILE
{
"files": [
{
"filename": "a.json",
"type": "json",
"uploaded_ts": "20130321"
},
{
"filename": "b.xml",
"type": "xml",
"uploaded_ts": "20130321"
}
],
"num_files": 2}
Part of the contents of my index.html file looks like as follows:
<div class="span6" ng-controller="FetchCtrl">
<form class="form-horizontal">
<button class="btn btn-success btn-large" ng-click="fetch()">Search</button>
</form>
<h2>File Names</h2>
<pre>http status code: {{status}}</pre>
<div ng-repeat="file in data.files">
<pre>Filename: {{file.filename}}</pre>
</div>
And my js file looks as follows:
function FetchCtrl($scope, $http, $templateCache) {
$scope.method = 'GET'; $scope.url = 'http://abc.com:8080/Files/REST/v1/list?&filter=FILE';
$scope.fetch = function() {
$scope.code = null;
$scope.response = null;
$http({method: $scope.method, url: $scope.url, cache: $templateCache}).
success(function(data, status) {
$scope.status = status;
$scope.data = data;
}).
error(function(data, status) {
$scope.data = data || "Request failed";
$scope.status = status;
});
};
}
But when I run this, I do not see any result for filenames and I see http status code = 0
When I run , http://abc.com:8080/Files/REST/v1/list?&filter=FILE in browser, I still can see desired results (as mentioned above)
I even tried to debug using Firebug in firefox, I see the above URL gets invoked when I hit "Search" button but response looks to be empty. And interestingly in Firebug under URL, it shows
OPTIONS "Above URL"
instead of
GET "Above URL"
Can you please let me know, what I am doing wrong and why I am not able to access JSON data ?
Thanks,
This is because how angular treats CORS requests (Cross-site HTTP requests). Angular adds some extra HTTP headers by default which is why your are seeing OPTIONS request instead of GET. Try removing X-Requested-With HTTP header by adding this line of code:
delete $http.defaults.headers.common['X-Requested-With'];
Regarding CORS, following is mentioned on Mozilla Developer Network:
The Cross-Origin Resource Sharing standard works by adding new HTTP
headers that allow servers to describe the set of origins that are
permitted to read that information using a web browser.
I have been having the issue using $resource, which also uses $http.
I noticed that when I used AngularJS 1.0.6 the request would not even show up in Firebug, but when using AngularJS 1.1.4 Firebug would show the GET request and the 200 OK response as well as the correct headers, but an empty response. In fact, the headers also showed that the data was coming back as shown by the "Content-Length" header having the correct content length, and comparing this against a REST Client plugin I was using that was successfully retrieving the data.
After being even further suspicious I decided to try a different browser. I had originally been using Firefox 16.0.1 (and also tried 20.0.1), but when I tried IE 9 (and AngularJS 1.1.4) the code worked properly with no issues at all.
Hopefully this will help you find a workaround. In my case, I noticed that I never had this problem with relative URLs, so I'm changing my app around so that both the app and the API are being served on the same port. This could potentially be an AngularJS bug.
I had the same problem today with firefox. IE worked fine. I didn't think it was cors at first because like you I got no errors in the console and got a status of 0 back in my error method in angular. In the firefox console I was getting a 200 response back in my headers and a content length, but no actual response message. Firefox used to give you a warning about cross site scripting that would point you in the right direction.
I resolved the issue by setting up cors on my api. This is really the best way to go.
If you are only using GET with your api you could also try using jsonp this is built right into angular and it is a work around for cors when you do not control the api you are consuming.
$http.jsonp('http://yourapi.com/someurl')
.success(function (data, status, headers, config) {
alert("Hooray!");
})
.error(function (data, status, headers, config) {
alert("Dang It!");
});
It's cross-site-scripting protection.
Try starting google chrome with --disbable-web-security (via command line).
If that isn't working also try to put your angular stuff into an http server instead of using the file protocol. (Tip: use chrome canary if you want to have a browser dedicated to --disable-web-security - of course you'll have to set the command line argument too, but both chrome versions run simultaneously). For release you'll have to set some http headers on the server providing the AngularJS-stuff to allow access to the twitter api or whatever you want to call.
I am using the offline HTML5 functionality to cache my web application.
It works fine some of the time, but there are certain circumstances where it has weird behaviour. I am trying to figure out why, and how I can fix it.
I am using Sammy, and I think that might be related.
Here is when it goes wrong,
Browse to my page http://domain/App note: I haven't included a slash after the /App
I am then redirected to http://domain/App/#/ by sammy
Everything is cached (including images)
I go offline, I am using a virtual machine for this, so I unplug the virtual network adapter
I close the browser
I reopen the browser and browse to my page http://domain/App/#/
The content is showing except for the images
Everything works fine if in step #1 I browse to http://domain/App/ including the slash.
There are some other weird states it gets into where the sammy routes are not called, so the page remains blank, but I haven't been able to reliably replicate that.
??
UPDATE: The problem is that the above steps caused problems before. It is now working when I follow the above steps, so it is hard to say what is going on exactly. I am starting from a consistent state every time because I am starting from a snapshot in a VM.
My cache manifest looks like this,
CACHE MANIFEST
javascripts/jquery-1.4.2.js
javascripts/sammy/sammy.js
javascripts/json_store.js
javascripts/sammy/plugins/sammy.template.js
stylesheets/jsonstore.css
templates/item.template
templates/item_detail.template
images/1Large.jpg
images/1Small.jpg
images/2Large.jpg
images/2Small.jpg
images/3Large.jpg
images/3Small.jpg
images/4Large.jpg
images/4Small.jpg
index.html
I'm running into a similar issue as well.
I think part of the problem is that jquery ajax is misinterpreting the response. I believe sammy is using the jquery to make the ajax calls, which is leading to the errors.
Here's a code snippet i used to test for this (though not a solution)
this.get('#/', function (context) {
var uri = 'index.html';
// what i'm trying to call
context.partial(uri, {});// fails on some browsers after initial caching
// show's that jquery's ajax is misinterpreting
// the response
$.ajax({
url:uri,
success: function(data, textStatus, jqXHR){
alert('success')
alert(data);
},
error: function(jqXHR, textStatus, errorThrown){
alert('error')
if(jqXHR.status == 0){ // this is actually a success
alert(jqXHR.responseText);
}else{
alert('error code: ' + jqXHR.status) // probably a real error
}
}
});