En mi html
tengo un div
, dentro tengo un h3
y un img
, lo que yo quiero es hacer un append
con datos precargados desde mi js
, en el cual utilizo ajax
, que me trae de sql
los datos que quiero precargar.
Mi problema es al hacer el append
, que me muestra los datos dinámicos pero me parece que tengo un problema con las comillas, y tengo que acortar mi url
de imagen, me parece... Mis div
tienen estilo en mi css
, pero no se si al meterlo al append
se mantienen!
Paso mi código tal cual como está:
function ObtengoDatosYRutaFoto(NombreSeccion, NombreCategoria, NombreEstilo, NombreMarca, NumTalle) {
//este es el metodo donde obtengo los datos
NombreSeccion = $.trim(NombreSeccion);
NombreCategoria = $.trim(NombreCategoria);
NombreEstilo = $.trim(NombreEstilo);
NombreMarca = $.trim(NombreMarca);
NumTalle = $.trim(NumTalle);
var dir = "ObtengoDatosConFoto";
$.ajax({
type: 'get',
url: api + dir + "?NombreSeccion=" + NombreSeccion + "&NombreCategoria=" + NombreCategoria + "&NombreEstilo=" + NombreEstilo + "&NombreMarca=" + NombreMarca + "&NumTalle=" + NumTalle,
success: function(datos) {
var d = datos;
for (var i = 0; i < d.length; i++) {
$("#contenedor_busqueda").append('<div class="divConImg">' +
+'<h3 class="infoImg">' + d[i].Fabricante + "/" + d[i].Articulo + "/" + d[i].Descripcion + "/" + d[i].Color + '</h3>' +
+'<img src=' + d[i].Ruta + ' border="1" width="200px" height="200px">' +
+'</div>')
//ACA ESTA MI PROBLEMA
}
},
error: function(xhr, textStatus, errorThrown) {
console.log(xhr);
console.log(textStatus);
console.log(errorThrown);
}
});
}
#contenedor_busqueda {
width: 100%;
padding: 100px;
background-color: #ffffff;
letter-spacing: -1em;
}
.divConImg {
width: 39.5%;
display: inline-block;
vertical-align: center;
letter-spacing: normal;
}
.infoImg {
text-align: center;
width: 83.5%;
border-radius: 0px 0px 0px 0px;
-moz-border-radius: 0px 0px 0px 0px;
-webkit-border-radius: 0px 0px 0px 0px;
border: 1px solid;
}
<div id="contenedor_busqueda">
<!--div class="divConImg">
<h3 class="infoImg"></h3>
<img src="" border="1" width="200px" height="200px">
</div-->
</div>
Aca tengo comentado lo de adentro porque lo voy a poner en mi append
+'<img src="' + d[i].Ruta + '" border="1" width="200px" height="200px">' +