ajax requests using callbacks [duplicate]

0

I am developing a web application, basically what I have to do is create components of a form based on the information I collect from a database.

var _populate = function (idparametro) {
    jQuery.ajax({
        type: "GET",
        async: false,
        url: pathservicehost + '/dominios/' + idparametro,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data, status, jqXHR) {
            console.log('Dominios Ok...');
            return data;
        },
        error: function (jqXHR, status) {
            alert('Error (Obtener Dominios)');
        }
    });
};

var _draw = function (callback) {
    idparametro = 100;
    data = callback(idparametro);
    defecto = -1;
    for (var i = 0; i < data.length; i++)
        if (data[i].Defecto == 1) defecto = i;

    $('#cbxparam').kendoComboBox({
        animation: false,
        dataTextField: "Descripcion",
        dataValueField: "Descripcion",
        dataSource: data,
        filter: "contains",
        suggest: true,
        index: defecto
    });
};

The function _populate what it does is bring the data with which for example a combobox is populated or the values that a group of radiobuttons must have and the function _draw is responsible for drawing the widget (with the data that corresponds to it ). The problem I have is that I need to find out how the _draw function waits for _populate to finish consuming the service and the data is returned before continuing to execute the following lines of code (for loop).

I hope someone can give me my regards.

    
asked by alexander zevallos 07.04.2016 в 19:10
source

1 answer

2

What happens is that you have an error in the way you execute your code. Since as AJAX is Asynchronous, when you execute your _draw() , your request has not returned from the server, so it does not get full.

What I think you should do is invoke within your _populate() , specifically in the success, the function _draw() something like this:

var _execute = function (callback) {
    idparametro = 100;
    callback(idparametro);
};

var _draw = function (callback) {
    defecto = -1;
    for (var i = 0; i < data.length; i++)
        if (data[i].Defecto == 1) defecto = i;

    $('#cbxparam').kendoComboBox({
        animation: false,
        dataTextField: "Descripcion",
        dataValueField: "Descripcion",
        dataSource: data,
        filter: "contains",
        suggest: true,
        index: defecto
    });
};

var _populate = function (idparametro) {
    jQuery.ajax({
        type: "GET",
        async: false,
        url: pathservicehost + '/dominios/' + idparametro,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data, status, jqXHR) {
            console.log('Dominios Ok...');
            _draw(data);
        },
        error: function (jqXHR, status) {
            alert('Error (Obtener Dominios)');
        }
    });
};

_execute(_populate); //Ejecuto todo el código.

What I did was, that the function _execute(); invoke the function _populate(); then when this function reaches the .success() invoke the _draw(); This will invoke everything in a logical order.

I leave this link of a similar question that is construed.

    
answered by 07.04.2016 в 19:33