2

I have the following function to delete a row. I would like to reuse this function by passing in the #search_result.

function row_delete_ajax(event) {
    event.preventDefault();
    if (confirm(gettext('Are you sure you want to delete this row?'))) {
    var url = $(this).attr("href") + "/";

        $.post(url, function(result){
            $('#search_result').empty();
            $('#search_result').append(result);
        });                
    }       
};

This is how I bind the function initially, But kind of stuck how to pass in #search_result to row_delete_ajax

$(document).ready(function (){  
    $('#search_result').find(".row_delete_ajax").click(row_delete_ajax);
}
1

3 Answers 3

3

Another way of doing it is to use the [eventData] parameter:

eventData: A map of data that will be passed to the event handler.

$(document).ready(function (){  
    // Create an object with all the properties you want.
    var data = { id: '#search_result' }; 

    // Pass the data object as the first parameter in the click-event.
    $('#search_result').find(".row_delete_ajax").click(data, row_delete_ajax);
});

And then use it like this:

function row_delete_ajax(event) {
    event.preventDefault();
    if (confirm(gettext('Are you sure you want to delete this row?'))) {
    var url = $(this).attr("href") + "/";

        $.post(url, function(result){
            $(event.data.id).empty();
            $(event.data.id).append(result);
        });                
    }       
};

Also check event.data for example.

1
  • 1
    I like this way. Was actually wondering if there's a way we can access event parameter's properties. This is quite fun. FYI, I'm not the one who asked the question. Nov 21, 2012 at 21:26
2

You'll have to rewrite your click slightly to be something like this:

$(document).ready(function (){  
    $('#search_result').find(".row_delete_ajax").click(function (event) {
        row_delete_ajax(event, $("#search_result"));
    });
}

Then change your function to take both parameters:

function row_delete_ajax(event, searchResult) {
    event.preventDefault();
    if (confirm(gettext('Are you sure you want to delete this row?'))) {
        var url = $(this).attr("href") + "/";

        $.post(url, function(result){
            searchResult.empty();
            searchResult.append(result);
        });                
    }       
};
2

Have you thought about storing meta-information using data() http://api.jquery.com/jQuery.data/?

$(document).ready(function (){  
    $('#search_result').find(".row_delete_ajax")
        .data('target', 'search_result')
        .click(row_delete_ajax);
}

Then your row_delete_ajax would look as follows:

function row_delete_ajax(event) {
    event.preventDefault();
    if (confirm(gettext('Are you sure you want to delete this row?'))) {
        var url = $(this).attr("href") + "/";

        var target = $(this).data('target');
        $('#' + target).load(url);
    }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.