Hola tengo un Ajax que me devuelve una información y la utilizo para construir unos desplegables donde tienen que rellenar información.
Pero tengo dos problemas, el primero que añado un botón abajo cuando cargo las filas que para empezar le pongo un alert()
pero no funciona, y la parte de añadir foto tampoco a pesar de que tienen una id dinamica.
Se aceptan optimización de código, no controlo mucho JavaScript y puede que haya mucho código residual.
Gracias
$.ajax({
headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
type: "POST",
url: url,
data: {'tipos': JSON.stringify(tipos),
'permutas': JSON.stringify(permutas),
'Producto': producto,
'Descripcion': descripcion,
'ID': idProducto,
'Categoria': categoria,
'Proveedor': proveedor,
'Referencia': referencia,
'Subcategoria': subcategoria,
'Foto': foto,
'Tipo': tipo,
'Estado': estado,
'precio': precio,
'oferta': oferta },
success: function(data){
if( !data.success ){
toastr.success( "Combinaciones completadas", "Perfecto!");
$("#respuesta").val(data.producto.id);/*Esto es para traer el ID del producto, para poder modificarlo*/
var boton = `<a class="btn btnGuardar guardaVariaciones" id="guardaCombinaciones" data-id="">Guardar atributos</a>`;
for (var i = 0; i < data.permutaciones.length; i++) {
var id = data.permutaciones[i].id;
var productoid = data.permutaciones[i].product_id;
var combinacion = data.permutaciones[i].combination;
var precio = data.permutaciones[i].precio;
var oferta = data.permutaciones[i].oferta;
var a = $(`
<div id="accordion">
<div class="cardCollapse">
<button class="btn btn-link collapsed btnCollapse" data-toggle="collapse" data-target="#collapse${id}" aria-expanded="true" aria-controls="collapse${id}">
<div class="card-header" id="heading${id}">
<h5 class="mb-0">
Producto <span style="color: #427ff2;top: 0px;font-weight: 700!important;">#${productoid}</span>
</h5>
<span class="pull-right spanCollapse">${combinacion}</span>
</div>
</button>
<div id="collapse${id}" class="collapse fondoCollapse" aria-labelledby="heading${id}" data-parent="#accordion">
<div class="card-body">
<div class="row rowDotted">
<div class="col-6">
<div class="eFoto">
<span style="position: relative">
<img id="holder${id}" src="{{ asset('images/no-foto.jpg') }}" alt="" class="imgEditPerf334">
<a data-input="thumbnail${id}" data-preview="holder${id}" class="lfm">
<i class="fas fa-pen editaFotoProducto334"></i>
</a>
</span>
<input id="thumbnail${id}" class="form-control formNuevo" type="hidden" name="imagen" value="" required>
</div>
</div>
<div class="col-6">
<div class="form-group" style="position:relative;">
<label for="">Referencia</label>
<input type="text" class="form-control myinputs" name="refeJava" id="precio" value="" autocomplete="off" required>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="form-group" style="position:relative;">
<span class="simboloMedida556">€</span>
<label for="">Precio normal</label>
<input type="text" class="form-control myinputs" name="precio" id="precio" value="${precio}" autocomplete="off" required>
</div>
</div>
<div class="col-6">
<div class="form-group" style="position:relative;">
<span class="simboloMedida556">€</span>
<label for="">Precio ofertado</label>
<input type="text" class="form-control myinputs" name="oferta" id="oferta" value="${oferta}" autocomplete="off" required>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>`);
$("#permutas").append(a);
}
$("#permutas").append(boton);
console.log(data);
}
},
error: function(data){
toastr.success( "Revisa las combinaciones", "Algo salio mal!");
}
});
La parte que digo que no funciona de las fotos es:
<div class="eFoto">
<span style="position: relative">
<img id="holder${id}" src="{{ asset('images/no-foto.jpg') }}" alt="" class="imgEditPerf334">
<a data-input="thumbnail${id}" data-preview="holder${id}" class="lfm">
<i class="fas fa-pen editaFotoProducto334"></i>
</a>
</span>
<input id="thumbnail${id}" class="form-control formNuevo" type="hidden" name="imagen" value="" required>
</div>
Para la carga de fotos lo estoy haciendo con Laravel Filemanager, de hecho tengo un añadir en HTML plano y funciona correctamente. No se si al meterlo con append
no carga su libreria o algo.
var a = $( 'bloque html multilinea inmenso');
pues ese bloque está siendo presentado como un selector y de hecho no puede serlo. Bastaría hacer algo comovar a = 'el bloque inmenso';
y luego hacer el append. Observa que se elimina $( y ). Una nota adicional: ¿Que es toastr ? nunca he visto ese objeto y no lo encontré en la documentación de javascript.var a = 'el bloque inmenso';
y luego$("#permutas").append(a);
pero sigue sin funcionar el botón y lo de las fotos, puede ser porque lo pongo entre las comillas ` `