Blueimp jQuery file upload force iFrame Transport server response - ajax

I am using Blueimp JQuery File Upload, with the option forceIframeTransport: true, I am able to upload the file and form fields to a cross domain endpoint for processing.
However, the server response is something bother me for a long time.
I have come across a online material about the library:
http://missioncriticallabs.com/blog/lessons-learned-from-jquery-file-upload
I have followed the link's instruction but failed to get the server response correctly.
Here is my code:
jQuery("#newFile").fileupload({
url: "https://mydomain/cgi-bin/get_file.cgi",
forceIframeTransport: true,
type: "POST",
cache: false,
contentType: false,
processData: false,
autoUpload: false,
replaceFileInput: false
done: function(e, data) {
console.log("done");
console.log(e);
console.log(data.result);
}
});
For now, my server endpoint is to print the JSON response out only:
#!C:/Perl64/bin/perl.exe
use CGI;
use JSON;
print "Content-type: text/plain; charset=iso-8859-1\n\n";
#print header("application/json;charset=UTF-8");
my %rawText = (message => "Processed");
my $json = encode_json \%rawText;
print $json;
I have tried to print the header as "text/plain" and "application/json", but I cannot get the server response in my "done" function in the JS code.
My console.log(data.result) is always print "undefined".
I am quite fresh to the library and the concept behind,
so I will be much appreciated if anyone could guide me to use the library.
Thank you very much.

In order to make the widget work with Perl, you have to implement a custom server-side upload handler. Your CGI script must return a JSON reponse in the format described in the documentation.
Fortunately, someone has already done the work for you. Have a look at the module jQuery::File::Upload on CPAN.

Related

Access-Control-Allow-Origin trouble with Mootools

