0

Tengo esta primera consulta de ajax, funciona bien.

$.ajax({
    url: 'procesos/get.php',
    type: 'POST',
    data: {userid:userid, type:2},
    dataType: 'json',
    success: function(response){

        var len = response.length;
        $("#userDetail").empty();

        if(len > 0){

            var id = response[0]['id'];

            $("#userDetail_id").append("ID user : " + id + "<br/>");
          
            

Lo que quisiera es tomar la respuesta para var id = response[0]['id'] y usarla en un div y a la vez, usarla en una nueva consulta AJAX

mi html donde vacío los datos obtenidos de la primera consulta. Hasta aquí funciona todo bien.

<div id="userDetail_id""></div>

y por otro lado, el AJAX donde quiero insertar el valor obtenido del AJAX anterior

$(document).on("click", "#btn", function(){

$.ajax({
              

  type: "POST",
                url: "procesos/set.php",
                data: {
                  id_in:$("#id_in").val(),    
                },
                  
                  success: function(data){
                    $("#resultado").html("<div class='alert alert-success' role='alert'>Exito.</div> ");
                    },
                    error: function (request, status, error) {
                    $("#resultado").html("<div class='alert alert-danger' role='alert'>Error al enviar los datos.</div> ");

                }
                })
    });

Aquí el problema. En el segunda AJAX no me funciona el tomar el valor ID del primer AJAX.

PS: La consulta y conexión con sql funciona bien. Ya he probado colocándole al div un name="id_in" y una class="id_in".

Agradezco cualquier aporte

Lilibeth
  • 532
  • 2
  • 16
  • 1
    Puedes hacerlo de dos modos: 1. **Declaras** la variable **fuera del bloque** de la petición Ajax: `var id;` y dentro del bloque de Ajax sólo le **asignas el valor**: `id = response[0]['id'];` , así, la variable estará disponible en el ámbito de tu otra llamada. 2. Si la segunda petición es llamada desde la primera, puedes ponerla en una función y pasar el valor de `id` en parámetro. Dado que las llamadas Ajax son **asíncronas** la forma correcta sería esta, porque es lo único que te garantizará con certitud que `id` tendrá un valor (nada te asegura que la 1ª llamada terminará siempre primero) – A. Cedano Nov 30 '21 at 15:31
  • Muchisimas gracias por el aporte @A.Cedano. Efectivamente pude resolver el problema de esta manera. Esto ha ampliado mi panorama sobre la resolución de problemas con jquery. – Lilibeth Nov 30 '21 at 22:34
  • 1
    Me alegro de que lo hayas resuelto. Cuando trabajes con Ajax, con Fetch o con cualquier otra herramienta que haga peticiones a lugares remotos, ten en cuenta siempre que dichas peticiones son **asíncronas**. Significa que hay un tiempo (el cual nunca podrás saber) entre que la petición es enviada y se recibe una respuesta. Significa que si lanzas dos peticiones y la segunda depende de una respuesta obtenida en la primera, debes llamar a la segunda desde el `success` de la primera. ¿Por qué? Porque la segunda puede ejecutarse antes que la primera, y en ese caso, no tendrás ... – A. Cedano Nov 30 '21 at 22:40
  • 1
    ... disponible el dato que debió obtenerse en la primera petición. Por tanto, no debes programar nunca peticiones remotas (como Ajax) pensando en la programación funcional, en la que una función se ejecuta después de la otra. En el mundo de Ajax no es así. Debes llamar a la segunda desde dentro de la primera, o pasar a algo más avanzado como el uso de *Promesas*, pero ese es ya otro tema. Por si te interesa profundizar, [en esta pregunta](https://es.stackoverflow.com/q/64265/29967) hay varias respuestas que pueden serte de ayuda para entender cómo funciona Ajax, y Javascript en general. – A. Cedano Nov 30 '21 at 22:42
  • En cuenta. Investigaré más sobre esto y las promesas. Gracias! @A.Cedano – Lilibeth Nov 30 '21 at 22:43

1 Answers1

0

Dejo el codigo de como resolví este problema por si le sirve a alguien

 $(document).ready(function () {
        var id;  //aca declaro la variable fuera de la consulta AJAX

function setText(element){

$.ajax({
    url: 'procesos/get.php',
    type: 'POST',
    data: {userid:userid, type:2},
    dataType: 'json',
    success: function(response){

        var len = response.length;
        $("#userDetail").empty();

        if(len > 0){

             id = response[0]['id']; //modifico

            $("#userDetail_id").append("ID user : " + id + "<br/>");
          
            

y el segundo ajax

$(document).on("click", "#btn", function(){

$.ajax({
              

  type: "POST",
                url: "procesos/set.php",
                data: {
                  id_in: id,    //llamo a la variable ya declarada
                },
                  
                  success: function(data){
                    $("#resultado").html("<div class='alert alert-success' role='alert'>Exito.</div> ");
                    },
                    error: function (request, status, error) {
                    $("#resultado").html("<div class='alert alert-danger' role='alert'>Error al enviar los datos.</div> ");

                }
                })
    });
Lilibeth
  • 532
  • 2
  • 16