The following code works fine in iPads and iPhone (4,5) in Safari and Chrome. In contrast, the ajax call won't work (runs straight to the onError function) in Android devices and desktop browsers.
When I exchange the absolute URL for a relative one, the success/failure outcomes are reversed in these two groups.
How do I get around this problem (I'm running jquerymobile 1.3.0 beta)? Thanks/Bruce
$(document).ready(function() {
$("#submit").click(function(){
var formData = $("#loginf").serialize();
$.ajax({
type: "POST",
url: "http://mydomain.org/m2/scripts/site/bpg_process.asp?id=lg",
cache: false,
data: formData,
dataType: 'json',
success: onSuccess,
error: onError
});
return false;
});
});
Do you know that cross-domain Ajax calls are not allowed ?
Your problem may be linked to the URL from which you're making the request, and not to the browser you're testing in.
Read this for more details : http://en.wikipedia.org/wiki/Same_origin_policy
The important thing here for you is that the policy excludes different subdomains.
Ex. if you're sending a request from http://www.mydomain.org to http://mydomain.org it will fail, and vice versa.
What i do in your case usually is use the complete URL "/m2/scripts/site/bpg_process.asp?id=lg" without the protocol and host but with the starting "/" so it can be referenced from anywhere in the URL tree.
What is the "relative URL" that you're using and that "doesn't work"?
Like darma has mentioned. "cross-domain Ajax calls are not allowed".
Use absolute "local" pathing instead.
a slash '/' at the beginning of a link referees to the document root.
if you need to refer to an external domain, use ajax to call a local .asp document that calls the external page for you and returns the data you want in json.
Im not sure what this is in asp but in php, curl works.
Related
I have a JS file running on my site, it works fine.
Now I want to put on another site with the full url of the script back to my site.
<script src="http://www-js.mydomains.com/some/path/file.js"></script>
now is it really still cross domain to an xml request on my server?
so in the file.js I have something like
dojo.xhrGet({url: '/some/path/file.xml', sync: true, handleAs: 'xml', error: function(result,args){alert(result.responseText+'-'+args.responseText)}, load: function(result){ ....
this just dies on other sites (great dojo response of undefined)... is there away around it
I think you should use "script" dojo/request/script instead of xhr.
require(["dojo/request/script", "dojo/dom", "dojo/dom-construct", "dojo/json", "dojo/on", "dojo/domReady!"],
function(script, dom, domConst, JSON, on){
on(dom.byId("startButton"), "click", function(){
domConst.place("<p>Requesting...</p>", "output");
script.get("helloworld.jsonp.js", {
jsonp: "callback"
}).then(function(data){
domConst.place("<p>response data: <code>" + JSON.stringify(data) + "</code></p>", "output");
});
});
});
http://dojotoolkit.org/reference-guide/1.9/dojo/request/script.html
now is it really still cross domain to an xml request on my server?
Yes. The origin is based on the URI of the HTML document hosting the script, not the URI the script was sourced from.
You should send the HTTP headers defined in the CORS specification to allow other sites to use your script (or their own scripts) to access content on your server.
Additionally, URIs accessed by JS are also relative to the document and not the script, so you will need to use an absolute or scheme relative URI instead of the server root relative URI you are presently using.
Hi i have the following code
var dataString = "email=jdoe#example.com&fname=John&lname=Doe&phone=7851233&vid=726&size=2&date=2013-05-28%202:15%20PM&request=Testing%20A%20Message";
$.ajax({
type: "GET",
timeout: 5000,
url: "http://www.livepicly.com/app/api.php?method=add_reservation",
data: dataString,
success: function(data, textStatus) {
alert(data.result);
},
error: function(xhr, textStatus, errorThrown){
alert("ERROR");
}
});
return false;
Where basically i would like to submit a piece of string to this URL:
http://www.livepicly.com/app/api.php?method=add_reservation
The formatted string (as displayed by firebug) is like this:
http://www.livepicly.com/app/api.php?method=add_reservation&email=jdoe#example.com&fname=John&lname=Doe&phone=7851233&vid=726&size=2&date=2013-05-28%202:15%20PM&request=Testing%20A%20Message
When the string is executed via browser (straight copy-pasting) it works perfectly. It displayed the corresponding message.
However, when i execute the code, it always returns error. Does anyone know why this happen?
Cheers,
The API in question is not RESTful.
Anyway, your problem is a combination of factors. What it definitely is NOT is the API actually throwing an error, as all errors are returned as 200 status codes. (Not RESTful Point #1). So, even if livepicly returned an error, it'd still count as success on jQuery handlers.
In no particular order:
The API is not throwing Access-Control-Allow-Origin headers. It does not support JSONP either. (This can be seen by querying http://www.livepicly.com/app/api.php?method=add_reservation&callback=test ). This will completely prevent jQuery from loading any data of performing any queries to the API due to cross-domain restrictions
That's the only thing that is failing! This is also completely preventing jQuery usage. You'll need to make a choice to go around this one, which may or may not include:
Proxying the API locally. This is trivial if your webserver is running thanks to Apache or nginx. For Apache, use ProxyPass and ReverseProxyPass directives using mod_proxy, or use a rewrite rule with the [P,L,QSA] set of flags. On nginx, use the proxy_pass directives. If you have access to neither, proxy it using curl through PHP.
Giving the developers of the API a slap in order for them to simply add Access-Control-Allow-Origin: * to the headers, which will make your call work
Giving the developers of the API a slap in order for them to support JSONP
Overall, just point them to https://en.wikipedia.org/wiki/Representational_state_transfer and give them a slap for me. Please?
As the title says, I'm trying to access (POST) using jQuery AJAX call to a web url, http://host:port/... or http://localhost:8080/... from a local HTML file, c:\home.html. I can't get it to work.
I did Google and also saw several questions here but I can't get it to work. I need some help here. Here is what I've tried so far.
dataType: jsonp
crossDomain: true
Setting the header in my response:
response.setHeader("Access-Control-Allow-Origin", "*");
None of the three browsers are working - IE, FF or Chrome. The request is never reaching the server. Here are some of the errors I'm seeing.
No Transport (IE) if not jsonp is used.
NS_BINDING_ABORTED / Error loading content (NS_ERROR_DOCUMENT_NOT_CACHED) in FF
This is my code. I would appreciate any help. I'm using jquery-1.8.2.min.js.
var http_host = "http://localhost:8080";
function su (pc, p) {
var suUrl = http_host + "/ps/api/v2/authorize.json";
$.ajax({
type: 'POST',
url: suUrl,
data: {
phone_cell: pc,
password: p,
},
dataType: "json",
crossDomain: true,
success: osu,
error: oe
});
return false;
}
function osu (d) {
console.log(d);
}
function oe(xhr, ts, et) {
alert("ServerError: " + et);
}
An example would be a perfect pointer.
I suppose my code got messed up w/ all the different solutions that I was trying. I was finally able to get it to work w/ setting the header (solution that was recommended and worked for others). All that I had to do to get it to work is add the following to my REST service response.
response.setHeader("Access-Control-Allow-Origin", "*");
Update:
I thought I figured this out but I've not. There is more it than just setting the header. Anyways, in my specific situation. I was trying to run my app (html, js) off of the hard drive specifically on chrome and trying to access web services available on the cloud.
Here is how I finally solved the problem. I started the chrome w/ the following parameters.
--disable-web-security -–allow-file-access-from-files
Like I mentioned earlier, this app is really a desktop application that will be run as part of the chromium embedded framework.
Thanks every one for your input.
You can't make a cross-domain request from a local file because it's not on a domain. You need to host C:\home.html on a local webserver instance in order for it to work.
My application is located on the server under a separate virtual directory. To access my ASP.NET MVC application users have to go to:
http://server-dev/superApp
I have a problem with Ajax/Json server requests ignoring the "superApp" directory part. Whenever an Ajax request is made Fiddler shows 404 because instead of http://server-dev/superApp/User/GetUsersJson for example, http://server-dev/User/GetUsersJson is called (note the missing superApp name).
Example of an Ajax request:
function GetUsers(id) {
$.ajax({
url: "/User/GetUsersJson/",
data:{ id: id},
datatype: 'json',
type:'post',
success: function (result) {
////Do stuff with returned result
}
});
}
Registered route:
r.Match("User/GetUsersJson", "User", "GetUsersJson");
Where should I look and what can I change to make sure that my application virtual folder is ALWAYS included in all URL requests ?
p.s. Please note that all Javascript/Ajax logic is kept in separate .js files so no RAZOR syntax is available.
Did you try using the HTML helper method ?
url: "#Url.ACtion("GetUsersJson","User)"
EDIT : As per the comment
You may get the Path name using the HTML Helper method and Keep that in a Global variable and access that in the external javascript file
In the view
<script type="text/javascript>
var globalGetJSONPath='#Url.ACtion("GetUsersJson","User)';
</script>
And now you can use it in the external file like this
$.ajax({
url: globalGetJSONPath,
data:{ id: id},
//remaining items....
});
I solved this stuff by passing variable to js that contains hostname+vdir. Because of heavy js url generation.
In other cases Shyju's answer is best way to solve this.
No way to do it without some server-side code generation. Easiest thing would be defining global variable (sorry) holding you application root and initializing it somewhere in master page.
Javascript generation of route urls always was one of the messiest parts of asp.net mvc.
I want to get xml data from google server using it's API. so, i can't make any changes to response. So, How do I make this call that work for me:
$.ajax({
type: 'POST',
url: 'https://www.google.com/accounts/ClientLogin',
contentType: 'application/x-www-form-urlencoded',
data: { accountType : "HOSTED", Email : ""+Adminemail+"", Passwd : ""+adminpass+"", service : "cp"}, // cp for contact service..
success: function (response) {
alert(response); });
I want make some GET, PUT, DELETE call as well so, I don't want to use any function like $.getJSON();I want to make it possible through $.ajax() only.
I think only way to do this is use of server side scripting language.
Most browsers won't allow cross site scripting. (An ajax call that is not in your own domain).
So if you want to call such an url (https://www.google.com/accounts/ClientLogin), do it server side.
Cross domain posting is blocked by the browser. You could write your own browser. Since this is probably not an option, you could post to your own server and from there post to the other server. I think you can post data to another server using cUrl if you're using PHP.
There's a nice example here.
The third party must provide a jsonp api.