Integrating Javascript in Ruby on Rails
Question
I have a html file and I need to rewrite it in Rails style. I tried to read the rails guides but couldn't find much useful info. Here's part of the HTML i have.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<% content_for :head do -%>
<%= stylesheet_link_tag 'css.css' %>
<% end %>
<head>
<title>index</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" media="all" type="text/css" href="css/css.css" />
<script language="JavaScript" type="text/javascript" src="images/jquery-1.7.1.min.js"></script>
<script language="JavaScript" type="text/javascript" src="images/jQuery.infiniteCarousel.js">
</script>
<script language="JavaScript" type="text/javascript" src="images/jQuery.tbSwitching.js"></script>
<script language="JavaScript" type="text/javascript" src="images/myfocus-1.2.4.full.js"></script>
<script language="JavaScript" type="text/javascript" src="images/mF_expo2010.js"></script>
<link href="images/mF_expo2010.css" rel="stylesheet" type="text/css" />
</head>
<body>
<center>
<div id="top">
<div class="one">
<div class="one1">
<img src="images/ico1.png" width="225" height="58"/>
</div>
<div class="one2">
<div class="one3">
<div class="one4">Login/Sign up</div>
<div class="one4">Create an Account </div>
<div class="one5">shopping bag</div>
</div>
</div>
</div>
</div>
<div class="two">
<% content_for :below_body do -%>
<%= javascript_include_tag 'images/jquery-1.7.1.min.js' %>
<%= javascript_include_tag 'images/jQuery.infiniteCarousel.js' %>
<%= javascript_include_tag 'images/jQuery.tbSwitching.js' %>
<%= javascript_include_tag 'images/myfocus-1.2.4.full.js' %>
<%= javascript_include_tag 'images/mF_expo2010.js' %>
<% end %>
<script>
$(function(){
$("#top .two3").hover(function(){
$("#top .two3").removeClass("on").next(".two4").removeClass("ac");
$(this).addClass("on").next(".two4").addClass("ac");
},function(){
});
})
</script>
<script>
$(function(){
$("#top .two5 a").hover(function(){
$(this).addClass("on");
},function(){
$(this).removeClass("on");
});
})
</script>
......
</body>
</html>
I tried to revise it by using the code below inside the body tag but didn't seem to work.
<% content_for :below_body do -%>
<%= javascript_include_tag 'images/jquery-1.7.1.min.js' %>
<%= javascript_include_tag 'images/jQuery.infiniteCarousel.js' %>
<%= javascript_include_tag 'images/jQuery.tbSwitching.js' %>
<%= javascript_include_tag 'images/myfocus-1.2.4.full.js' %>
<%= javascript_include_tag 'images/mF_expo2010.js' %>
<% end %>
Should I put it inside the head instead? Also should I do anything with the tag? Thanks
2 answers
solution1
0 ACCPTED 2012-11-23 18:39:55
General rule of thumb is that library should go into the head (like jQuery), all the other code that uses jQuery for example should go below the code. The reason for this is, that everything that you want to talk to as a DOM element with jQuery has to be rendered (ie above your js code) in the document.
What I usually do is append everything, ie all script, at the end of the page. This way the loading times of the page itself will reduce, as the request from HTTP does not load the JS first and then the HTML.
solution2
0 2012-11-23 18:42:17
What error are you getting? Without seeing the error, we can't know where the problem comes from, necessarily.
Are you keeping your JS files in rails_root/app/assets/javascripts/images ? That's what you're calling above.
For example <%= javascript_include_tag 'images/jquery-1.7.1.min.js' %> would create this tag: <script type="text/javascript" src="/javascripts/images/jquery-1.7.1.min.js?1284139606"></script> , with a timestamp relating to when the file was built.
This could also be a problem if you're running your server in production mode instead of development mode. In production mode, you need to precompile your assets: rake assets:precompile .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.