Jquery In Rails
4 likes1,643 views
This document provides an overview of jQuery, an open source JavaScript library that simplifies interactions between HTML and JavaScript. It discusses how jQuery handles DOM manipulation, events, effects, and Ajax requests in an easy to use way. Examples are given for common jQuery tasks like selecting elements, adding/removing elements, handling events, and making Ajax requests. The document also describes how jQuery UI can be used to add interactions and widgets.
![Basic CSS Selector
$('img[alt]')
16](https://image.slidesharecdn.com/jqueryinrailslouiezhaoinsrc-091221003347-phpapp01/85/Jquery-In-Rails-16-320.jpg)
![Basic CSS Selector
$('a[href$=.pdf]')
17](https://image.slidesharecdn.com/jqueryinrailslouiezhaoinsrc-091221003347-phpapp01/85/Jquery-In-Rails-17-320.jpg)
![Basic CSS Selector
$('button[id*=test]')
18](https://image.slidesharecdn.com/jqueryinrailslouiezhaoinsrc-091221003347-phpapp01/85/Jquery-In-Rails-18-320.jpg)
![Positional Selectors
$('img[src$=.png]:first')
20](https://image.slidesharecdn.com/jqueryinrailslouiezhaoinsrc-091221003347-phpapp01/85/Jquery-In-Rails-20-320.jpg)
![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](https://image.slidesharecdn.com/jqueryinrailslouiezhaoinsrc-091221003347-phpapp01/85/Jquery-In-Rails-26-320.jpg)
![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](https://image.slidesharecdn.com/jqueryinrailslouiezhaoinsrc-091221003347-phpapp01/85/Jquery-In-Rails-43-320.jpg)
![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](https://image.slidesharecdn.com/jqueryinrailslouiezhaoinsrc-091221003347-phpapp01/85/Jquery-In-Rails-47-320.jpg)
![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](https://image.slidesharecdn.com/jqueryinrailslouiezhaoinsrc-091221003347-phpapp01/85/Jquery-In-Rails-50-320.jpg)
Jquery In Rails
- 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
- 16. Basic CSS Selector $('img[alt]') 16
- 19. Positional Selectors $('p:first') 19
- 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
- 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