• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
JQuery In Rails
 

JQuery In Rails

on

  • 3,231 views

 

Statistics

Views

Total Views
3,231
Views on SlideShare
3,082
Embed Views
149

Actions

Likes
7
Downloads
95
Comments
0

4 Embeds 149

http://www.in-src.com 100
http://www.slideshare.net 30
http://in-src.com 17
http://123.196.117.24 2

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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 JQuery In Rails Presentation Transcript

  • 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
  • 3
  • 3
  • !"#$%&'()*+,$-)%./)01203,4'5446(67*448,*99'(544(6: 3
  • 3
  • JavaScript Library • Drastically simplify DOM, Ajax, Animation 4
  • 5
  • jQuery • An open source JavaScript library that simplifies the interaction between HTML and JavaScript. 6
  • twitter.com time.com microsoft.com amazon.com wordpress.com ibm.com 7
  • 8
  • 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:first') 19
  • Positional Selectors $('img[src$=.png]:first') 20
  • Positional Selectors $('button.small:last') 21
  • Positional Selectors $('li:first-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').find('img').css('border','1px solid aqua'); $('body *').slice(2,3).hide(); 28
  • Matching by Relationship .parents("tr:first") 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 <!-- 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
  • 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
  • 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.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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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