Question

Currently I am calling a function in code behind once someone clicks on a button (using button’s event) and using following ajax :

$('.toggleBtn').click(function(e) {
    $.ajax({
                        type: "POST",
                        url: "page.aspx/function",
                        data: "{'id': '" + id + "'}",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        async: false,

                        success: function (msg) {

Is it possible in jquery to hook to all of the controls events in current page and run only one $.ajax.

Say I have four controls, two textboxes and two comboboxes and want to update database accordingly. if i want to run the above I need to hook to their click events one by one and run separate function in code behind, which will not be ideal.

In another words want to populate my object once the user selects/inputs the control value.

Hope it makes sense.

Answer 1

If I understand your question, you’re asking how to fire the same code for the click event of a group of elements, but wish to pass the ID of the clicked element as a parameter in the data. If so, this will do it for all elements with the class className…

$('.className').click(function(e) {
    $.ajax({
        type: "POST",
        url: "page.aspx/function",
        data: "{'id': '" + this.id + "'}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        async: false,
        success: function (msg) {
            ...
            ...
        }
    });
});