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

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.