Jquery ajax call not working within a already rendered partial in Rails

Question

I´m using the great Nicolas Alpi instructions for Jquery + Rails, where my application.js is:

jQuery.ajaxSetup({
  'beforeSend': function(xhr) {xhr.setRequestHeader("Accept", "text/javascript")}
})


function _ajax_request(url, data, callback, type, method) {
    if (jQuery.isFunction(data)) {
        callback = data;
        data = {};
    }
    return jQuery.ajax({
        type: method,
        url: url,
        data: data,
        success: callback,
        dataType: type
        });
}

jQuery.extend({
    put: function(url, data, callback, type) {
        return _ajax_request(url, data, callback, type, 'PUT');
    },
    delete_: function(url, data, callback, type) {
        return _ajax_request(url, data, callback, type, 'DELETE');
    }
});

/*
Submit a form with Ajax
Use the class ajaxForm in your form declaration
<% form_for @comment,:html => {:class => "ajaxForm"} do |f| -%>
*/
jQuery.fn.submitWithAjax = function() {
  this.unbind('submit', false);
  this.submit(function() {
    $.post(this.action, $(this).serialize(), null, "script");
    return false;
  })

  return this;
};



/*
Retreive a page with get
Use the class get in your link declaration
<%= link_to 'My link', my_path(),:class => "get" %>
*/
jQuery.fn.getWithAjax = function() {
  this.unbind('click', false);
  this.click(function() {
    $.get($(this).attr("href"), $(this).serialize(), null, "script");
    return false;
  })
  return this;
};

/*
Post data via html
Use the class post in your link declaration
<%= link_to 'My link', my_new_path(),:class => "post" %>
*/
jQuery.fn.postWithAjax = function() {
  this.unbind('click', false);
  this.click(function() {
    $.post($(this).attr("href"), $(this).serialize(), null, "script");
    return false;
  })
  return this;
};

/*
Update/Put data via html
Use the class put in your link declaration
<%= link_to 'My link', my_update_path(data),:class => "put",:method => :put %>
*/
jQuery.fn.putWithAjax = function() {
  this.unbind('click', false);
  this.click(function() {
    $.put($(this).attr("href"), $(this).serialize(), null, "script");
    return false;
  })
  return this;
};

/*
Delete data
Use the class delete in your link declaration
<%= link_to 'My link', my_destroy_path(data),:class => "delete",:method => :delete %>
*/
jQuery.fn.deleteWithAjax = function() {
  this.removeAttr('onclick');
  this.unbind('click', false);
  this.click(function() {
    $.delete_($(this).attr("href"), $(this).serialize(), null, "script");
    return false;
  })
  return this;
};

/*
Ajaxify all the links on the page.
This function is called when the page is loaded. You'll probaly need to call it again when you write render new datas that need to be ajaxyfied.'
*/
function ajaxLinks(){
    $('.ajaxForm').submitWithAjax();
    $('a.get').getWithAjax();
    $('a.post').postWithAjax();
    $('a.put').putWithAjax();
    $('a.delete').deleteWithAjax();
}

$(document).ready(function() {
// All non-GET requests will add the authenticity token
 $(document).ajaxSend(function(event, request, settings) {
       if (typeof(window.AUTH_TOKEN) == "undefined") return;
       // IE6 fix for http://dev.jquery.com/ticket/3155
       if (settings.type == 'GET' || settings.type == 'get') return;

       settings.data = settings.data || "";
       settings.data += (settings.data ? "&" : "") + "authenticity_token=" + encodeURIComponent(window.AUTH_TOKEN);
     });

  ajaxLinks();
});

My task controller has:

 def followship
    @task = Task.find(params[:id])

    respond_to do |format|
        # some logic
        format.js {render :content_type => 'text/javascript' }
    end
  end

My followship.js.erb:

<% if @new_follower %>
  $("#followers_list").append("<%= escape_javascript(render :partial => 'new_follower', :object => @new_follower, :locals => {:task => @task}) %>");
  $("#_user_id option[value='<%= @new_follower.id.to_s %>']").remove();
  $("#follower_<%= @new_follower.id.to_s %>").delay(500).effect("highlight", {}, 2000);
<% else %>
   $("#follower_<%= @id_to_remove %>").fadeOut("slow");
<% end %>
<% flash.discard %>

The _new_follower.erb partial:

<li id='follower_<%= @new_follower.id.to_s %>'>
  <%= @new_follower.name %>
  <%= link_to "[x]", {:controller => "tasks", :action => "followship", :id => @task, :user_id => @new_follower.id, :to_do => "exclude"}, :class => "get" if @new_follower == current_user %>
</li>

The problem:

When I include a new follower to the Task, everything goes OK. A new li is rendered to the list and highlight the new user. But when I try to exclude myself using the [x] link, rendered with the little partial delivered by the last ajax call, the page is reloaded and only the text of the script is rendered to the screen: (eg)

$("#follower_2").fadeOut("slow");

If I reload the page and the new follower is rendered without the use of the partial, everything goes OK. The fadeOut works.

Please help. Thanks in advance. btw: Rails 2.3.8

Answer 1

Using this approach to the application.js solved my problem:

http://www.danhawkins.me.uk/2010/05/unobtrusive-javascript-with-rails-2-3-5/

Thanks.