CODEWITHSUNDEEP
jqueryajaxasynchronous
masterdany88
masterdany88

Reputation: 5331

JQuery $.ajax. How to put data to request using beforeSend callback

I would like to load data to $.ajax just before executing request. I found callback for that: beforeSend: function() {}

But if unfortunatelly dosnt know how to change data parameter of $.ajax method.

Please help.

Here is my method:

$.ajax('@myInsurance.controllers.routes.Insurances.submit()', { 
        data: null,
        beforeSend : function(){
            setData();
        },
        contentType: 'application/json',
        type: "POST",
        dataType: 'json',

        error: function(response, status, xhr) {
            showNotyfication(status, response.responseText);
        },
        success: function(response, status, xhr) {
            showNotyfication('success',response)
        },
    });

function setData() {
    var vdata;
    vdata.value = otherAjaxAsyncCall()};
    vdata.version = 1;
    return vdata;
}

Upvotes: 1

Views: 3820

Answers (3)

Jai
Jai

Reputation: 74738

You can return an object from setData method but you need a promise, you can use $.when().then() this way: 

function setData() {
    return $.when(otherAjaxAsyncCall).then(function(data){
       var vdata = {}; // <----should be an object
           vdata.value = data;
           vdata.version = 1;
           return vdata;
    }); 
}

now in the ajax you can directly use this:

var data2send = setData(); // call it before this ajax call.

$.ajax({
    url: '@myInsurance.controllers.routes.Insurances.submit()', 
    data: data2send, // <-- set it here as you are returning from "setData"
    beforeSend : function(){},
    contentType: 'application/json',
    type: "POST",
    dataType: 'json',
    error: function(response, status, xhr) {
        showNotyfication(status, response.responseText);
    },
    success: function(response, status, xhr) {
        showNotyfication('success',response)
    }
});

Upvotes: 0

martynasma
martynasma

Reputation: 8595

This setup will not work. Your other AJAX call is asynchronous. Meaning that setData() function will not return proper value because it will not wait for another AJAX call to finish.

What you need to do is to invoke your second AJAX call in the success handler of the first AJAX call:

// first AJAX call
$.ajax('...', {
    success: function(response) {
        // second AJAX call
        $.ajax('...', {
            data: {
                version: 1,
                value: response.value
            },
            success: function(response) {
                // second AJAX request done
                console.log(response);
            }
        })
    }
});

Upvotes: 1

Imesh Chandrasiri
Imesh Chandrasiri

Reputation: 5679

You can always use this.data inside your beforeSend method. It refers to the ajax object.

to set the necessary data just use

var newData = 'someData';
this.data = newData;

The above will set the necessary data to the ajax object. In fact, you can access any parameter using the this command. Just use a debugging point inside the beforeSend method and type this in the developer console to see what are the available parameters.

Upvotes: 0

Related Questions