Reusable jQuery delete function

Question

I using the following function to delete a row in a table

//delete individual row
jQuery('.stdtable img.delete').click(function(){
    var c = confirm('Continue delete?');
    if(c) jQuery(this).parents('tr').fadeOut(function(){ 
        jQuery(this).remove();
    });
    return false;
});

This code is in a separate js file and is common to all pages. Now I would like to add an Ajax action that deletes the row from the database. But depending on which page I'm on, it must call different controller.

Example: Product page must call delete in ProductController ProductGroup page must call delete in ProductGroupController

How to handle this?

`side` ... typo for `site`? and did you actually mean `page` or so? — bart s, Jan 03 '13 at 14:16
[see this SO item](http://stackoverflow.com/a/3512201/474535). retrieve your controllers path and assemble an ajax call with it — bart s, Jan 03 '13 at 14:19

score 5 · Accepted Answer · answered Jan 03 '13 at 14:20

If you need some method of defining which controller to call, you could put a data attribute on the table. Something like this:

<table class="stdtable" data-remove-url="@Url.Action("DeleteRow", "MyController")">
    <tr data-id="1">
        AAA
        <img class="delete" src="foo.jpg" />
    </tr>
    <tr data-id="2">
        BBB
        <img class="delete" src="foo.jpg" />
    </tr>
 </table>

Then in your jQuery you can get this value as the url parameter of your request, along with the id to delete.

jQuery('.stdtable img.delete').click(function(e) {
    e.preventDefault();
    if (confirm('Continue delete?')) {
        var $el = $(this);
        var $tr = $el.closest('tr');
        var url = $el.closest('table').data('remove-url');
        var id = $tr.data('id');

        $tr.fadeOut(function() { 
            $el.remove();
            $.post(url, { rowId = id }); // do the delete on the server 
        });
    }
});

score 1 · Answer 2 · answered Jan 03 '13 at 14:18

1

You could add a custom attribute to your table or row with contains the url off the controller you need to call. In your method you can read this custom attribute to get the url of your controller.Look here for the JQuery attr methode.

answered Jan 03 '13 at 14:18

Kenny Tordeur

212
1
10

score 0 · Answer 3 · answered Jan 03 '13 at 14:24

If I understand your question right, you want to click the image with class delete to make a call to delete that row in the database. The simplest solution would be

<img data-rowid="1" src="something.jpg"/>


jQuery('.stdtable img.delete').click(function(e){
    e.preventDefault();
    var c = confirm('Continue delete?');
    var that = this;
    if(c) {
        var id = this.data("rowid");
        jQuery.ajax({ url : "/resource/"+id, method : "DELETE" 
              statusCode: {
                 200: function() {
                       jQuery(that).parents('tr').fadeOut(function(){ 
                            jQuery(that).remove();
                       });
                 }
              }});

    }
    return false;
});

Reusable jQuery delete function

3 Answers3