Tengo un problema al pegar algo de html en un div. Creo que sé lo que estoy haciendo mal, pero no puedo encontrar una solución a esto. Tengo un div vacío llamado "allbrands". Este div se llena con datos de una llamada POST ajax después de hacer clic en un botón. Hice un bucle que recorre los datos, pero reemplaza el html constantemente. Entonces, ¿cómo puedo pegar esta tabla html sin reemplazar cada vez el contenido?
Mi división:
<div id="allbrands"> </div>Mi Ajax:
<script type="text/javascript"> $( document ).ready(function() { $('[name="getbrands"]').click(function (e){ e.preventDefault(); $.ajax({ type: "GET", url: '/brands/all', success: function (data) { for(var i = 0; i < data.length; i++) { $('#allbrands').html('<h6>' + data[i] + '</h6><hr>'); } } }); }); }); </script>Cambia esta línea:
$('#allbrands').html('<h6>' + data[i] + '</h6><hr>');a
$('#allbrands').append('<h6>' + data[i] + '</h6><hr>');e intenta de nuevo.
Explicación: html() reemplaza el contenido anterior agregando uno nuevo, append() retiene el anterior y agrega uno nuevo también.
El problema está en tu bucle. Está anulando el valor de div en cada iteración. Debe agregar el valor en lugar de anularlo:
Prueba esto:
for(var i = 0; i < data.length; i++) { $('#allbrands').append('<h6>' + data[i] + '</h6><hr>'); }Siga el siguiente enlace para obtener más información.
También agregue el
$("#allbrands").append();