在rails中添加Javascritpt＆CSS

對於我的觀點，我需要讓我的視圖從CSS文件中選擇樣式。我的觀點也有一些JavaScript代碼。問題是視圖既不選擇樣式也不選擇javascript代碼。這是我第一次使用JavaScript查看rails的視圖，以便搜索網頁以找到答案。我在下面的鏈接中找到了一些詳細的解釋，但有很多答案。在rails中添加Javascritpt＆CSS

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

我試圖把我的JavaScript代碼在資產/樣式表/ billings.css文件資源/ Java腳本/ billings.js文件和類似的CSS代碼，但沒有奏效。我假設在這裏放置代碼將起作用，billings控制器的index.html.erb文件將選擇此項。我是否需要在索引文件中引用此路徑。下面是billings.js代碼文件

<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文件

<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>

我用Rails 3.1.1

來源

2013-09-23 Gaurav

步驟獲得JQuery的JavaScript來的工作：

將gem "jquery-rails"添加到您的Gemfile並捆綁它。
運行rails generate jquery:install
將您的代碼添加到assets/javascript下的billings.js。
確保//= require_tree .或//= require billings位於assets/javascript中的application.js。
重新啓動您的rails服務器。

如果可能，您應該避免在自己的JS中包含腳本。

將CSS添加到billings.css時應該包含CSS。

編輯

看來，你的佈局不引入默認的JS和CSS的某些原因。在你的Rails中控制器的頂部，它應該是這個樣子：

class NameofMyAppController < ApplicationController

如果您使用的是自定義佈局（如

class NameOfMyAppController < ApplicationController 
    layout :custom_layout

然後，你需要編輯自定義佈局添加標準的JS和CSS標籤在您custom_layout.html.erb內<head></head>：

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

來源

2013-09-23 09:34:34 mccannf

感謝您的清晰和明確的解決方案，我一直在尋找的第4個步驟已經到位，沮st我沒有重啓服務器。但重啓後我也面臨同樣的問題。我用索引更新了我的帖子。 html.erb文件。你能否建議我是否仍然錯過了一些東西。謝謝你的一切。 – Gaurav

編輯更多的東西來嘗試。 – mccannf

另一個評論：你知道你應該只包含控制器操作中.html.erb文件中''和''標記之間的所有內容，對吧？其他一切都將通過默認佈局呈現....我建議你閱讀[Rails中的佈局和渲染]（http://guides.rubyonrails.org/v3.1.1/layouts_and_rendering.html）。 – mccannf

在rails中添加Javascritpt＆CSS

回答

相關問題