jQuery and Rails, Sitting in a Tree

Adam McCrea adam@edgecase.com @adamlogic

AGENDA
Intro to jQuery

jQuery with Rails 3

jQuery with Rails 2

Beyond the Rails (Ajax) Way

JQUERY RECIPE
1. Select some HTML elements.
2. Call methods on them.
3. Repeat.

$("p.neat").addClass("ohmy").show("slow");

CSS Selector



$("p.neat")

CSS Selector jQuery Wrapper



$("p.neat")

jQuery Wrapper Methods

$("p.neat").addClass("ohmy").show("slow");

jQuery Wrapper

jQuery function always returns jQuery wrapper

$(...) ALWAYS

Write your own wrapper method

$.fn.log = function() {
console.log(this);
return this;
}

$("p.neat").log().show("slow");

html
<a onclick="alert('I was clicked'); return false;">

html
<a class="clickme">

script
$('a.clickme').bind('click', function(event) {
alert('I was clicked!');
event.preventDefault();
});

html
<a class="clickme">

script
$('a.clickme').live('click', function(event) {
});

$(css_selector)

$(dom_element)

$(html_string)

$(function)

$()

$(function() {

$('a.clickme').live('click', function(event) {
});
});

AGENDA

✓ Intro to jQuery

jQuery with Rails 3

jQuery with Rails 2


JQUERY + RAILS 3
Include jquery.js and rails.js

Include csrf_meta_tags

:remote => true

Render .js.erb templates

<!DOCTYPE html>
<html>
<head>
 <title>Example</title>
 <%= stylesheet_link_tag :all %>
 <%= javascript_include_tag 'jquery', 'rails' %>
 <%= csrf_meta_tag %>
</head>

<body>

<%= link_to 'view', item, :remote => true %>

</body>
</html>





:conﬁrm and :method also available

rails.js
$('form[data-remote]').live('submit', function(e) {
  $(this).callRemote();
  e.preventDefault();
});

$('a[data-remote],input[data-remote]').live('click', function(e) {
  $(this).callRemote();
  e.preventDefault();
});

create.js.rjs
page.insert_html :bottom, :items, :partial => 'item', :object => @item
page.replace_html :item_count, pluralize(@items.size, 'item')
page[:new_item_form].toggle

create.js.rjs
page.insert_html :bottom, :items, :partial => 'item', :object => @item
page.replace_html :item_count, pluralize(@items.size, 'item')
page[:new_item_form].toggle

create.js.erb
$('#items').append(<%=
render(:partial => 'item', :object => @item).to_json
%>);

$('#item_count').html('<%= pluralize(@items.size, "item") %>');

$('#new_item_form').toggle()

JQUERY + RAILS 3

✓ Include jquery.js and rails.js

✓Include csrf_meta_tags
✓ ✓ :remote => true

✓ Render .js.erb templates

2
JQUERY + RAILS X
3

✓ :remote => true

Render .js.erb templates

2
JQUERY + RAILS X
3

✓

✓ :remote => true


Rack::Utils.escape_html(request_forgery_protection_token)
Rack::Utils.escape_html(form_authenticity_token)





Rack::Utils.escape_html(request_forgery_protection_token)
Rack::Utils.escape_html(form_authenticity_token)




<%= link_to 'view', item, 'data-remote' => true %>

2
JQUERY + RAILS X
3

✓ Include jquery.js and rails.js

✓Reproduce csrf_meta_tags
✓ ✓‘data-remote’ => true

AGENDA

✓ Intro to jQuery

✓ jQuery with Rails 3



AJAX REQUEST
browser app
JAVASCRIPT

AJAX REQUEST
browser app
JSON

template

<%= link_to 'view', '/item/1', 'data-remote' => true,
'data-type' => 'json' %>

controller
  def create
    item = Item.create(params[:item])

    render :json => {
      :errors     => item.errors,
      :item_count => Item.count,
      :html       => render_to_string(:partial => 'item',
:object => item)
    }
  end

application.js
$('#new_item_form').live('ajax:success', function(xhr, data) {
  if (data.errors.length) {
    alert(data.errors);
  } else {
    $('#items').append(data.html);
    $('#item_count').html(data.item_count);
    $(this).hide();
  }
});

rails.js
$.ajax({
  url: url,
  data: data,
  dataType: dataType,
  type: method.toUpperCase(),
  beforeSend: function (xhr) {
    el.trigger('ajax:loading', xhr);
  },
  success: function (data, status, xhr) {
    el.trigger('ajax:success', [data, status, xhr]);
  },
  complete: function (xhr) {
    el.trigger('ajax:complete', xhr);
  },
  error: function (xhr, status, error) {
    el.trigger('ajax:failure', [xhr, status, error]);
  }
});

AGENDA

✓ Intro to jQuery



✓

Thanks!
Adam McCrea adam@edgecase.com @adamlogic

Scrooge McDuck - http://www.duckmania.de/images/picsou300_poster.jpg

jQuery and Rails, Sitting in a Tree

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie jQuery and Rails, Sitting in a Tree

Ähnlich wie jQuery and Rails, Sitting in a Tree (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

jQuery and Rails, Sitting in a Tree