0

estoy haciendo un pequeño proyecto para clase y me he atascado en algo que por lo visto estoy haciendo mal y no soy capaz de arreglar. El rollo es, que hago una petición Ajax para recuperar todos los usuarios de la base de datos, lo típico que te saque la lista con la foto, el nombre y un botón para seguirlo si quieres (tipo red social). Hasta ahí todo bien: me crea la lista perfectamente, pero luego a la hora de pulsar el botón con el value con su correo lo tengo que volver a enviar a otra tabla para añadirlo como amigo y es ahí donde me encuentro el problema. Solo me deja acceder a ese botón con un evento click desde dentro de la función del success, si lo llamo desde fuera no me lo pilla y si hago la otra petición Ajax desde dentro de la misma función del success de la otra petición anterior, la variable que quiero enviar no llega al archivo php mediante el post. No sé qué estaré haciendo mal...

Le estaría enormemente agradecido al que me echara un cable con este problemilla.

El código js es este:

        $.ajax({
        dataType:"JSON",
        url:"buscarUsuarios.php",                          
        success:
        function(data){
            for(var i=0;i<data.length;i++) {
                $("#usuarios").append("<div class='row d-flex align-items-center border-bottom mb-2 pb-2'><img class='col-3' src='usuarios/"+data[i].email+"/fotoUsuario/"+data[i].foto+"' width='100' height='100'><div class='col-3'>"+data[i].usuario+"</div><div class='col-6'><button class='boton' value='"+data[i].email+"'>Seguir a este usuario</button></div></div>");   
            }

            $(".boton").click(function(){
                var email2=$(this).val();
                $.ajax({
                    url:"seguirUsuario.php",
                    type: "POST",
                    data: {
                    "emailAmigo": email2
                    },
                    success:
                    function(){
                        alert("Ahora sigues a " + email2);
                    }
                });
            });
        }  
    });

1 respuesta 1

1

Porque no sacas el click de los botones en una funcion aparte.

Te dejo un ejemplo:

$.ajax({
    dataType:"JSON",
    url:"buscarUsuarios.php",                          
    success: function(data){
        for(var i=0;i<data.length;i++) {
            $("#usuarios").append("<div class='row d-flex align-items-center border-bottom mb-2 pb-2'><img class='col-3' src='usuarios/"+data[i].email+"/fotoUsuario/"+data[i].foto+"' width='100' height='100'><div class='col-3'>"+data[i].usuario+"</div><div class='col-6'><button class='boton' value='"+data[i].email+"'>Seguir a este usuario</button></div></div>");   
        }

        click_boton();
    }  
});

function click_boton() {
    $(".boton").click(function(){
        var email2=$(this).val();
        $.ajax({
            url:"seguirUsuario.php",
            type: "POST",
            data: {
            "emailAmigo": email2
            },
            success: function(){
                alert("Ahora sigues a " + email2);
            }
        });
    });
}

Si te fijas e sacado el click con la consulta ajax en una funcion aparte llamada click_boton.


Otra forma es utilizando el on de jquery. La diferencia mas notable del on es que puedes trabajar con nuevos elementos despues de haber cargado el DOM.

Te dejo un ejemplo:

$.ajax({
    dataType:"JSON",
    url:"buscarUsuarios.php",                          
    success: function(data){
        for(var i=0;i<data.length;i++) {
            $("#usuarios").append("<div class='row d-flex align-items-center border-bottom mb-2 pb-2'><img class='col-3' src='usuarios/"+data[i].email+"/fotoUsuario/"+data[i].foto+"' width='100' height='100'><div class='col-3'>"+data[i].usuario+"</div><div class='col-6'><button class='boton' value='"+data[i].email+"'>Seguir a este usuario</button></div></div>");   
        }
    }  
});


$(document).on("click", ".boton", function () {
    var email2=$(this).val();
    $.ajax({
        url:"seguirUsuario.php",
        type: "POST",
        data: {
        "emailAmigo": email2
        },
        success: function(){
            alert("Ahora sigues a " + email2);
        }
    });
});

Segun lo que comentas, puedo deducir que mandabas a suscribir los botones al evento click sin sin antes ser creados en el DOM, por ese motivo tuviste que colocar el click de los botones dentro del success.

5
  • Muchas gracias Orlando!!. Tengo un par de dudas sobre esto:
    – Jous
    Commented el 24 mar. 2019 a las 12:13
  • Perdón, le dí un enter para hacer un punto y aparte y me envió el comentario sin terminar. Lo pongo entero: En realidad, tengo una duda sobre esto y es por qué no funciona como lo tenía al principio. Entiendo que la parte del "success" es como si fuera una función solo de retorno o algo así, y que no puede volver a enviar nada? No lo acabo de entender muy bien... Muchas gracias de nuevo y hasta la vista. :)
    – Jous
    Commented el 24 mar. 2019 a las 12:24
  • La verdad tal cual como colocaste tu codigo, no le veo ningun problema, es mas, deveria de funcionar. Pero como comentaste que tenias problemas, pues te sugeri que lo abstrayeras en un metodo aparte. Por mi parte realize un pequeño proyecto para probar tu codigo y me funciono bien y como no tenia forma de recrear tu problema entonces te propuse que lo colocaras en un metodo aparte.
    – dlr
    Commented el 25 mar. 2019 a las 14:52
  • Tambien debes de tener presente que no puede suscribir un evento a un tag del html que todavia no existe (creo que este era tu problema), por eso debias de agregar el click del boton dentro del success. Bueno esto no es del todo cierto, porque con la funcion on de jquery si lo puedes hacer. Te dejare un ejemplo en la respuesta.
    – dlr
    Commented el 25 mar. 2019 a las 14:56
  • Pues sí que es verdad. Ahora me funciona de las dos maneras: como lo tenía al principio y como tú me dijiste. Debía tener algún error de sintáxis o algo por ahí que no vi y por eso no andaba... Muchas gracias de nuevo por tu tiempo y hasta la vista Orlando!! :)
    – Jous
    Commented el 27 mar. 2019 a las 20:39

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.