JQuery In Rails

3,541
-1

Published on

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,541
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
97
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide
  • jQuery selectors are one of the most important aspects of the jQuery library. These selectors use familiar CSS syntax to allow page authors to quickly and easily identify any set of page elements to operate upon with the jQuery library methods. Understanding jQuery selectors is the key to using the jQuery library most effectively.
  • Applying the methods is easy. Constructing the selector expressions is where the cleverness lies. The Basic Selectors are known as “find selectors” as they are used to find elements within the DOM. The Positional and Custom Selectors are “filter selectors” as they filter a set of elements (which defaults to the entire set of elements in the DOM).
  • Used either separately, or in combination, the jQuery selectors give you a great deal of power to easily create a set of elements that you wish to operate upon with the jQuery methods.
  • JQuery In Rails

    1. 1. jQuery in Rails Louie Zhao Rails Consultant IN-SRC Studio 1
    2. 2. Problem • JavaScript programming can be hard • Completely dynamic language • JavaScript, by itself, isn’t useful 2
    3. 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. 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. 5. 3
    6. 6. 3
    7. 7. !"#$%&'()*+,$-)%./)01203,4'5446(67*448,*99'(544(6: 3
    8. 8. 3
    9. 9. JavaScript Library • Drastically simplify DOM, Ajax, Animation 4
    10. 10. 5
    11. 11. jQuery • An open source JavaScript library that simplifies the interaction between HTML and JavaScript. 6
    12. 12. twitter.com time.com microsoft.com amazon.com wordpress.com ibm.com 7
    13. 13. 8
    14. 14. jQuery • Cross Browser • Small • Lean API, fun coding 9
    15. 15. jQuery Overview • Selector & Chaining • DOM manipulation • Events • Effects • Ajax 10
    16. 16. Selector & Chaining $(selector).method1().method2().method3(); $('#goAway').hide().addClass('incognito'); 11
    17. 17. Selector • Basic CSS selectors • Positional selectors • Custom jQuery selectors 12
    18. 18. Basic CSS Selector $('li>p') 13
    19. 19. Basic CSS Selector $('div.someClass') 14
    20. 20. Basic CSS Selector $('#testButton') 15
    21. 21. Basic CSS Selector $('img[alt]') 16
    22. 22. Basic CSS Selector $('a[href$=.pdf]') 17
    23. 23. Basic CSS Selector $('button[id*=test]') 18
    24. 24. Positional Selectors $('p:first') 19
    25. 25. Positional Selectors $('img[src$=.png]:first') 20
    26. 26. Positional Selectors $('button.small:last') 21
    27. 27. Positional Selectors $('li:first-child') 22
    28. 28. Positional Selectors $('a:only-child') 23
    29. 29. Positional Selectors $('li:nth-child(2)') $('li:nth-child(odd)') $('li:nth-child(5n)') $('li:nth-child(5n+1)') 24
    30. 30. Positional Selectors $('.someClass:eq(1)') $('.someClass:gt(1)') $('.someClass:lt(4)') 25
    31. 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. 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. 33. Find / Slicing $('div').css('background-color','blue').find('img').css('border','1px solid aqua'); $('body *').slice(2,3).hide(); 28
    34. 34. Matching by Relationship .parents("tr:first") 29
    35. 35. Map var values = $('#myForm :input').map(function(){ return $(this).val(); }); 30
    36. 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. 37. DOM Manipulation • Changing contents .html("<p>This is a paragraph.</p>") .text("<p>This is a paragraph.</p>") 32
    38. 38. DOM Manipulation • Inserting inside • append(content) • appendTo(selector) • prepend(content) • prependTo(selector) 33
    39. 39. DOM Manipulation • Inserting outside • after(content) • insertAfter(selector) • before(content) • insertBefore(selector) 34
    40. 40. DOM Manipulation • Inserting around • Replacing • Removing • Copying 35
    41. 41. Events • Page Load • Event Handling • Live Events • Event Helpers 36
    42. 42. Events • Run after DOM, but before images $(document).ready(function() {}); 37
    43. 43. Effects 38
    44. 44. Ajax • Cross browser $.ajax(); $.load(); $.get(); $.post(); 39
    45. 45. jQuery UI • Interactions • Widgets 40
    46. 46. Interactions • Draggable • Droppable • Resizable • Selectable • Sortable 41
    47. 47. Widgets • Accordion • Date picker • Dialog • Progress Bar • Slider • Tabs 42
    48. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 58. Date Picker $("#book_published_on").datepicker(); 49
    59. 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. 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. 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. 62. Thanks! 53
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×