Hi all,

I've got the individual components/actions working on their own it's just adding it all onto the one page that im struggling with.

Use ajax to make the updates and deletes.  Without ajax each delete button should be in its own form with the form's action pointing to the controller action and id of the item.  JQuery would be my library of choice and it should be relatively painless.

<tr id="1">
 <td>
  <a href="/customers/1/delete" onclick="deleteCustomer(1);return false;">Delete</a>
 </td>
 <td>
 	<a href="/customers/1/edit" onclick="editCustomer(1);return false;">Update</a>
 </td>
 <td class="first-name">Adam</td>
</tr>

<div id="edit-form" style="display:none">
<form id="customer-edit-form" action="" method="post" onsubmit="updateCustomer(); return false;">
  <label for="customer_firstName">First name:</label>
  <input id="customer_firstName" name="customer.firstName" value="" />
  <input type="submit" />
</form>
</div>

<script type="text/javascript">
function deleteCustomer(id) {
  $.ajax({type:"DELETE", url: "/customers/" + id, success:function(){$("#" + id).remove();});
}

function editCustomer(id) {
	var row = $("#" + id);
	$("customer-edit-form").attr("action", "/customers/" + id);
	$("#customer_firstName").value = row.children(.first-name :first).val();
	$("#edit-form").show();
}

function updateCustomer() {
	var f = $("customer-edit-form");
  $.post(f.attr("action"), f.serialize());
}
</script>

That's awesome... How do you update the page after the ajax call? 

 The JQuery docs are really good.  They have callbacks for onSuccess and onError that you can use.  In your controller you would detect that it was an xhr request.  Google around I forget what headers are sent, then render a partial view instead of a full view.  You can then do what ever you need to in the onSuccess.  The delete action uses an http request of type DELETE, unless you are using simplyrestful routing this probably not what you want.  I just threw the fake code up there to give you an idea of what you can do.

Abomss thats great thanks for the reply.

This solution has involves a destructive GET being the delete action.

A crawler or a link checking tool will destroy data in this case and really should be avoided. 

Does this still apply even though its executing through js?  Hopefully a crawler wouldn't get this deep into an application...

Certain crawlers may execute js but the vast majority don't. they typically don't post forms either, just follow links.

I would rewrite it so that the delete function POSTs instead of GETs. in fact i always require that the delete actions be called via a POST such that if you try to use a simple GET request you'll get a 404.

In any case, the example was a very nice demo of ajax, you should take it at face value and use it for your own needs.

Could i just ask, tho, why people prefer jQuery to prototype?