Rails 3 Remote Links and Forms Part 2: Data-type (With jQuery)

1

dataType = element.attr('data-type') || ($.ajaxSettings && $.ajaxSettings.dataType);

1
2
3

// Simplified for clarityif (dataType === undefined) {
  xhr.setRequestHeader('accept', '*/*;q=0.5, text/javascript');
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

$('#i-want-html')  .bind('ajax:success', function(evt, data, status, xhr){
    var $this = $(this);

    // Append response HTML (i.e. the comment partial or helper)
    $('#comments').append(xhr.responseText);

    // Clear out the form so it can be used again
    $this.find('input:text,textarea').val('');

    // Clear out the errors from previous attempts
    $this.find('.errors').empty();

  })
  .bind('ajax:error', function(evt, xhr, status, error){

    // Display the errors (i.e. an error partial or helper)
    $(this).find('.errors').html(xhr.responseText);

  });

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

$('#i-want-json')  .bind('ajax:success', function(evt, data, status, xhr){
    var $this = $(this);

    // do something with 'data' response object

    $this.find('input:text,textarea').val('');
    $this.find('.errors').empty();
  })
  .bind('ajax:error', function(evt, xhr, status, error){
    var responseObject = $.parseJSON(xhr.responseText),
        errors = $('<ul />');

    $.each(responseObject, function(){
      errors.append('<li>' + this + '</li>');
    })

    $(this).find('.errors').html(errors);
});

1
2

//Nothing!

1
2

$('#i-want-js').bind('ajax:complete', function(evt, xhr, status){  eval(xhr.responseText);
});

1
2
3
4
5
6
7
8
9

class TestCommentsController < ApplicationController  respond_to :html, :js
  ...
  def create
    @comment = Comment.new( params[:comment] )

    flash[:notice] = "Comment successfully created" if @comment.save
    respond_with( @comment, :layout => !request.xhr? )
  end
end

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

class TestCommentsController < ApplicationController ...
  def create
    @comment = Comment.new( params[:comment] )

    respond_to do |format|
      if @comment.save
        flash[:notice] = "Comment successfully created"
        format.html { redirect_to(@comment), :layout => !request.xhr? }
        format.js { render :js => @comment, :status => :created, :location => @comment, :layout => !request.xhr? }
      else
        format.html { render :action => "new", :layout => !request.xhr? }
        format.js { :js => @comment.errors, :status => :unprocessable_entity }
     end
  end
end

1
2
3
4
5
6
7

<div id="comments"></div>
<%= form_for :comment, :remote => true, :html => { :id => 'new-comment-form' } do |f| %>
  <%= f.text_area(:body) %>
  <div class="errors"></div>
  <%= f.submit %>
<% end %>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

var el = $('#new-comment-form');
<% if @comment.errors.any? %>

  // Create a list of errors
  var errors = $('<ul />');

  <% @comment.errors.full_messages.each do |error| %>
    errors.append('<li><%= escape_javascript( error ) %></li>');
  <% end %>

  // Display errors on form
  el.find('.errors').html(errors);

<% else %>

  // We could also render a partial to display the comment here
  $('#comments').append("<%= escape_javascript(
      simple_format( @comment.body )
    ) %>");

  // Clear form
  el.find('input:text,textarea').val('');
  el.find('.errors').empty();

<% end %>