AJAX - probemas con .addClass en ajax con función .each

Pos: 17

Val: 13

probemas con .addClass en ajax con función .each

Publicado por Nicolás (8 intervenciones) el 16/01/2017 19:51:06

Necesito hacer un recorrido que me permita crear tantas div class como elementos encontrados en una petición Ajax.
Utilizando la función .each, he intentado con esto:

success: function(data) {

$.each (data, function(i,val) {

$(".contenedor").addClass("n" + i);

});

pero recibo esto:
<div class="contenedor n0 n1 n2 n3"</div>

como puedo hacer para obtener esto:
<div class="contenedor n0"</div>
<div class="contenedor n1"</div>
<div class="contenedor n2"</div>
<div class="contenedor n3"</div>

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 1

Val: 90

probemas con .addClass en ajax con función .each

Publicado por xve (222 intervenciones) el 16/01/2017 22:27:07

Hola Nicolas, en vez de utilizar:

$(".contenedor").addClass("n" + i);

prueba a utilizar:

$("."+val).addClass("n" + i);

Coméntanos, ok?

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Pos: 17

Val: 13

probemas con .addClass en ajax con función .each

Publicado por Nicolás (8 intervenciones) el 17/01/2017 17:05:53

Lamentablemente no obtengo respuesta, y la consola marca este error Uncaught Error: Syntax error, unrecognized expression: .<img src="1/img0.jpg"

El código completo es:
pagina1.php

<!DOCTYPE HTML>

<html lang="">

    <head>

        <meta charset="UTF-8">

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

        <script>

            $(document).ready(function(){

            $('.gallery').click(function (event) {

                event.preventDefault();

                var data = this.dataset;

            $.ajax({

                url: "pagina2.php",

                data: data,

                type: "POST",

                dataType: "json",

                success: function(data) {

                    var imgs = data.map(function(img) {

                        return '<img src="'+img+'" >';

});

                    $.each (imgs, function(i,val) {

                        $("." + val).addClass("n" + i);

})

});

});

})

    </script>

    </head>

<body>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam felis mi, pellentesque at scelerisque eu, consectetur quis felis. Aliquam mollis</p>

        <a class="gallery" href="page2.php" data-var="1/">

            IMAGENES

        </a>

    <div class="contenedor"></div>

</body>

</html>

pagina2.php

<?php

header('Content-Type: application/json');

$variable = $_POST['var'];

$img_dir=$variable;

echo json_encode (glob($img_dir . '*.jpg'));

?>

Valora esta respuesta

Comentar

Pos: 1

Val: 90

probemas con .addClass en ajax con función .each

Publicado por xve (222 intervenciones) el 17/01/2017 19:23:50

Hola Nicolás, no entiendo porque hay un return .... esa es la respuesta del ajax, y el return, no lo devolverá a ningún lugar...

Porque no pruebas a ponerlo así:

$(".contenedor").html('<img src="'+img+'" >');

Coméntanos, ok?

Valora esta respuesta

Comentar

Pos: 17

Val: 13

probemas con .addClass en ajax con función .each

Publicado por Nicolás (8 intervenciones) el 17/01/2017 20:37:45

xve necesito tener el código de esta forma para obtener cada archivo cada vez para un efecto slideshow. Es decir si en el directorio hay cuatro imágenes, la parte HTML quedaría así:

<div class="contenedor n0"></div>

    <div class="contenedor n1"></div>

    <div class="contenedor n2"></div>

    <div class="contenedor n3"></div>

.

y la petición Ajax sería

success: function(data) {

                    var imgs = data.map(function(img) {

                        return '<img src="'+img+'" >';

});

                    $.each (imgs, function(i,val) {

                        $('.contenedor.n' + i).html(val);

})

después con un archivo css y llamando un archivo JavaScript con

$.getScript("archivo.js");

podría mostrar cada imagen por vez

Valora esta respuesta

Comentar

Pos: 1

Val: 90

probemas con .addClass en ajax con función .each

Publicado por xve (222 intervenciones) el 18/01/2017 08:10:25

Hola Nicolás, te entiendo perfectamente, pero el return no te funcionara!!!
es un evento que se ejecuta desde js cuando se hace click sobre la clase "gallery"... donde quieres que devuelva la cadena??

Creo que lo tienes mal planteado, o no se ver exactamente lo que quieres hacer... pero así como lo tienes, no te funcionara!!!

Exactamente que quieres que haga el AJAX? cambiar una imagen?

Valora esta respuesta

Comentar

Pos: 17

Val: 13

probemas con .addClass en ajax con función .each

Publicado por Nicolás (8 intervenciones) el 18/01/2017 13:18:43

Lo que pasa es que tengo una página del documento (pagina2.php) que abre una carpeta de archivos con la función glob. Lo que quiero que haga Ajax es que al hacer la petición a esta página me entregue los datos uno por uno, no como una cadena. Por ejemplo, si en mi carpeta tengo tres archivos (imagen1.jpg, imagen2.jpg, imagen3,jpg) al hacer la petición a Ajax necesito recibir algo como esto: data[0] que en realidad sería imagen1.jpg. Y no todos los archivos como una cadena (imagen1.jpgimagen2.jpgimagen3.jpg).

Valora esta respuesta

Comentar

Pos: 1

Val: 90

probemas con .addClass en ajax con función .each

Publicado por xve (222 intervenciones) el 18/01/2017 16:18:16

Para ello, lo suyo es trabajar con JSON... de esta manera puedes enviar tantos valores como quieras...

data.img1, data.img2, data.loqueQuieras

Valora esta respuesta

Comentar

Enviar imagen por ajax con Jquery

por qué no veo contenido en mi ventana modal?