I use Rails 3.0.0 Beta
following an action, my RJS view returns JavaScript, but the code is not executed
In Firebug I see in my response
$('polaroids').insert("<li>\n <a title=\"4204497503_a0c43c561d.jpg\" href=\"#\">\n <img alt=\"4204497503_a0c43c561d.jpg\" src=\"/system/photos/279/original/4204497503_a0c43c561d.jpg?1268857318\" />\n <\/a>\n<\/li>")
Here is the javascript that generates the request
function send(file, url) {
try {
var xhr = new XMLHttpRequest;
var boundary = generateBoundary();
var contentType = "multipart/form-data; boundary=" + boundary;
xhr.upload.addEventListener("loadstart", (function(e){
$('progress_'+file.name).update('0%');
}), false);
xhr.upload.addEventListener("progress", (function(e) {
if (e.lengthComputable) {
var percentage = Math.round((e.loaded * 100) / e.total);
$('progress_'+file.name).update(pe开发者_如何学运维rcentage + '%');
}
}), false);
xhr.open("POST", url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
// done
}
};
xhr.setRequestHeader("Content-Type", contentType);
xhr.setRequestHeader("Accept", "text/javascript");
var CRLF = "\r\n";
var request = "--" + boundary + CRLF;
request += 'Content-Disposition: form-data; ';
request += 'name="' + 'photo[name]' + '"' + CRLF + CRLF;
request += file.name + CRLF;
request += "--" + boundary + CRLF;
request += 'Content-Disposition: form-data; ';
request += 'name="' + 'photo[photo]' + '"; ';
request += 'filename="'+ file.fileName + '"' + CRLF;
request += "Content-Type: application/octet-stream" + CRLF + CRLF;
request += file.value + CRLF;
request+= "--" + boundary + "--" + CRLF;
xhr.sendAsBinary(request);
} catch(e) {
alert('send Error: ' + e);
}
}
Here is the controller
def remote_create
@photo = Photo.new(params[:photo])
@photo.save
respond_to do |format|
format.js
end
end
Here is the response header
Response Headers
Etag "7343b21b2f062fb74b7d5f32e3a83c2c"
Connection Keep-Alive
Content-Type text/javascript; charset=utf-8
Date Wed, 17 Mar 2010 20:21:58 GMT
Server WEBrick/1.3.1 (Ruby/1.8.7/2008-08-11)
X-Runtime 0.060497
Content-Length 220
Cache-Control max-age=0, private, must-revalidate
Set-Cookie _photos_session=BAh7ByIQX2NzcmZfdG9rZW4iMS9OWnpOZUR6UGQ2UDhvbGt5YWpTWXhJcFR2YjRHOEhzZHlIbmdMblRlMWs9Ig9zZXNzaW9uX2lkIiUxNjlhOWYzNjQxODE2N2NjN2FiNmYzY2VkYmU3OTgwYQ%3D%3D--022d7202178b2cc7bf968e558c2ae67ecef1fb74; path=/; HttpOnly
Is there anything special required to make it work?
For those, like me, running into the issue with the Ajax File Uploader and Carrierwave not executing returned javascript, it's due to this same thing. It's because File-Uploader is written to assume everything returned to it is JSON, and rewriting it to evaluate responseText instead of putting it into a variable fixes that.
I'm posting entirely so that no one else spends hours thinking bugs are the cause of this.
The error is your js:
$('polaroids').insert("<li>\n <a title=\"4204497503_a0c43c561d.jpg\" href=\"#\">\n <img alt=\"4204497503_a0c43c561d.jpg\" src=\"/system/photos/279/original/4204497503_a0c43c561d.jpg?1268857318\" />\n <\/a>\n<\/li>")
You are probably looking to target a div
or some element by an id
or class
but you just have $('polaroids')
, try perhaps $('.polaroids')
or $('#polaroids')
depending on what your html is like.
I found the solution, my Ajax request is build by hand, I'm not using Prototype or jQuery. To have javascript executed in the response, I have to add the following code
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
eval(xhr.responseText || '');
}
};
精彩评论