Rails UJS rendering js.erb template in IE

Question

I have a RoR app running rails 2.3.8 which makes use of the Rails 3 style UJS to bind data-remote forms instead of using form_for_remote, the controller responds with a js.erb file from the server.

Works beautifully in FF, Chrome, and Safari, but when run in IE it prompts you to save a file and does not execute the JS. My research so far has turned up no possible reasons for this, so any help would be greatly appreciated!

Here's my controller action:

  def create
    @note = Note.create(params[:note].merge(:author_id => current_user.id))
    respond_to do |format|
      format.js {}
    end
  end

I've also tried this instead of the respond_to block which has the same result:

render :template => "notes/create.js.erb", :content_type => 'text/javascript'

And my create.js.erb:

$('#notes').append('<%= escape_javascript(render(:partial => "notes/note", :locals => {:note => @note}))%>');
$('.new_note textarea').val('');

It's all pretty straight forward, I really don't get what's going wrong with IE.

Thanks for any help!

Edit:

Form that posts the note:

<% form_for @note, :url => notes_path, :html => { 'data-remote' => true, :class =>         
    'new_note'} do |f|%>
  <%= f.hidden_field :parent_id %>
  <%= hidden_field_tag :note_type, note_type%>
  <%= f.text_area :body, :size => size%>
  <br/>
  <%= f.submit "Add Note"%>
<% end %>

And the relelvent part of rails.js:

$('form[data-remote]').live('submit', function (e) {
    $(this).callRemote();
    e.preventDefault();
});

/**
     * Handles execution of remote calls firing overridable events along the way
     */
    callRemote: function () {
        var el      = this,
            method  = el.attr('method') || el.attr('data-method') || 'GET',
            url     = el.attr('action') || el.attr('href'),
            dataType  = el.attr('data-type')  || 'script';

        if (url === undefined) {
          throw "No URL specified for remote call (action or href must be present).";
        } else {
            if (el.triggerAndReturn('ajax:before')) {
                var data = el.is('form') ? el.serializeArray() : [];
                $.ajax({
                    url: url,
                    data: data,
                    dataType: dataType,
                    type: method.toUpperCase(),
                    beforeSend: function (xhr) {
                        el.trigger('ajax:loading', xhr);
                    },
                    success: function (data, status, xhr) {
                        el.trigger('ajax:success', [data, status, xhr]);
                    },
                    complete: function (xhr) {
                        el.trigger('ajax:complete', xhr);
                    },
                    error: function (xhr, status, error) {
                        el.trigger('ajax:failure', [xhr, status, error]);
                    }
                });
            }

            el.trigger('ajax:after');
        }
    }

The server responds with: Content-Type:text/javascript; charset=utf-8

I've tried explicitly setting data-type for the rails.js helper, but that did not change anything.

Answer 1

Apparently the solution here was to just swap in a different version of rails.js

Not sure why the one I had didn't work, but looks like it wasn't a bug in any of the code above.

Answer 2

It would be great to know what version you used to fix the issue.

Update: OK, so my scenario was that I was using jQuery 1.4.2 with the latest rails.js. When I upgraded to jQuery 1.4.3 this resolved my issue.