How to serve specific JS and CSS files for each view in Rails 5.1

Question

I've been using Rails 3.2 for a project. I'm now building a new project with Rails 5.1. I use the M & C parts of Rails extensively and almost ZERO of the View. This is because I use a JavaScript UI library from a 3rd party vendor - DHTMLX.

They have various UI components and have provided JS and CSS files specific to each component.

Depending on the component(s) I'm using in a particular 'view' I want to only include the relevant JS and CSS files within my code. Keeping with Rails conventions I have a subfolder with the same name as each controller under the view folder and then within each subfolder I have .erb files whose names match the method names in the controller.

However my .erb files consist almost completely of links to the JS and CSS files provided by DHTMLX & whatever JavaScript functions I have written to make the view work. Below is an example of my start/index.erb file:

<% content_for :head do %>

    <link href="/assets/javascripts/dhtmlxSuite_v30/dhtmlxLayout/codebase/dhtmlxlayout.css" media="all" rel="stylesheet" type="text/css" />
    <link href="/assets/javascripts/dhtmlxSuite_v30/dhtmlxLayout/codebase/skins/dhtmlxlayout_dhx_skyblue.css" media="all" rel="stylesheet" type="text/css" />
    <link href="/assets/javascripts/dhtmlxMessage/codebase/message_skyblue.css" media="all" rel="stylesheet" type="text/css" />

    <%= javascript_include_tag "/assets/javascripts/nx/nxcommon.js" %>
    <%= javascript_include_tag "/assets/javascripts/nx/dateformat.js" %>
    <script src="/assets/javascripts/dhtmlxSuite_v30/dhtmlxLayout/codebase/dhtmlxcommon.js" type="text/javascript"></script>
    <script src="/assets/javascripts/dhtmlxSuite_v30/dhtmlxLayout/codebase/dhtmlxcontainer.js" type="text/javascript"></script>
    <script src="/assets/javascripts/dhtmlxSuite_v30/dhtmlxLayout/codebase/dhtmlxlayout.js" type="text/javascript"></script>
    <script src="/assets/javascripts/dhtmlxMessage/codebase/message.js" type="text/javascript"></script>

  <title>GourmIndia System</title>

    <style type="text/css">
        html,body {
            background-color: #fff;
            color: #666;
            text-align: left;
            font-family: arial, sans-serif;
            width:100%;
            height:100%;
            margin:0px;
            overflow:hidden;
        }
    </style>

    <script type="text/javascript">

      var lyoMain;
      var dsCity;
      function doOnLoad()
      {
          SiteStatus = '<%= @sitestatus %>'
          setupLayout();
      }


      function setupLayout()
      {
          lyoMain = new dhtmlXLayoutObject(document.body,'2E','dhx_skyblue');
          lyoMain.cells('a').hideHeader();
          lyoMain.cells('b').hideHeader();
          lyoMain.cells('a').setHeight(60);
          lyoMain.cells('a').fixSize(true,true);
          lyoMain.cells('b').fixSize(true,true);
          lyoMain.cells('a').attachURL('/banner/index');
          switch(SiteStatus)
          {
              case 'LIVE':
                  lyoMain.cells('b').attachURL('/user/index');
                  break;
              case 'MAINT':
                  dhtmlx.modalbox({
                      text: '<%= @sitestatusmsg %>'
                  });
                  break;
          }
      }

      function doUnLoad()
      {

      }

    </script>
<% end %>

As can be seen although it has the .erb extension there is almost no Rails Views type functionality other than the content_for at the top and some javascript_include_tags.

Under Rails 3.2 all of the DHTMLX library resided under public/assets/javascript/dhtmlxSuite_v30/!component name!/codebase/*.js & *.css files. All of which worked fine in Rails 3.2.

Now when I'm trying to do something similar in Rails 5.1 I'm coming up against the asset pipeline concept and despite having read through the Rails guide on it a number of times I'm still struggling to understand where I should be placing the DHTMLX files as well as how I should be making calls to include specific ones ONLY in each relevant view.

Dynamically you can **parse** theses files by adding a simple `GET` params to the `URL` using file as : `` — , Nov 01 '17 at 00:24
I am sorry for the UTTER DRIVEL that this question really was. I had forgotten about application.html.erb in views/layouts which I had doctored in my 3.2 project (some while back) to include a <%= yield :head %> tag within the head section which allowed me to do the above. My sincere apologies to all who had to read this and waste their time. Also many thanks to @headmax for still wanting to help. — nexar, Nov 01 '17 at 10:29

How to serve specific JS and CSS files for each view in Rails 5.1

0 Answers0