#205 Unobtrusive Javascript

Mar 15, 2010 | 13 minutes | Views, Ajax, Rails 3.0

Keep JavaScript out of your HTML content with unobtrusive JavaScript. Here I show how Rails 3 works with this best practice.

Click to Play Video ▶

Download:
source codeProject Files in Zip (163 KB)
mp4Full Size H.264 Video (18.8 MB)
m4vSmaller H.264 Video (13.4 MB)
webmFull Size VP8 Video (35 MB)
ogvFull Size Theora Video (25.6 MB)

Browse Source Code

Resources

          ujs_example.html
        
<!DOCTYPE html>
<html>
  <head>
    <title>UJS Example</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
      $(function() {
        $("#alert").click(function() {
          alert(this.getAttribute("data-message"));
          return false;
        })
      })
    </script>
  </head>
  <body>
    <h1><a href="#" id="alert" data-message="Hello UJS!">Click Here</a></h1>
  </body>
</html>

          layouts/application.html.erb
        
<%= javascript_include_tag :defaults %>
<!-- or -->
<%= javascript_include_tag "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js", "jquery.rails.js" %>
<%= csrf_meta_tag %>

          products/index.html.erb
        
<% form_tag products_path, :method => :get, :remote => true do %>
  <p>
    <%= text_field_tag :search, params[:search] %>
    <%= submit_tag "Search", :name => nil %>
  </p>
<% end %>

<div id="products">
  <%= render @products %>
</div>

          products/index.js.erb
        
$("products").update("<%= escape_javascript(render(@products)) %>");
// or
$("#products").html("<%= escape_javascript(render(@products)) %>");