CODEWITHSUNDEEP
ruby-on-railsruby-on-rails-3.1
Gaurav
Gaurav

Reputation: 535

Adding Javascritpt & CSS in rails

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

Upvotes: 0

Views: 61

Answers (1)

mccannf
mccannf

Reputation: 16659

Steps to get JQuery javascript to work:

  1. Add gem "jquery-rails" to your Gemfile and bundle it.
  2. Run rails generate jquery:install
  3. Add your code to billings.js under assets/javascript.
  4. Ensure either //= require_tree . or //= require billings is in the application.js in assets/javascript.
  5. 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" %>

Upvotes: 1

Related Questions