Your SlideShare is downloading. ×
  • Like
Jquery In Rails
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Jquery In Rails

  • 4,146 views
Published

By Zhao Lu

By Zhao Lu

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,146
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
62
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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