CSS and Javascript with partials and layouts

Rails
1

Hi,
I’m developing an application that uses a layout called main on every
page. Most of the individual pages are represented with a single partial
template, but there are several pages that are composed of multiple
partials.

My main layout looks something like this:
Code:

<%= @title %> <%= stylesheet_link_tag 'main' %> <%= @content_for_layout %>

Several of my partials are using Javascript. Up till now, I’ve just
included the script code in the partial inside script tags. However, I’d
prefer to have all the Javascript in external files, and included in the
header.

Is this possible? I thought about doing something similar to what is
happening with the title right now, but then I would run into problems
if I have multiple partials all trying to set the same value.

The same problem has come up when I’ve been doing my styling- I either
have to put the style inside the individual partials, or in my global
stylesheet.

So, anyone have a good way for multiple sources(partials) to add an
unknown number of includes into a layout?

Thanks in advance,
-Evan
Reply With Quote

2

Is this possible? I thought about doing something similar to what is
happening with the title right now, but then I would run into problems
if I have multiple partials all trying to set the same value.

Use the application.rhtml file in the Layouts folder of Views. Delete
all the other rhtml files in the Layouts folder and the
application.rhtml will become the default around your partials…then
use this tag

<% javascript_include_tag ‘myjavascript’ %>

That will place it in the section of every page in your app.
Also, be sure to save the js files you want to use in the
/public/javascripts folder of your apps directory.

Cheers,
David

3

Just to make sure I understand you correctly- I would have something
like this in the head section of application.rhtml:

<%= javascript_include_tag ‘javascript_for_page_1’ %>
<%= javascript_include_tag ‘javascript_for_page_2’ %>
<%= stylesheet_link_tag “stylesheet_for_page_1”, :media => “all” %>
<%= stylesheet_link_tag “stylesheet_for_page_2”, :media => “all” %>

Won’t this then include all my includes on every page, even if the page
didn’t need them? Is there any way to take advantage of the layouts and
partials while selectively including js/css?

-Evan

David H. wrote:

Is this possible? I thought about doing something similar to what is
happening with the title right now, but then I would run into problems
if I have multiple partials all trying to set the same value.

Use the application.rhtml file in the Layouts folder of Views. Delete
all the other rhtml files in the Layouts folder and the
application.rhtml will become the default around your partials…then
use this tag

<% javascript_include_tag ‘myjavascript’ %>

That will place it in the section of every page in your app.
Also, be sure to save the js files you want to use in the
/public/javascripts folder of your apps directory.

Cheers,
David

4

Won’t this then include all my includes on every page, even if the page
didn’t need them? Is there any way to take advantage of the layouts and
partials while selectively including js/css?

You are correct in that they will all be included in all pages…I guess
I misunderstood your question a bit. I don’t know why that would be a
problem, unless you have a massive site (which you very well may).

Using application.rhtml has worked well with me on over half a dozen
apps I have built so far…I guess you could try using an inline tag in
your controller methods for those specific instances you need the css/js

-OR-

Since it doesn’t matter where the css and js rails tags appear in the
page, you could create a partial that just has the include tags
(_include_js.rhtml) and render those via controller or in the view as
needed???

Hope that helps…

David

5

Evan,

You can use the same pattern utilized in setting your page title if you
are
rendering the partials from within the template that is providing your
layout’s @content_for_layout. What I have done is add all necessary
javascript and stylesheet file names into collections @javascripts and
@stylesheets, respectively, from within the partials. Then in the layout
file’s I iterate across each collection and create the necessary
references.

I really like this because each partial is then very modual and the
resulting HTML page only references the files that you need without
having
to tweak the links/includes from the layout. Of course you have to be
careful because the CSS applied from stylesheets required by different
partials may clash.

Unfortunately this seems to be more difficult when rendering the
partials
from within the layout itself. Because the layout is processed from top
to
bottom it is not possible to generate links in the for
stylesheets or
javascripts required by partials rendered later in the layout because
they
haven’t been seen yet! You can include the CSS and javascript includes
in
the HTML (for Firefox 1.5 and IE 6.0 at least) but I really don’t
like this style and if someone has a way around this I’d be very happy
to
hear it.

Don Walker