cssruby-on-railsruby-on-rails-4content-for

content_for Rails 4 not loading

I have this in my application.html.erb

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <%= stylesheet_link_tag "application","jquery.mobile-1.4.5"  %>
    <%= javascript_include_tag "application","jquery.mobile-1.4.5" %>
    <%= csrf_meta_tags %>
    <%= yield(:head) %>
</head>

My main/index.html.erb file has this:

<%= content_for :head do %>
<style type="text/css">
    body {
        display: table;
        position: relative;
        width: 100%;
        height: 100%;
        background: url(/assets/main/background.jpg) no-repeat center center scroll;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        -o-background-size: cover;
    }
    .center-wrapper{
        margin: 0 auto;
        text-align: center;
        vertical-align: middle;
    }
    .ui-page {
        background: transparent;
    }
    .ui-content{
        background: transparent;
    }
</style>
<% end %>

This is the root url and loads correctly. After this if I navigate to any other url say vendors/index.html.erb, the css generated because of content_for (main/index.html.erb) is not clearing.

I tried to put some css in vendors/index.html.erb by changing the background image used in body. But, it didn't get reflected. It is still using the css that was generated because of content_for in main/index.html.erb

Solution

  • The problem was that I am using jquery-mobile and it works in the same way as turbolinks. It was only reloading the part of the page contained in

    <div data-role="page">
    .......
</div>

    Links which have page specific css/js need to be added to head tag of the page. For this it is necessary to call the page without ajax and reload it. So you need to use: 

    rel="external", data-ajax="false" or target attributes