Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Jquery In Rails

4,479 views

Published on

By Zhao Lu

Published in: Technology
  • Be the first to comment

Jquery In Rails

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

×