Adding Javascritpt & CSS in rails

Question

For my view I need to have my view pick the styles from css file. Also there is some javascript code in my view. The problem is view is neither picking the styles nor the javascript code. This is the first time I am working on rails view with javascript so searched web for answers. I found some detailed explanation at below link but there are so many answers.

http://stackoverflow.com/questions/7763675/rails-3-1-newbie-where-should-i-put-javascript-code

I tried by putting my javascript code in assets/javascripts/billings.js file and similarly the css code in assets/stylesheets/billings.css file but it didn't work. I am assuming placing code here will work and the index.html.erb file of billings controller will pick this. Do i need to refer this path in my index file. Below is the code in billings.js file

<script src="http://code.jquery.com/jquery-1.7.2.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
    $("#up").on('click',function(){
        $("#qty input").val(parseInt($("#qty input").val())+1);
    });

    $("#down").on('click',function(){
        $("#qty input").val(parseInt($("#qty input").val())-1);
    });

    $("#first").on('click',function(){
        $("ul").hide();
        $("#starter").show();


    });
    $("#drinkMenu").on('click',function(){
        $("ul").hide();
        $("#Drinks").show();
    });
    $("#vege").on('click',function(){
        $("ul").hide();
        $("#veg").show();
    });
    $("#last").on('click',function(){
        $("ul").hide();
        $("#special").show();
    });
});


</script>

index.html.erb file

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>System</title>


</head>
<body>
<div class="main">
<div class="tabelorder">
<label> Tabel Number:</label> <input type="number"  placeholder="Table NO.">
        <input type="search"  placeholder="Search Products" /> 

</div>

<div class="right-block">
<div class="RightHeader">
<a href="#" class="RightHeaderMenuItem" id="first">
 starter</a>
<a href="#" class="RightHeaderMenuItem" id="drinkMenu">
Drinks Menu</a>
<a href="#" class="RightHeaderMenuItem" id="vege">
Vegetarianas</a>
<a class="RightHeaderMenuItemLast" id="last">
Special Menu</a>
</div>
<div class="MenuItem">
<ul id="starter">
<li>starter</li>
<li>b</li>
<li>c</li>
<li>a</li>
<li>b</li>
<li>c</li>
<li>a</li>
<li>b</li>
<li>c</li>
<li>c</li>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<ul id="Drinks">
<li>a</li>
<li>b</li>
<li>c</li>
<li>a</li>
<li>b</li>
<li>c</li>
<li>a</li>
<li>b</li>
<li>c</li>
<li>c</li>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<ul id="veg">
<li>vegetarianas</li>
<li>b</li>
<li>c</li>
<li>a</li>
<li>b</li>
<li>c</li>
<li>a</li>
<li>b</li>
<li>c</li>
<li>c</li>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<ul id="special">
<li>special</li>
<li>b</li>
<li>c</li>
<li>a</li>
<li>b</li>
<li>c</li>
<li>a</li>
<li>b</li>
<li>c</li>
<li>c</li>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
</div>
<div class="table_list">
<button type="submit">Table 1</button>
<button type="submit">Table 2</button>
<button type="submit">Table 3</button>
<button type="submit">Table 4</button>
<button type="submit">Table 5</button>
<button type="submit">Table 6</button>
</div>
<div class="left-block">
    <!--<div class="LeftHeader">
        <input type="search"  placeholder="Search Products"/> 
    </div>-->
    <div class="LeftBorderBlock">
        <img src="images/grid2Whitepressed.png" height="60" />
        <div id="qty">

        <button type="button" id="up">+</button>
        <button type="button" id="down">-</button>
         <input type="number" value="0" />
        </div>


        <!-- <img  src="images/2.png" id="up">
        <img src="images/1.png" id="down" style="margin-top:-6.5%;">-->

    </div>
    <div class="LeftMiddleBlock">
    <div class="AddItem">
    <div class="AddItemDtailQty">2</div>
    <div class="AddItemDtail">aaaaa</div>
    <div class="AddItemDtailPrice">@$522</div>
     <div class="AddItemDtailPrice">$1044</div>
    <div class="CancelItemDtail"><img src="images/icon_error.png" height="20"/></div>
    </div>
     <div class="AddItem">
    <div class="AddItemDtailQty">2</div>
    <div class="AddItemDtail">aaaaa</div>
    <div class="AddItemDtailPrice">@$522</div>
     <div class="AddItemDtailPrice">$1044</div>
    <div class="CancelItemDtail"><img src="images/icon_error.png" height="20"/></div>
      </div>
     <div class="AddItem">
   <div class="AddItemDtailQty">2</div>
    <div class="AddItemDtail">aaaaa</div>
    <div class="AddItemDtailPrice">@$522</div>
     <div class="AddItemDtailPrice">$1044</div>
    <div class="CancelItemDtail"><img src="images/icon_error.png" height="20"/></div>
    </div>



    </div>
    <div class="LeftBorderBlock">
            <div class="calculationBill">
                <div class="LeftText">Subtotal</div>
                <div class="Righttext">$130.47</div>
            </div>
            <div class="calculationBill">
                <div class="LeftText">Tax</div>
                <div class="Righttext">$10.43</div>
            </div>
            <div class="calculationBill">
            <strong>
                    <div class="LeftText">Total</div>
                <div class="Righttext">$141.00</div></strong>

            </div>
            <div class="calculationBill">
            <div class="DividerLine"></div>
            <strong>
                    <div class="LeftText">To Pay</div>
                <div class="Righttext">$141.00</div></strong>
            </div>
    </div>
<button type="submit">Void</button> 
<button type="submit">Park</button>
<button type="submit">Notes</button>
<button type="submit">Discount</button>
<button type="submit">Pay</button>
</div>

</div>


</body>
</html>

I am using Rails 3.1.1

mccannf · Accepted Answer · 2013-09-23 10:27:21Z

1

Steps to get JQuery javascript to work:

Add gem "jquery-rails" to your Gemfile and bundle it.
Run rails generate jquery:install
Add your code to billings.js under assets/javascript.
Ensure either //= require_tree . or //= require billings is in the application.js in assets/javascript.
Restart your rails server.

You should avoid including scripts in your own JS if possible.

CSS should have been included when you added it to billings.css.

Edit

It appears that your layout is not introducing the default JS and CSS for some reason. At the top of your controller in Rails, it should look something like:

class NameofMyAppController < ApplicationController

If you are using a custom layout (e.g.

class NameOfMyAppController < ApplicationController
  layout :custom_layout

Then you need to edit that custom layout to add the standard JS and CSS tags to your custom_layout.html.erb inside <head></head>:

<%= stylesheet_link_tag    "application" %>
<%= javascript_include_tag "application" %>

edited Sep 23, 2013 at 10:27

answered Sep 23, 2013 at 9:34

mccannf

16.6k3 gold badges54 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Gaurav Over a year ago

Thanks for the crisp and clear solution I was looking for. The first 4 steps were already in place, just I didn't restart server. But after restart too I am facing same issue. I have updated my post with index. html.erb file. Could you please suggest if I am still missing something. Thanks for everything.

mccannf Over a year ago

Edited with more things to try.

mccannf Over a year ago

One other comment: you know you should only have everything between the <body> and </body> tags inside the .html.erb file for your controller's action, right? Everything else will be rendered by the default layout.... I recommend you read all about layouts and rendering in Rails.

Collectives™ on Stack Overflow

Adding Javascritpt & CSS in rails

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related