format.js response doesn't execute

Question

Hi,

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(percentage + '%');
              }
        }), 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?

Answer 1

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.

Answer 2

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 || '');
    }
};