rails: how to update a has_many :through relation via jQuery?

Question

Sorry, if this is a noobish question, but I'm just getting started with Rails and jQuery. I have the following scenario:

I have 3 classes: contacts, companies and contact_company_joins (ccj). For all three classes I created models, controller and views. Obviously, contacts and companies are connected via the join-table ccj (using has_many :through).

contacts <-> contact_company_joins <-> companies

In my contact's "show" view I want to display a table that lists all companies that the contact is connected to (and some additional info on the company itself e.g. phone-number). In my company's view I want to do the same, but this time with the employees' (contacts') details. Each row of the table has the typical "delete" link at the end, whose function I have now hooked up to one of my jQuery functions:

$('.edit_contact_join_delete').livequery('click', function() {
    var $deleteButton = $(this);
    var answer = confirm("Sure?");
    var dataloc = "&_method=delete";
    if (answer) {
     $.ajax({
          type : "POST",
          url  : this.href,
          data : dataloc,
          success: function(result) {
          }
        });
    }
    return false;
  });

In both views (contact and company), the delete action takes me to the destroy function of the ccj controller. What I want to do now is to update or rerender the table of the individual site (contact or company) that is calling the delete function, but ONLY the part of the table. I guess I must implement it in the "success" function above? But then again, even if I return something from the ccj's controller (a rendered partial?)...that would be the same for both contact and company view, right? How can I make sure that after my Ajax call to destroy the ccj object, I get a fresh DOM object for my contact's view (which would be a new company table), but also get a fresh contacts table when I do the Ajax call from my company view?

Hope this all makes sense :-)

Regards,

Sebastian

Answer 1

All you need is for the delete action to return a success or failure (even just true or false will do), then your javascript can deal with either response.

If a failure then return a message saying so, if a success and the relationship deleted, you could find the <tr> parent of the delete link that you clicked and fade the row out, eventually deleting it from the page. For example (given that your controller returns true if the delete is successful and false otherwise):

$('.edit_contact_join_delete').livequery('click', function() {
    var $deleteButton = $(this);
    var answer = confirm("Sure?");
    var dataloc = "&_method=delete";
    if (answer) {
     $.ajax({
          type : "POST",
          url  : this.href,
          data : dataloc,
          success: function(result) {
            if (result) {
              // handle successful delete
              $deleteButton.parent('tr').fadeOut().remove()
            } else {
              // handle failed delete
              alert('Delete failed');
            }
          } 
        });
    }
    return false;   
  });