Rails UJS & Bootstrap navbar

Question

• Rails 3.2.12
• JQuery v1.11.0

I am trying to make Bootstrap navbar work with Rails invoking :remote => true.

So with Rails UJS, adding :remote => true to a link_to will make add a data-remote attributed to the element.

On the Bootstrap side, I add the necessary data-toggle attribute. The result is something this:

<ul class="nav nav-tabs">
  <li class="active">
    <a data-toggle="tab" data-remote="true" href="/public/page/features?menu=true">

        Features

    </a>
</li>
<li>
    <a data-toggle="tab" data-remote="true" href="/public/page/documentation?menu=true">

        Documentation

    </a>
</li>
<li>

So data-remote and data-toggle are set nicely. Now, server side, I have a rails controller which responds to the ajax request, also there is an page.js.erb containing this:

$('#replaceable').html("<%= escape_javascript( render("page") )%>");

The idea here is that a portion of the browser DOM, idenfied with 'replaceable' is actually replaced with the result of the rendering action of the partial view named '_page'.

However when I click on the link in nav-tabs, it doesn't work. Hence my call for help here :P

The server log shows this:

Started GET "/public/page/features?menu=true" for 127.0.0.1 at 2014-06-02 16:47:52 +0200
Processing by PublicController#page as JS
Parameters: {"menu"=>"true", "id"=>"features"}
Page: features
Wiki: #<Wiki:0x007fe772aa0c88>
Web name 
  Reading page 'features' from web 'netxforge' 
  [1m[35mWeb Load (0.2ms)[0m  SELECT "webs".* FROM "webs" WHERE "webs"."address" = 
  'netxforge' LIMIT 1
  [1m[36mPage Load (0.1ms)[0m  [1mSELECT "pages".* FROM "pages" WHERE "pages"."web_id" = 2 
  AND (name   = 'features') LIMIT 1[0m
  Page 'features'  found
  [1m[35mRevision Load (0.1ms)[0m  SELECT "revisions".* FROM "revisions" 
  WHERE "revisions"."page_id"   =    32 ORDER BY id DESC LIMIT 1

[1m[36mPage Load (0.1ms)[0m [1mSELECT "pages".* FROM "pages" WHERE "pages"."id" = 32 LIMIT 1[0m [1m[35mWeb Load (0.1ms)[0m SELECT "webs".* FROM "webs" WHERE "webs"."id" = 2 LIMIT 1 Rendered public/_page.html.erb (8.3ms) Rendered public/page.js.erb (9.4ms) Completed 200 OK in 16ms (Views: 14.9ms | ActiveRecord: 0.6ms)

So, I can see my template is rendered, and the page.js.erb is rendered, but still nothing happens in the browser. The id to be replaced does exist!.

Any ideas on how to tackle this?

• I have JQuery UJS enabled in my Gemfile

• My application.js includes all the necessary.

  //= require jquery //= require jquery_ujs

Thank You! Christophe

Answer 1

The problem was the content-type returned in the HTTP request, not being javascript, the browser (JQuery in this case) shows it as text, instead of intepreting the received javascript. The reason the content-type was changed by the server app, was a filter, which would set it to text. (this was inherited from the application, so I didn't know about this).

The lesson here, when doing UJS, make sure you check the response header in firebug, and check the returned content-type. (On the first request, 200, for following requests, a not modified 304, will be received, which will not contain the content-type parameter).

Note: I found out about the content-type processing of JQuery, by carefully reading the jquery documentation on ajax calls, this is what the jquery_ujs gem uses.