回调函数中没有值的变量

Question

Im having a strange problem with the following code:

function getTrxData(trx,inputPar,outputPar,callback) {

var retorno = {};

var URL = '/XMII/Runner?Transaction=' + trx;

var params = "";
for(key in inputPar) 
    params = params + "&" + key + "=" + inputPar[key];

if(!outputPar) 
    outputPar = "*";    

if(params)
    URL = URL + params;

URL = URL + '&OutputParameter=' + outputPar;        

$.ajax({
    type: "GET",
    url: URL,
    async: true,
    success: function(data){
        retorno.datos = $.xml2json(data);
        retorno.tipo    = 'S';          // Success
        retorno.mensaje = "Datos obtenidos correctamente";      
        callback(retorno);
    },
    error: function(jqXHR, textStatus, errorThrown){
        retorno.tipo    = 'E';          // Error
        retorno.mensaje = "Error: " + textStatus;   
        callback(retorno);
    }
});
}

function crearSelect(trx,inputPar,outputPar,selectID,campoTextoXX,campoValor,valorDefault,callback2) {
// At this point campoTextoXX exists and has a value
getTrxData(trx,inputPar,outputPar,function(retorno2) {

            // At this point campoTextoXX is an object equal to callback2

    if(retorno2.tipo == 'E') {
        callback2(retorno2);
        return false;
    }

    var options = "";
    var selected = "";

    $.each(retorno2.datos.Rowset.Row, function(k,v) {
        if(valorDefault == v[campoValor]) {
            selected = " selected='selected'";
        } else {
            selected = "";
        }
        options = options + "<option value='" + v[campoValor] + selected "'>";
        options = options + v[campoTextoXX];    
        options = options + "</option>";
    });

    $("#" + selectID + " > option").remove();
    $("#" + selectID).append(options);

    callback2(retorno2);

});

}

And the call is like this:

crearSelect("Default/pruebas_frarv01/trxTest",{letra:  'V'},"*",'selectID',"CustomerID",'OrderID','',function(retorno) {
alert(retorno.tipo + ": " + retorno.mensaje);
});

The problem is that campoTextoXX and campoValor dont get any value inside the callback function. Also, debugging in Chrome shows me that campoTextoXX has the value of the callers callback function: alert(retorno.tipo + ": " + retorno.mensaje);

I dont know what to do next.

Any ideas?

Thx

Answer 1

The problem appears to be that you are overwriting the variable "pepe" somewhere in your code.

Also, check how you are assigning your callback function and parameter object. A quick look appears that it is not being supplied the correct parameters.

Answer 2

You should be careful not to use global variables within your success and error functions. so instead of:

success: function(data){
        retorno.datos = $.xml2json(data);
        retorno.tipo    = 'S';          // Success
        retorno.mensaje = "Datos obtenidos correctamente";      
        callback(retorno);
    }

I think you should do something like:

success: function(data){
        var retorno = {};

        retorno.datos = $.xml2json(data);
        retorno.tipo    = 'S';          // Success
        retorno.mensaje = "Datos obtenidos correctamente";      
        callback(retorno);
    }

furthermore you should use Firebug for Firefox to step through your code and watch your variables to ensure that the data is coming in correctly, and not getting overwritten at any point

Your control flow is a bit confusing, and another thing you can do is check to make sure your callbacks and variables are correct using some typeof conditionals to make sure they are functions, etc. try doing things like this:

success: function(data){
            var retorno = {};

            retorno.datos = $.xml2json(data);
            retorno.tipo    = 'S';          // Success
            retorno.mensaje = "Datos obtenidos correctamente";
            if (typeof callback !== "function" || typeof data !== "object"){
                console.log('error');
                throw "callback or data is not correct type";
            }      
            callback(retorno);
        }

and make sure you aren't getting an error in the console.

Answer 3

You might find it easier to mange the callback chain by exploiting $.ajax's ability to behave as a jQuery Deferred.

This allows us very simply to specify the "success" and "error" behaviour in the guise of request.done(...) and request.fail(...) at the point where getTrxData is called rather than inside getTrxData - hence the callback chain is (ostensibly) one level less deep.

function getTrxData(trx, inputPar, outputPar) {
    inputPar.Transaction = trx;
    inputPar.OutputParameter = (outputPar || '*');
    return $.ajax({
        url: '/XMII/Runner?' + $.param(inputPar)
    });
}

function makeOptions(obj, selectID, campoTextoXX, campoValor, valorDefault) {
    var $option, selected, $select = $("#" + selectID);
    $("#" + selectID + " > option").remove();
    $.each(obj.datos.Rowset.Row, function(k, v) {
        selected = (valorDefault == v[campoValor]) ? ' selected="selected"' : '';
        $option = $('<option value="' + v[campoValor] + selected + '">' + v[campoTextoXX] + "</option>");
        $select.append($option);
    });
    return obj;
}

function crearSelect(trx, inputPar, outputPar, selectID, campoTextoXX, campoValor, valorDefault, callback) {
    var request = getTrxData(trx, inputPar, outputPar);
    request.done(function(data) {
        var obj = {
            datos: $.xml2json(data),
            tipo: 'S',// Success
            mensaje: "Datos obtenidos correctamente"
        };
        callback(makeOptions(obj, selectID, campoTextoXX, campoValor, valorDefault));
    });
    request.fail(function(jqXHR, textStatus, errorThrown) {
        var obj = {
            tipo: 'E',// Error
            mensaje: "Error: " + textStatus
        };
        callback(obj);
    });
}

crearSelect("Default/pruebas_frarv01/trxTest", {letra:'V'}, "*", 'selectID', "CustomerID", 'OrderID', '', function(retorno) {
    alert(retorno.tipo + ": " + retorno.mensaje);
});

You will see that this is essentially a refactored version of your original code, with significant simplification of the string handling in getTrxData , which appears to work correctly.

The options code has been pulled out as a separate function, makeOptions , to make the new structure of crearSelect clearer. This is not strictly necessary and the code could be re-combined without penalty.

Tested here insomuch as to make sure it loads and runs through to the "Error" alert, which it does successfully. Without access to the server-side script, I can't test/debug the full ajax functionality so you may need to do some debugging.