Question

I have two different layouts in my app, one for javascript (AJAX) requests and one for regular requests.

# application.html.haml for non-js requests (abbreviated)
!!!
%html
  %head
  %body
    = yield

# and application.js.coffee for js requests
App.modal """<%= yield %>""" # creates a javascript modal

Any link with :remote => true should in theory use the javascript layout. This DOES work on certain occasions, but does not work on others.

It works for this link:

%li= link_to "Login", new_user_session_path, remote: true

# log output:
Started GET "/users/sign_in?&authenticity_token=KwyFmzGgR7Rdx3dudJDvw8b5rngvVDrwfTpYLPIPjEI=" for 127.0.0.1 at 2012-01-27 03:29:41 -0500
Processing by Devise::SessionsController#new as JS
  Parameters: {"authenticity_token"=>"KwyFmzGgR7Rdx3dudJDvw8b5rngvVDrwfTpYLPIPjEI="}
  Rendered devise/shared/_links.erb (0.9ms)
  Rendered devise/sessions/new.html.haml within layouts/application (6.3ms)
Completed 200 OK in 167ms (Views: 165.9ms | ActiveRecord: 0.0ms)

# output in the javascript console:
XHR finished loading: "http://localhost:3000/users/sign_in?&authenticity_token=KwyFmzGgR7Rdx3dudJDvw8b5rngvVDrwfTpYLPIPjEI=".

But does not work for this one:

%li= link_to "Account", edit_user_registration_path, remote: true

# log output:
Started GET "/users/edit?&authenticity_token=KwyFmzGgR7Rdx3dudJDvw8b5rngvVDrwfTpYLPIPjEI=" for 127.0.0.1 at 2012-01-27 03:31:24 -0500
Processing by Devise::RegistrationsController#edit as JS
  Parameters: {"authenticity_token"=>"KwyFmzGgR7Rdx3dudJDvw8b5rngvVDrwfTpYLPIPjEI="}
  User Load (0.3ms)  SELECT "users".* FROM "users" WHERE "users"."id" = 1 LIMIT 1
  MobilePhone Load (0.3ms)  SELECT "mobile_phones".* FROM "mobile_phones" WHERE "mobile_phones"."user_id" = 1 LIMIT 1
  Rendered devise/registrations/edit.html.haml within layouts/application (6.7ms)
Completed 200 OK in 157ms (Views: 154.4ms | ActiveRecord: 0.6ms)

# output in the javascript console:
XHR finished loading: "http://localhost:3000/users/edit?&authenticity_token=KwyFmzGgR7Rdx3dudJDvw8b5rngvVDrwfTpYLPIPjEI=".

After some simple debugging, I realized that the second request is hitting application.html.haml (wrong!), while the first one is hitting application.js.coffee (correct!). Both are being processed successfully by ajax.

I am a bit stumped here. I am hoping that I am making a simple mistake that somebody will be able to point out!

Thanks!

P.S. I am running rails 3.2.1 (and previously tried on 3.1.3 with same issue)

EDIT: Not sure if it makes a difference, but I am using the mootools-rails driver: https://github.com/kevinvaldek/mootools-ujs/blob/master/Source/rails.js. The accepts header is being set properly to “text/javascript”.

Answer 1

This is what I had to do to get this to work: (and has nothing to do with the javascript library)

# whatever_controller.rb
def index
  respond_to do |format|
    format.js   # renders index.html.haml inside application.js.haml layout
    format.html # renders index.html.haml inside application.html.haml layout
  end
end

Alternatively, you could just rename the template for the action to index.js.haml instead of index.html.haml, which would work for ajax requests without using respond_to. However, that would mean that search engines and browsers without javascript enabled would not be able to access the page.

Another method that would also work is to use respond_with:

# application_controller.rb
respond_to :html, :js

# whatever_controller.rb
def index
  respond_with # will render the appropriate layout
end