@Pikoh si es, muchas gracias :)

Buenas.. Alguien se sepa de JQuery ?

@JuanPerez casi todos por la sala

¿Cuál es el escenario?

@fredyfx feliz cumpleaños!

que la buena vida siempre te acompañe !

Ese es el resultado final.

Tengo este script

$('#bt_add').on('click',function()
	{
       	$.ajax({
	        type: 'POST',
	        url: '<?php echo base_url(); ?>herramienta/buscar',
	        success: function(data)
	        {
	        	console.log(data);
	        },
	        error:function(err)
	        {
	          alert("error"+JSON.stringify(err));
	        }
	    });
 	});

Ya tengo la data tengo la consulta. Pero ahora no encuentro como poder hacer lo del diseño que se vea como la imagen que adjunte.

Ya tengo el diseño (html) pero de poder recorrer todos los item de la respuesta.

es un modal

<div class="modal fade" id="modal-agregar" tabindex="-1" role="dialog" aria-labelledby="modal-agregar" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <form action="" method="post">
                <div class="modal-header">
                    <h5 class="modal-title">Listado herramientas</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>

Este es el modal que contiene el diseño.

@byte96 gracias hermano :D

ajam, y cual es tu duda? @JuanPerez

@byte96 ¡Salud por eso!

@farsSharp No encuentro como poder hacer la parte operativa pasar los datos de la respuesta al modal.

Y que conserve el diseño.

@JuanPerez a ver, creo que tu rollo viene con el css, colocar bien ese mini modal

solo es una propiedad donde se muestra y se oculta

regreso, voy al almuerzo :D

@fredyfx El diseño del modal esta bien. Donde tengo el problema es poder pasar los registros que me trae el ajax.

@JuanPerez tienes que generar la lista dinamicamente

es igual que todos,

@farsSharp Si eso es lo que no encuentro como poder hacerlo.

por ser modal no cambia la carga de datos

mira

el listado que genera

ese html no lo puedes poner

porque? depende de cuantos resultados tengas

tienes que poner un div contendeor de la lista

el resto del html inyectarlo

@farsSharp Son muchos registros

si tu data te4 da 3 registros, la lista de debe de ser de esos 3 registros

@JuanPerez se tiene que adaptar

una lista que se mueva sobre un scroll

o que tenga paginacion

Si eso es lo que quiero

te recomiendo la del scroll, le va mejor al diseño que tienes

<li class="list-group-item px-0">
	<div class="row align-items-center">
	 	<div class="col-auto">
			<!-- Avatar -->
		 	<a href="#" class="avatar rounded-circle">
				<img alt="Image placeholder" src="<?php echo base_url(); ?>assets/img/theme/team-1.jpg">
			</a>
		</div>
		<div class="col ml--2">
	 		<h4 class="mb-0">
				<a href="#!">John Michael</a>
			</h4>
		</div>
		<div class="col-auto">
 			<button type="button" class="btn btn-sm btn-primary">Add</button>
		</div>
	</div>
</li>

Entonces esta iteración debería ir dentro del succes del ajax con sus respectivas variables ?

@JuanPerez entonces tu pregunta en realidad es quieres generar un div scrolleable

@farsSharp Bueno voy por parte, porque primero no tengo los datos sobre el modal.

@JuanPerez no te lo recomiendo, será un codigo muy dificil de dar mantenimiento, separa todo por funciones individuales

@farsSharp Viste mi script js ?

@JuanPerez termina tu consulta, para que veas que elementos trabajaras en la lista

@JuanPerez ajam

@farsSharp Acá en el success:

success: function(data)
{
   console.log(data);
}

@LucasDamian Pues ya puestos hazlo funcional puro, sin comprensiones de listas. Solo map(), filter() y lambdas.

list(filter(lambda elemento: elemento!=0, map(lambda x: x if not x%2 else 0, range(1,11))))

@farsSharp No debería hacer la iteración ?

@JuanPerez si, en ese punto debes de inyectar tu lista

