Jquery In Rails

jQuery in Rails Louie Zhao Co - Founder Caibangzi.com & IN-SRC Studio 1

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

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: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  <%= 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> 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

Jquery In Rails

by shen liu

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 25

Statistics

Jquery In Rails Presentation Transcript