I have a button click event where I execute multiple steps. Step one is an ajax request and the second step is calling a function passing the button name as a parameter. How do I accomplish this?

function buttonClick(e){
    var param1ToBePassed = 1;
    var param2ToBePassed = 2;
    $.when(func1())
    .done(function(){
        $.when(
         $.ajax({}),
         //here I want to call func2 passing in param1tobepassed and param2tobepassed
         funct2(param1ToBePassed, param2ToBePassed ) //this line isn't working
        )
        .done(()=>{console.log('ajax and func2 calls finished');})
    }

}

var func1 = function(){var deferred = new $.Deferred(); /*do somethig;*/ return deferred;}
var func2 = function(param1, param2){var deferred = new $.Deferred(); /*do somethig with param1 and param2;*/ return deferred;}

How do I pass param1ToBePassed and param2ToBePassed to func2 ?

CodePudding user response：

Since you are utilizing jQuery, then you can use jQuery's AJAX function. It simplifies a lot of the logic and it's very easy to follow.

Note that the jQuery AJAX function is asynchronous by default. This means you can perform any other tasks, simultaneously, alongside it. For instance, if you don't want to wait for the success request, you can just do a function call anywhere.

function buttonClick(e) {
    var param1ToBePassed = 1;
    var param2ToBePassed = 2;

    $.ajax({
        url: 'YOUR_REQUEST_URL',
        method: 'POST', // or GET
        data: {
            // any data to parse?
        },
        success:function(response){                 
            func1(); // this will run on success.
        }
    });
    
    func2(param1ToBePassed, param2ToBePassed); // this will run in parallel with the AJAX function.
}

Explanation of the AJAX function:

1. url: here is where you define the path of the request.

2. method: here is where you define the method, e.g. POST or GET request.

3. data: here is where you can parse some data with your request (for instance for data, or whatever you want).

4. success: This is the success function of the AJAX request. It will run once the request is successful.

CodePudding user response：

function buttonClick(e){
    var param1ToBePassed = 1;
    var param2ToBePassed = 2;
    $.when(func1())
    .done(function(){
        $.when(
         $.ajax(),
         //here I want to call func2 passing in param1tobepassed and param2tobepassed
         funct2(param1ToBePassed, param2ToBePassed ) //this line isn't working
        )
        .done(function(){console.log('ajax and func2 calls finished');})
    });

}

var func1 = function(){var deferred = new $.Deferred(); /*do somethig;*/ 
return deferred;
}
var func2 = function(param1, param2){var deferred = new $.Deferred(); /*do somethig with param1 and param2;*/
return deferred;
}