0

tengo una funcion de ajax que obtiene los elementos de un abase de datos en django. puedo ver que la funcion trae los elementos en el inspector sinenbargo, no puedo crear el elemento en el div que necesito.

el resulatado de la funcion de ajax en el inspector:

[{nombre: "gato", imagen: "/media/1swGj9_7oxrYGA.jpg", duracion: "2000"},…]
0 : {nombre: "gato", imagen: "/media/1swGj9_7oxrYGA.jpg", duracion: "2000"}
1 : {nombre: "lay", imagen: "/media/layout_53hUG5g.png", duracion: "2000"}
2 : {nombre: "lol", imagen: "/media/IMG_194935_jkGCdbp.jpg", duracion: "2000"}

    duracion :"2000"
    imagen : "/media/IMG_194935_jkGCdbp.jpg"
    nombre : "lol"

mi HTML

<div class="wrapper">
    <ul class="bxslider" id="datos">
    <!--     {% for img in imagenes %}
        <li id="images">
            <img src="{{ img.imagen.url }}" data-id="{{ img.id }}" >
        </li>
    {% endfor %} -->
    </ul>
</div>

mi JS:

<script>
    $('.bxslider').bxSlider({
      onSliderLoad: function(){
        // do funky JS stuff here
        // alert('Slider has finished loading. Click OK to continue!');
        console.log('<--------------------- se dispara el evento? ');
        $.ajax({
            url: '/image/busqueda',
            type: 'get',
            datatype: 'json',
            success : function(data){
                var html = ""
                for(var i = 0 ; i < data.lenght; i ++){
                    html += '<li><img src="'+ data[i].fields.imagen + '" data-id="' + data[i].fields.id + '"/></li>';
                }
                $('#datos').html(html);
            }
        });

      }
3
  • Cuando ejecutas el programa, ¿qué código HTML te genera el JS? Yo probaría a ejecutar el código cuando se cargue la página en vez del slider, recuerdo que eso me dió algún problema.
    – mbayon
    Commented el 20 sept. 2017 a las 20:06
  • @mbayon al momento de eejcutarse tal como esta no me genera nada el JS. me deja en blanco el Ul que quiero popular. y al quererlo correr cuando la pagina carga me sale qu tengo perdido un parentesis ). honestamente apesas estoy aprendiendo JS pero revise mi funcion y creo tener todo en su lugar Commented el 20 sept. 2017 a las 20:44
  • la funcion que implemente es: ` codigo` <script> $(fucntion(){ console.log('<----------------------- la pagina ah cargado'); $.ajax({ url: '/image/busqueda', type: 'get', datatype: 'json', success : function(data){ var html = "" for(var i = 0 ; i < data.lenght; i ++){ html += '<li><img src="'+ data[i].fields.imagen + '" data-id="' + data[i].fields.id + '"/></li>'; } $('#datos').html(html); }) });` Commented el 20 sept. 2017 a las 20:45

1 respuesta 1

0

Tu código parece funcionar, solo veo un error al escribir la palabra length, pusiste lenght lo cual da undefined y tu ciclo for nunca itera.

Te pongo aqui un código un poco mas facil de leer utilizando la funcion 'append' de jQuery la cual inserta dentro del elemento #datos

var data = [
  {id: "gato", imagen: "/media/1swGj9_7oxrYGA.jpg", duracion: "2000"},
  {id: "lay", imagen: "/media/layout_53hUG5g.png", duracion: "2000"},
  {id: "lol", imagen: "/media/IMG_194935_jkGCdbp.jpg", duracion: "2000"}
]

function crearHTML() {
  for (var i = 0; i < data.length; i++) {
    $('#datos').append('<li><img src="' + data[i].imagen + '" data-id="' + data[i].id + '"/>'+ data[i].id + '</li>')
  }

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

<button onClick="crearHTML()">Crear HTML</button>

<div class="wrapper">
    <ul class="bxslider" id="datos">
    <!--     {% for img in imagenes %}
        <li>
            <img src="{{ img.imagen.url }}" data-id="{{ img.id }}" >
        </li>
    {% endfor %} -->
    </ul>
</div>

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.