CODEWITHSUNDEEP
jquery
Houman
Houman

Reputation: 66320

How to pass in a variable to the click event handler?

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);
}

Upvotes: 2

Views: 241

Answers (3)

Mario S
Mario S

Reputation: 11945

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.

Upvotes: 3

sroes
sroes

Reputation: 15053

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);
    }
}

Upvotes: 2

Mathew Thompson
Mathew Thompson

Reputation: 56429

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);
        });                
    }       
};

Upvotes: 2

Related Questions