@farsSharp Pero como haría para que se conserve este diseño:

<li class="list-group-item px-0">
	<div class="row align-items-center">
	 	<div class="col-auto">
			<!-- Avatar -->
		 	<a href="#" class="avatar rounded-circle">
				<img alt="Image placeholder" src="<?php echo base_url(); ?>assets/img/theme/team-1.jpg">
			</a>
		</div>
		<div class="col ml--2">
	 		<h4 class="mb-0">
				<a href="#!">John Michael</a>
			</h4>
		</div>
		<div class="col-auto">
 			<button type="button" class="btn btn-sm btn-primary">Add</button>
		</div>
	</div>
</li>

@JuanPerez con js/jquery. lo generaras en tiempo de ejecucion

@farsSharp Algo asi:

$( "#html" ).html( "<li class="list-group-item px-0"><div class="row align-items-center"></div></li>");

@farsSharp Donde voy colocando toda la estructura html del diseño y pasarle las variables que vienen de la respuesta ?

si

junto con ella lo que mostraras

nombre, status, avatar, etc

ya te hace sentido lo que haras?

@farsSharp Entiendo. Entonces al momento de añadir uno de los registros como podría hacer ?

@farsSharp Si ya entiendo un poco lo que deseo hacer, pero tengo un par de dudas. ¿Como hacer para cuando añaden producto? ¿Como hacer lo del scroll ya que son muchos productos?

@JuanPerez para lo del scroll, a tu div contenedor le vas a definir el tamaño para que muestre solo esa area y le vas a definir el tipo de scroll que vas a utilizar, o sea puro css

@farsSharp Si por ejemplo cuando le den click en "Add" como podría capturarlo

@JuanPerez vas a definir una funcion click que escuche a los botones de add

ese add como son por registro no te va funcionar por ID, definelo con clase

y el this sera el evento clickeado

o tu boton vaya

@farsSharp Lo voy a intentar.

@farsSharp En esta parte tendría que hacer un foreach

success: function(data)
{
	$('#modal-agregar').modal('show');
	$("#html").html("<li class='list-group-item px-0'><div class='row align-items-center'><div class='col-auto'><a href='#' class='avatar rounded-circle'><img alt='' src='<?php echo base_url(); ?>assets/img/theme/team-1.jpg'></a></div></div></li>");
},

Bueno, creo que me merezco un descanso, hice 5 scrapers en 3 días, en realidad en 15min se cumplen 3 días

y ayer metí 2 respuestas aceptadas:p

@JuanPerez correcto. abre el modal a lo ultimo, ya que hayas inyectado la informacion

@farsSharp

var datos = $.parseJSON(data);
$.each(datos, function(i)
{
	$("#html").html("<li class='list-group-item px-0'><div class='row align-items-center'><div class='col-auto'><a href='#' class='avatar rounded-circle'><img alt='' src='<?php echo base_url(); ?>assets/img/theme/team-1.jpg'></a></div></div></li>");
});

$('#modal-agregar').modal('show');

andale, esa es la idea

cuando resuelvas tu consulta podras integrar los objetos en el each

@farsSharp No me esta funcionando bien lo del foreach solo me imprime uno solo.

@JuanPerez data es tu arreglo de datos?

o esta en una propiedad de data?

data.arr?

$('#bt_add').on('click',function()
{
	$.ajax({
		type: 'POST',
		url: '<?php echo base_url(); ?>herramienta/buscar',
		success: function(data)
		{
			var datos = $.parseJSON(data);
			$.each(datos, function(i)
			{
				console.log(datos[i]);
			});
		},
		error:function(err)
		{
			alert("error"+JSON.stringify(err));
		}
	});
});

@JuanPerez analiza tu codigo, tu puedes debuggear

para que veas que estructuras estas manejando

@farsSharp Así tengo la respuesta.

@JuanPerez entonces si es iterable

@farsSharp Así es.

@farsSharp Pero no me esta funcionando el foreach

@JuanPerez ¿Has intentado algo? o ¿Solo te quedaste trabado?