I've this error on my page but I can't solve it Access-Control-Allow-Origin.
Here is my code: I wrote this in my html file :
<div id="elapsed" data-url="http://myurl1.com/fr/chrono/">
And here is my:
var initChrono=function(){var e=$("dd"),t=$("hh"),n=$("mn"),r=$("ss"),i,s,o;(new Request.JSON({
url: 'http://myurl1.com/fr/chrono/',
callbackKey: 'callback',dataType: "jsonp",onSuccess:function(e){s=e.elapsed;o=e.status;a()}})).get();var a=function(u){i=s>0?"-":"";if(!u)s-=1;if(o==0){var l="00",c="00",p="00",v="00"}if(o==1||o==2){var g=Math.abs(s)
Can some help me?
I don't know how to work with this Jsonp
Access-Control-Allow-Origin warnings in this case would mean the url you are trying to load is not in the same domain as the page making the request.
You are using Request.JSON in your code above when what you need is Request.JSONP. This method injects a script tag to load the content as javascript wrapped in a method named with the value of callbackKey:
callback({ ... })
Your code example is incomplete and referencing undefined vars, so I am not entirely sure what you are doing here, but I think the request you are looking for is:
new Request.JSONP({
url: 'http://myurl1.com/fr/chrono/',
callbackKey: 'callback',
onComplete: function(data){
// do whatever
}
}).send();
Fiddle example: http://jsfiddle.net/GbTJp/
Mootools reference: http://mootools.net/docs/more/Request/Request.JSONP
If you are also developing the page that returns the JSON, you will need to read up on 'returning JSONP' in whatever server-side language you are coding in. This page will need to check if the get var 'callback' has been set, and if so, wrap the JSON string in a method defined by 'callback', then return with Content-Type: text/javascript.
http://en.wikipedia.org/wiki/JSONP

Reading cross domain csv file using JSONP and AJAX

Trying to read cross domain csv file :
remote_url = “http://www.example.com/buglist.cgi?bug_status=NEW&columnlist=bug_id%2Cshort_desc&query_format=advanced&ctype=csv";
$.ajax({
url:remote_url,
type:"get",
cache: false,
dataType: "jsonp",
success:function(data){
console.log(data);
},
error: function(data){
console.log(data);
}
});
Although getting 200 status from server, It always going into error callback handler and logging a JavaScript syntax error:
SyntaxError: missing ; before statement 6230,"this is a ""short description"", blah blah blah..
My CSV file has two columns “bug_id” and “short_desc” with following values:
bug_id = 6230
short_desc = this is a "short description", blah blah blah..
I know the error is because of double quote in description, but I don’t know the solution. I tried “YQL” to convert CSV to JSON but it returned null as a result, may be because of an error.
The JSONP technique expects the response to be JavaScript. This is why you're getting a JavaScript error; it's trying to execute the CSV content as JavaScript.
JSONP works by defining a callback function in the server, adding a script tag with a URL that tells the server what function it will call, then the server responds with JavaScript that calls that function with the data as a parameter.
The destination URL must support this protocol in other words. You can't just use JSONP for any arbitrary request.
You may need to use a different technique to get your data, like a same-domain proxy that does the HTTP request to the server. If you are able to change the code at example.com, you have even more options.

Cross Domain Ajax call EasyXDM

I'm trying to make a cross domain Ajax call using EasyXDM, because this gives support for IE apparently.
I have the following code, It says in the documentation that you need to call the cors file on the other domain, but it mentions you can skip that part, I want to skip it because I can't upload the cors file there and they have allowed my domain in the headers anyway. How do I write the code without declaring the cors file?
var xhr = new easyXDM.Rpc();
var response;
function getState(){
xhr.request({
url: "http://somedomain.com/misc/promo_getstate.php",
method: "POST",
data: {
email: 'sofia#hotmail.com',
source: '1304_Spring_dly',
country: 'DE',
}
}, function(response){
alert(response.status);
alert(response.data);
});
I know it's a little late, but you might find this link helpful (it's a blog post specifically about using easyxdm to do cross-domain AJAX):
http://easyxdm.net/wp/2010/03/17/cross-domain-ajax/

Content loading with jsonp

I am a beginner at sencha touch2. i am trying to create a some app which contains a blog view. the code of the blog is given below. when i launch the app, the content fails to load, giving these errors. i am using wamp for localhost.
XMLHttpRequest cannot load " http://secureclick-media-maynemyltf.netdna-ssl.com/Extensions/rjs/c2.js". Origin< http://localhost> is not allowed by Access-Control-Allow-Origin.
XMLHttpRequest cannot load " http://api.yontoo.com/GetClientData.ashx?key=null&id=47a8564d-d089-4195-9564-72f107ea1c56&loc=http%3A//localhost/GS/&apps=bestvideodownloader,ezLooker,pagerage,buzzdock,toprelatedtopics,twittube". Origin <http://localhost> is not allowed by Access-Control-Allow-Origin.
Ext.define('GS.view.blog',
{
extend:'Ext.navigation.View',
xtype: 'blogpanel',
config:{
title: 'Blog',
iconCls: 'star',
items:
{
xtype:'list',
itemTpl:'{title}',
store:
{
autoLoad: true,
fields:['title','author','content'],
proxy:
{
type:'jsonp',
url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/SenchaBlog',
reader:
{
type:'json',
rootProperty:'responseData.feed.entries',
}
}
}
}
}
});
You're not calling a JSONP service but a JSON one. You can detect it by calling your URL from your browser and see the content isn't starting by a method call.
So you're not bypassing Cross-Domain protections.
You can't just tell the server you want it to answer in JSONP : it must be ready to make such an answer.
And your browser won't let you access from another domain a server answering in json and not having set a header specifying he accepts this cross-domain request. Read this.
EDIT :
You may call this service using JSONP : you just have to specify a callback at the end of the URL.
In addition to this response format, the protocol also supports a
classic JSON-P style callback which is triggered by specifying a
callback argument, which directs the API to deliver the JSON object as
an argument to the specified callback.
Example from the documentation :
'https://ajax.googleapis.com/ajax/services/feed/find?v=1.0&q=Official%20Google%20Blogs&callback=processResults'

dojo ---> django POST

I'm trying to send a json from the client using the method xhrPost dojo. But I'm getting a 403 errors. Any help?
var str_json = dojo.toJson(arr_markers);
console.log('json elements: '+str_json);
dojo.xhrPost({postData: str_json,
headers: { "Content-Type": "application/json"},
//content:{'prueba': 'HOLA'},
url:'/up_position_elements/',
handleAs: 'text',
load: function(response, ioArgs){alert('response');},
error: function(errorMessage){}
});
And how to read the json in the django view?
Which method should I use?
403 means "forbidden" which means that the view wants a password, cookie, or other form of authentication. Could you show us the view that serves /up_position_elements/ so that we can see what security-related decorators or logic it might contain?

Resources