Ajax Get Validation from function, then pass the response to another ajax?

Question

I have a ajax function that validate a textbox on my page, then I need to do something with that value (search in database and display the results on textbox). and then, I need the validation function for another function different. so..

        function validarRut(textBox) {
        var resultado;
        $.ajax({
            type: "POST",
            url: "AgendarInduccion.aspx/validarRut",
            data: "{rut:" + JSON.stringify(textBox) + "}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: false,
            success: function(response){
                alert("valido");
            },
            failure: function (response) {
                alert("ERROR");
            }
        });

    }

that is the validate function (works!): and the function to search in database:

 function buscarEmpresa(textBox) {
        var res;
        res = validarRut(textBox.value); // I need the result, to works with this function.!


        alert("VALOR" + res);
        if (res) {
            var resultado;
            $.ajax({
                type: "POST",
                url: "/AgendarInduccion.aspx/buscarEmpresa",
                data: "{RutEmpresa:" + JSON.stringify(textBox.value) + "}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                async: false,
                success: function (response) {
                    resultado = response.d;
                    var nombre = resultado[0];
                    var razonSocial = resultado[1];
                    var direccion = resultado[2];
                    if (nombre == "nulo") {
                        alert("El Rut de la Empresa No se ha Encontrado en Nuestra Base de Datos, favor de ingresar!");
                        // crear empresa!
                        // la institucion no existe; se debe crear una!
                        //btGuardar.Visible = true;
                        //btCancelar.Visible = true;

                        //txtRutEmpresa.Enabled = false;
                        //txtNombreEmpresa.Enabled = true;
                        //txtRazonSocial.Enabled = true;
                        //txtDireccion.Enabled = true;
                        document.getElementById('<%= txtRutEmpresa.ClientID %>').disabled = true;
                        document.getElementById('<%= txtNombreEmpresa.ClientID %>').disabled = false;
                        document.getElementById('<%= txtRazonSocial.ClientID %>').disabled = false;
                        document.getElementById('<%= txtDireccion.ClientID %>').disabled = false;

                        $('#<%= txtRazonSocial.ClientID%>').val(razonSocial); //razon social desde SII

                        document.getElementById('<%=btGuardar.ClientID %>').style.display = 'inline';
                        document.getElementById('<%=btCancelar.ClientID %>').style.display = 'inline';
                        document.getElementById('<%=btActualizar.ClientID %>').style.display = 'none';




                    } else {
                        $('#<%= txtNombreEmpresa.ClientID%>').val(nombre);
                        $('#<%= txtRazonSocial.ClientID%>').val(razonSocial);
                        $('#<%= txtDireccion.ClientID%>').val(direccion);
                    }
                },
                failure: function () {
                    alert('No Realizado.');
                }

            });
        }
    }

And I have a Third function that use "function validarRut(textBox)"; so I dont want to put the search function in the success, because I need to re-use the function. Any helps? PD: async: false is not a option for me.

Answer 1

Here is my solution!, thanks a lot

    function buscarEmpresaPromise(textBox) {
        var res;
        validarRutPromise(textBox.value).then(function (res) {
            if (res.d) {
                alert(">hola");
                alert("Rut validado CORRECTAMENTE");
            } else {
                alert("Rut invalido, vuelva a ingresar porfavor: " + textBox.value);

            }
        })
        }

and the other code, that is validating True or False:

    function validarRutPromise(textBox) {
        var promise = new Promise(function (resolve, reject) {
            $.ajax({
                type: "Post",
                url: "AgendarInduccion.aspx/validarRut",
                data: "{rut:" + JSON.stringify(textBox) + "}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                complete: function (response) {
                    resolve(response);
                },
                fail: function (response) {
                    reject(response);
                }
            });
        })
        return promise;
    }

Answer 2

If I get your roblem correctly, Promises will solve your problem.

basically, your method has to return a Promise OBject. With those, you can call then(), which gets executed as soon as the Promise is resolved (success) or rejected(error)

so basically your code has to work like that:

 function validarRut(value) {
  return new Promise(resolve, reject){
    $.ajax({
      type: "get",
      url: "/",
      success: function (response) {
        resolve(response); // when this is called, every then() function gets executed
      },
      failure: function (response) {
        reject(response); // when this is called, every catch() function gets executed
      }
  });
  }

}

function buscarEmpresa(textBox) {
  var res;
  validarRut(textBox.value).then(function (res) {
    // res is whatever you passed the resolve function
    if (res) {
      textbox.text(res.toString());
      // do whatever you want with the result
    }
  })
  .catch(error){
    // error is whatever you passed the reject function
  }
}

$(document).ready(() => {
  buscarEmpresa($('#result'));
})

watch it in action: https://jsfiddle.net/yygggbsa/

Promises are the way to go for such async calls. But remember that they are unavailable in IE11:

https://caniuse.com/#feat=promises

so if you need support for older browsers like IE11, you will need to add an external library.

Further Reading:

use Promises in IE11: How to make promises work in IE11

Promises at MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise