0

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
  

1
  • Te faltan las comillas en esta linea +'<img src="' + d[i].Ruta + '" border="1" width="200px" height="200px">' +
    – alanfcm
    Commented el 6 ago. 2019 a las 20:06

1 respuesta 1

1

Te recomiendo uses Template strings, así evitas la confusión con el Entrecomillado, intentalo de esta forma.

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

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.