Question

I am dynamically creating a html table based on the JSON response from an ajax call as shown below. I want to associate clickable event with some rows which would allow me to do some post processing on those json objects. However, I am not able to pass the json object through the function call as it is not picking it up. Could you please help me here. If I pass a property of the json object, I am able to achieve this but I want the whole object to be passed.

        $.get(url, { param: ID},
            function(data){                   

                $.each(data, function(index, product) {                                               
                   $('<tr>').appendTo($body)   
                    .append($('<td>').text(product.ID))        
                    .append($('<td>').text(product.firstName))      
                    .append($('<td>').text(product.lastName))
                    .append($('<td>').text(product.email))        
                    .append($('<td>')
                    .append($('<a href=\"javascript:deleteProduct(' + product.ID + ');\">')
                    .append($('<img src=\"/images/delete.png\">'))))
                    .append($('<td>')
                    .append($('<a href=\"javascript:editProduct(' + product + ');\">')
                    .append($('<img src=\"/images/edit.png\">'))));

                });

I am not able to invoke the editProduct(product) func call here however, deleteProduct(id) works.

Thanks.

Answer 1

product is an object which you are trying to put as a string, which means the function will look like this: editProduct(Object[object]) or similar.

Quick solution would be to use a stringify-like method before putting it in the string.

But a better solution would be to remove the inline js, make the elements before apppending them, use the .click() function to set the functionality instead, then append them to the tr.