JQuery In Rails

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

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

!"#$%"&'()$*$+,-./(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

!"#$%"&'()$*$+,-./(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

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

JavaScript Library • Drastically simplify DOM, Ajax, Animation 4

jQuery • An open source JavaScript library that simpliﬁes the interaction between HTML and JavaScript. 6

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

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

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

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

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

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

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

Basic CSS Selector $('#testButton') 15

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

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

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

Positional Selectors $('p:ﬁrst') 19

Positional Selectors $('img[src$=.png]:ﬁrst') 20

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

Positional Selectors $('li:ﬁrst-child') 22

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

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

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

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

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

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

Matching by Relationship .parents("tr:ﬁrst") 29

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

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

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

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

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

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

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

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

Effects 38

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

jQuery UI • Interactions • Widgets 40

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

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

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

Prototype - View  <%= javascript_include_tag :defaults %>  <% form_remote_for :book, :url => books_path %> .... <% end %>  page.insert_html :bottom, :books, :partial => 'book' 44

jQuery - View  <%= javascript_include_tag 'jquery', 'jquery-ui', 'application' %>  $(document).ready(function() { $("#new_book").submit(function() { $.post($(this).attr("action"), $(this).serialize(), null, "script") return false; }); });  $("#books").append("<%= escape_javascript(render(:partial => @book)) %>"); 45

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

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.ﬁnd 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

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.ﬁnd params[:id] @book.destroy redirect_to books_path end end 47

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:ﬁrst").remove(); return false; }); }); 48

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

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

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

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

Thanks! 53

http://www.in-src.com	83
http://www.slideshare.net	30
http://in-src.com	14
http://123.196.117.24	2

JQuery In Rails

by Louie Zhao on Nov 19, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

4 Embeds 129

Statistics

JQuery In Rails — Presentation Transcript