0

I have an static web page that I want into my rails app. The problem is that I don't know how to get the css and js imports to work correctly.

When I load the html directly into the browser it works perfectly but when I run it on the server it lacks some components.

I would like to know where to put and how to reference the js and css resources. I also would like to know which helper methods I would need in this code:

<!DOCTYPE html>
<!--[if IE 8]><html class="ie ie8" lang="en-US"><![endif]-->
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Login |  eatbooking.com</title>
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0, width=device-width;"/>
        <meta name="format-detection" content="telephone=no">
        <meta name="description" content="">
        <link rel="shortcut icon" href="favicon.ico"/>
        <link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700' rel='stylesheet' type='text/css'>
        <link href="css/bootstrap.css" rel="stylesheet">
        <link href="css/import.css" rel="stylesheet">
        <!--[if lt IE 9]>
        <script src="js/html5shiv.js"></script>
        <script src="js/respond.min.js"></script>
        <![endif]-->
    </head>

    <body>
        <section class="content">
          <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <div class="popup-outer-container client-form login">
                        <div class="popup-header">
                            <a href="#"><img src="images/logo.png" alt="Logo"></a>
                        </div>
                        <div class="popup-content">
                            <div class="popup-content-top">
                                <div class="alert-message">
                                    <p>Validation error.</p>
                                </div>
                                <div class="input-box">
                                                            <input type="text" placeholder="EMAIL">
                                                     </div> 
                                                     <div class="input-box">
                                                            <input type="text" placeholder="CONTRASEÑA">
                                                     </div> 
                                                      <div class="check-box">
                                                            <input tabindex="1" type="checkbox" id="input-1">
                                                            <label for="input-1">Remember me</label>
                                                        </div>
                                                        <div class="forgot-password">
                                                            <a href="#">¿Recordar contraseña?</a>
                                                        </div>
                                                     <div class="order-row">
                                                        <div class="save-button">
                                                            <input type="submit" value="Entrar">
                                                        </div>
                                                    </div>  
                            </div>
                        </div>
                        <div class="popup-content-bottom">
                            <span>¿Todavía no tiene cuenta?.</span>
                                            <a href="#">Alta gratis.</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </section>

        <!--javascript start -->
        <script src="js/jquery.min.js"></script>
        <script src="js/bootstrap.js"></script>
        <script src="js/icheck.js"></script>
        <script src="js/jquery.bpopup.min.js"></script>
        <script src="js/selectbox.min.js"></script>
        <script src="js/main.js"></script>

    </body>
</html>
Joan Pujol
  • 7
  • 1
  • 2
  • You would have to paste your files and directories into the public folder if you want a quick fix. Else you can also keep it in app/assets. – Saurabh Sep 26 '14 at 12:54

2 Answers2

0

In Rails 4 you just need to put your JS/CSS files into the correct assets directories and they will be automatically included in your view files.

Your files should be structured like so:

- assets
   - javascripts
      - example.js
   - stylesheets
      - example.css

Rails will then add the script tags for you, eg:

<script src="/assets/example.js"></script>
Tom Kadwill
  • 1,448
  • 3
  • 15
  • 21
  • What would you do if you had to use a different set of css and js files in each action? – Joan Pujol Sep 26 '14 at 14:54
  • Normally I would not set different CSS/JS files for each action, I would use different classes/ids to customise my views. You can, however, [include CSS/JS files for specific view files](http://stackoverflow.com/questions/602147/javascript-file-per-view-in-rails). – Tom Kadwill Sep 26 '14 at 15:01
0

You would have to paste your files and directories into the public folder if you want a quick fix. Else you can also keep them in app/assets.

Saurabh
  • 1,086
  • 1
  • 15
  • 27
  • Rails generates different assets files for controllers by default. You could check them in app/assets folder. Also check this rails cast on Assets management in rails http://railscasts.com/episodes/279-understanding-the-asset-pipeline?view=asciicast – Saurabh Sep 26 '14 at 14:59
  • I have discovered that the public folder solution only works for the root page, all other pages can't reach the public folder. Why? – Joan Pujol Sep 28 '14 at 15:27
  • All the pages have access to the public folder. You would have to import those files. Else you could import all the assets files in application.html.erb and those assets would be available everywhere. – Saurabh Sep 28 '14 at 16:50