Passing hash from javascript

I was working on one functionality where I needed to build hash like structure in javascript and make an ajax call to perform that particular action by passing that hash as params to process further. The functionality was to delete a numbered row from the form and after deletion the form should rearrange the rows in sequence while maintaining the order. I used javascript 2 dimensional array to treat it as hash.

e.g. On the form :-

No. | EmpID | Date | Location | Action |
1. | 123 |12-Mar-10 | Mumbai |Delete |
2. | 233 |10-Jan-10 | Mumbai |Delete |
3. | 444 |15-Mar-10 | Mumbai |Delete |
4. | 555 |18-Mar-10 | Mumbai |Delete |

So. If you delete the 3rd row, then after deletion the new form should render as :-

No. | EmpID | Date | Location | Action |
1. | 123 |12-Mar-10 | Mumbai |Delete |
2. | 233 |10-Jan-10 | Mumbai |Delete |
3. | 555 |18-Mar-10 | Mumbai |Delete |

The elements were written in table format. Each row is assigned unique id, so first row will have id = 1, 2nd row with id = 2 and so on. Each td has unique class.

<%=row_id%>
<%= text_field_tag "emp_#{row_id}", "", :id => emp_#{row_id}" %>
<%=text_field_tag "dt_#{row_id}", "", :id => "dt_#{row_id}" %>
<%= text_field_tag "loc_#{row_id}", "", :id => "loc_#{row_id}", %>
<%=link_to(image_tag("delete_img.jpg", :alt => "Delete Row", :id => "del_#{row_id}"),"#")%>

This is the jquery code :-

jQuery(document).ready(function() {
jQuery('#del_<%=i%>').click(function() {
var row_to_be_deleted = jQuery(this).parent().parent().parent();
var row_id = parseInt(row_to_be_deleted.attr("id"));
var data_ary = [];

jQuery('#emp_table tbody > tr').each(function() {
if (jQuery(this).attr("id") != row_id) {
var myArray = [];
var empid_val = "";
var dt_val = "";
var loc_val = "";
jQuery(this).find("td").each(function(){
if (jQuery(this).attr("class")== "empid"){
empid_val = jQuery(this).find("input").val();
myArray.push(empid_val);
}
if (jQuery(this).attr("class")== "dt"){
dt_val = jQuery(this).find("input").val();
myArray.push(dt_val);
}
if (jQuery(this).attr("class")== "loc"){
loc_val = jQuery(this).find("input").val();
myArray.push(loc_val);
}
});
data_ary.push(myArray);
}
});
ajax_call_for_remove_row( data_ary, '<%= remove_row_controllername_url%>');
});
});
----
function ajax_call_for_remove_row(data_ary, remove_row_url) {
var inputs = new Object;
inputs["data_ary"] = data_ary;
jQuery.ajax({
url: remove_row_url,
data: inputs,
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("We are sorry something went wrong, please try again");
},
success: function(data){
},
type: "post"
});
}
----
The corresponding controller actions :-

def remove_row
@data = []
logger.debug(params['data_ary'].inspect)
build_data_from_hash(params['data_ary'])
logger.debug(@data.inspect)
end

private

def build_data_from_hash data_hash
if data_hash
data_ary = sort_hash_to_array data_hash
data_ary.each { |value|
@data << {"Empid" => value[1][0], "Date" => value[1][1], "Location" => value[1][2] }
}
else
@data << {"Empid" => "", "Date" => "", "Location" => "" }
end
end

def sort_hash_to_array data_hash
data_hash.sort { |a,b| a[0].to_i <=> b[0].to_i }
end
----

params['data_ary'].inspect =>
====================================
{"0"=>["123", "12-Mar-10", "Mumbai"], "1"=>["233", "10-Jan-10", "Mumbai"], "2"=>["555", "18-Mar-10", "Mumbai"]}
====================================

@data.inspect =>
====================================
[["0", ["123", "12-Mar-10", "Mumbai"]], ["1", ["233", "10-Jan-10", "Mumbai"]], ["2", ["555", "18-Mar-10", "Mumbai"]] ]
====================================

We can pass this @data as local while rendering the table body partial in corresponding js.erb template. This works great for me!