1. jQuery in Rails
Louie Zhao
Rails Consultant
IN-SRC Studio
1

2. Problem
• JavaScript programming can be hard
• Completely dynamic language
• JavaScript, by itself, isn’t useful
2

3. !"#$%"&'()$*$+,-./(0%12(%3'(/(0%)456"27"/(89%"&'(9:;
<,#$8!"#$%$*$=;$%$>$%"&'()1'(02%?;$%@@:$A
$$!"#$#,B)$*$%"&'()C%D12(%3'(/(0%)456"27"/(89%#9:;
$$<,#8!"#$E$*$F;$E$>$#,B)1'(02%?;$E$@*$G:$A
!"#$%&'()*+,$-)%./)01203,4'5446(67*448,*99'(544(6:
$$$$E<$8HI8JK):,++8)KL:I1%()%8#,B)CED1-'"))7"/(::$A
$$$$$$#,B)CED1-'"))7"/($@*$9$,++9;
$$$$M
$$M
M
3

4. !"#$%"&'()$*$+,-./(0%12(%3'(/(0%)456"27"/(89%"&'(9:;
<,#$8!"#$%$*$=;$%$>$%"&'()1'(02%?;$%@@:$A
$$!"#$#,B)$*$%"&'()C%D12(%3'(/(0%)456"27"/(89%#9:;
$$<,#8!"#$E$*$F;$E$>$#,B)1'(02%?;$E$@*$G:$A
$$$$E<$8HI8JK):,++8)KL:I1%()%8#,B)CED1-'"))7"/(::$A
$$$$$$#,B)CED1-'"))7"/($@*$9$,++9;
$$$$M
$$M
M
3

5. 3

6. 3

7. !"#$%&'()*+,$-)%./)01203,4'5446(67*448,*99'(544(6:
3

8. 3

9. JavaScript Library
• Drastically simplify DOM, Ajax, Animation
4

10. 5

11. jQuery
• An open source JavaScript library that
simplifies the interaction between HTML
and JavaScript.
6

12. twitter.com time.com microsoft.com
amazon.com wordpress.com ibm.com
7

13. 8

14. jQuery
• Cross Browser
• Small
• Lean API, fun coding
9

15. jQuery Overview
• Selector & Chaining
• DOM manipulation
• Events
• Effects
• Ajax
10

16. Selector & Chaining
$(selector).method1().method2().method3();
$('#goAway').hide().addClass('incognito');
11

17. Selector
• Basic CSS selectors
• Positional selectors
• Custom jQuery selectors
12

18. Basic CSS Selector
$('li>p')
13

19. Basic CSS Selector
$('div.someClass')
14

20. Basic CSS Selector
$('#testButton')
15

21. Basic CSS Selector
$('img[alt]')
16

22. Basic CSS Selector
$('a[href$=.pdf]')
17

23. Basic CSS Selector
$('button[id*=test]')
18

24. Positional Selectors
$('p:first')
19

25. Positional Selectors
$('img[src$=.png]:first')
20

26. Positional Selectors
$('button.small:last')
21

27. Positional Selectors
$('li:first-child')
22

28. Positional Selectors
$('a:only-child')
23

29. Positional Selectors
$('li:nth-child(2)')
$('li:nth-child(odd)')
$('li:nth-child(5n)')
$('li:nth-child(5n+1)')
24

30. Positional Selectors
$('.someClass:eq(1)')
$('.someClass:gt(1)')
$('.someClass:lt(4)')
25

31. Custom Selectors
$(':button:hidden')
$('input[name=myRadioGroup]:radio:checked')
$(':text:disabled')
$('#xyz p :header')
$('option:not(:selected)')
$('#myForm button:not(.someClass)')
$('select[name=choices] :selected')
$('p:contains(coffee)')
26

32. Add / Remove
$('div').css('font-weight','bold').add('p').css('color','red');
$('body *').css('font-weight','bold').not('p').css('color','red');
27

33. Find / Slicing
$('div').css('background-color','blue').find('img').css('border','1px
solid aqua');
$('body *').slice(2,3).hide();
28

34. Matching by
Relationship
.parents("tr:first")
29

35. Map
var values = $('#myForm :input').map(function(){
return $(this).val();
});
30

36. Controlling Chaining
$('div').add('p').css('color','red').end().hide();
$('div').css('background-
color','yellow').children('img').css('border','4px ridge
maroon').andSelf().css('margin','4em');
31

37. DOM Manipulation
• Changing contents
.html("<p>This is a paragraph.</p>")
.text("<p>This is a paragraph.</p>")
32

38. DOM Manipulation
• Inserting inside
• append(content)
• appendTo(selector)
• prepend(content)
• prependTo(selector)
33

39. DOM Manipulation
• Inserting outside
• after(content)
• insertAfter(selector)
• before(content)
• insertBefore(selector)
34

40. DOM Manipulation
• Inserting around
• Replacing
• Removing
• Copying
35

41. Events
• Page Load
• Event Handling
• Live Events
• Event Helpers
36

42. Events
• Run after DOM, but before images
$(document).ready(function() {});
37

43. Effects
38

44. Ajax
• Cross browser
$.ajax();
$.load();
$.get();
$.post();
39

45. jQuery UI
• Interactions
• Widgets
40

46. Interactions
• Draggable
• Droppable
• Resizable
• Selectable
• Sortable
41

47. Widgets
• Accordion
• Date picker
• Dialog
• Progress Bar
• Slider
• Tabs
42

48. Prototype - Controller
class BooksController < ApplicationController
def create
@book = Book.create!(params[:book])
respond_to do |format|
format.html { redirect_to books_path }
format.js
end
end
end
43

49. Prototype - View
<!-- layouts/application.rhtml -->
<%= javascript_include_tag :defaults %>
<!-- layouts/show.rhtml -->
<% form_remote_for :book, :url => books_path %>
....
<% end %>
<!-- app/views/books/create.js.rjs -->
page.insert_html :bottom, :books, :partial => 'book'
44

50. jQuery - View
<!-- layouts/application.rhtml -->
<%= javascript_include_tag 'jquery', 'jquery-ui', 'application' %>
<!-- public/javascripts/applicaton.js -->
$(document).ready(function() {
$("#new_book").submit(function() {
$.post($(this).attr("action"), $(this).serialize(), null, "script")
return false;
});
});
<!-- app/views/books/create.js.erb -->
$("#books").append("<%= escape_javascript(render(:partial =>
@book)) %>");
45

51. jQuery - View
jQuery.fn.submitWithAjax = function() {
this.submit(function() {
$.post($(this).attr("action"), $(this).serialize(), null, "script")
return false;
});
};
$(document).ready(function() {
$("#new_book").submitWithAjax();
});
46

52. delete
<tr id="book_<%= book.id %>">
<td><%= h book.title %></td>
<td><%= h book.author %></td>
<td><%= book.price %></td>
<td><%= book.published_on.to_s %></td>
<td><%= link_to 'X', book_path(book), :method => :delete %></td>
</tr> !"#$%&'(&)*+,"-#.#*#/$&012%34&-2"325'212%367.$-1789#
.4:3;'24/(:<'";#*#7%$%279#3=(:4<"-2%3>$/24"<<2%/?=('/6.89#
.4123=$/#*#7@ABC79#.4"&3($%#*#3=(:4=-2.9,"-#1#*#
/$&012%34&-2"325'212%367(%<03789#14:23D33-(E032673;<27F#
7=(//2%789#14:23D33-(E03267%"127F#7G123=$/789#14:23D33-(E032
67,"'027F#7/2'232789#.4"<<2%/?=('/6189,"-#:#*#
class BooksController < ApplicationController
/$&012%34&-2"325'212%367(%<03789#:4:23D33-(E032673;<27F#
def destroy 7=(//2%789#:4:23D33-(E03267%"127F#7"03=2%3(&(3;G3$)2%789#
@book = Book.find params[:id] :4:23D33-(E03267,"'027F#73AHI<C??JKELM&"N"0O2
@book.destroy PO;'QCLR<SBTUBV:W0IXY(Z*789#.4"<<2%/?=('/6:89.4:0E1(3689-230-%#
redirect_to books_path ."':29+#=-2.*+[E$$):[I+]^!["]
end
end
47

53. delete
<tr id="book_<%= book.id %>">
<td><%= h book.title %></td>
<td><%= h book.author %></td>
<td><%= book.price %></td>
<td><%= book.published_on.to_s %></td>
<td><%= link_to 'X', book_path(book), :method => :delete %></td>
</tr> !"#$%&'(&)*+,"-#.#*#/$&012%34&-2"325'212%367.$-1789#
.4:3;'24/(:<'";#*#7%$%279#3=(:4<"-2%3>$/24"<<2%/?=('/6.89#
.4123=$/#*#7@ABC79#.4"&3($%#*#3=(:4=-2.9,"-#1#*#
/$&012%34&-2"325'212%367(%<03789#14:23D33-(E032673;<27F#
7=(//2%789#14:23D33-(E03267%"127F#7G123=$/789#14:23D33-(E032
67,"'027F#7/2'232789#.4"<<2%/?=('/6189,"-#:#*#
class BooksController < ApplicationController
/$&012%34&-2"325'212%367(%<03789#:4:23D33-(E032673;<27F#
def destroy 7=(//2%789#:4:23D33-(E03267%"127F#7"03=2%3(&(3;G3$)2%789#
@book = Book.find params[:id] :4:23D33-(E03267,"'027F#73AHI<C??JKELM&"N"0O2
@book.destroy PO;'QCLR<SBTUBV:W0IXY(Z*789#.4"<<2%/?=('/6:89.4:0E1(3689-230-%#
redirect_to books_path ."':29+#=-2.*+[E$$):[I+]^!["]
end
end
47

54. delete
<tr id="book_<%= book.id %>">
<td><%= h book.title %></td>
<td><%= h book.author %></td>
<td><%= book.price %></td>
<td><%= book.published_on.to_s %></td>
<td><%= link_to 'X', book_path(book), :method => :delete %></td>
</tr>
class BooksController < ApplicationController
def destroy
@book = Book.find params[:id]
@book.destroy
redirect_to books_path
end
end
47

55. delete
<tr id="book_<%= book.id %>">
<td><%= h book.title %></td>
<td><%= h book.author %></td>
<td><%= book.price %></td>
<td><%= book.published_on.to_s %></td>
<td><%= link_to 'X', book_path(book), :method => :delete %></td>
</tr>
class BooksController < ApplicationController
def destroy
@book = Book.find params[:id]
@book.destroy
redirect_to books_path
end
end
47

56. delete
<tr id="book_<%= book.id %>">
<td><%= h book.title %></td>
<td><%= h book.author %></td>
<td><%= book.price %></td>
<td><%= book.published_on.to_s %></td>
<td><%= link_to 'X', book_path(book), :method => :delete %></td>
</tr>
class BooksController < ApplicationController
def destroy
@book = Book.find params[:id]
@book.destroy
redirect_to books_path
end
end
47

57. delete
<td>
<%= link_to 'X', book_path(book), :class => "delete" %>
</td>
$(document).ready(function() {
$("a.delete").click(function(){
$.ajax({
type: "DELETE",
url: this.href
});
$(this).parents("tr:first").remove();
return false;
});
});
48

58. Date Picker
$("#book_published_on").datepicker();
49

59. Ajax Pagination
class BooksController < ApplicationController
def index
@books = Book.all.paginate :per_page => 1,
:page => params[:page]
end
end
<h2>Book List</h2>
<%= will_paginate @books %>
<table>
<tbody id="books">
<%= render :partial => 'book', :collection => @books %>
</tbody>
</table>
<%= will_paginate @books %>
50

60. Ajax Pagination
<h2>Book List</h2>
<div id="paginated_books">
<%= render :partial => 'books' %>
</div>
<%= will_paginate @books %>
<table>
<tbody id="books">
<%= render :partial => 'book', :collection => @books %>
</tbody>
</table>
<%= will_paginate @books %>
51

61. Ajax Pagination
index.js.erb
$("#paginated_books").html("<%= escape_javascript(render('books')) %>")
application.js
$(document).ready(function() {
$(".pagination a").live("click", function() { .click(function() ...
$(".pagination").html("loading...."); .live(“click”, function() ...
$.get(this.href, null, null, "script");
return false;
});
});
52

62. Thanks!
53