I retrieve data from PHP
and store it in JSON
to manipulate it from jQuery
. When selecting a record from a list, the first record displays the data correctly, but when selecting another record it no longer displays the image (the other data in the others input
is seen correctly).
Notably, I use the Bootstrap File Input plugin to manipulate the images.
Attached the code I'm using:
function editarSlide(idSlide) {
$.ajax({
url: "URL?op=getID",
type: 'POST',
data: {
idSlide: idSlide
},
cache: false,
dataType: 'json',
success: function (response) {
$("#imagenSlideActual").fileinput({
initialPreview: [
'../img/home/'+response.imagen_slide
],
});
$("#emarca").val(response.marca_slide);
$("#edescripcion").val(response.desc_slide);
$("#eliga").val(response.liga_slide);
}
});
}
What happens to you is that the first time you call the plugin, you initialize
file input
it correctly, but the second time you call it on the same element, it is already initialized and that operation will be ignored .Look at the following snippets :
As you will see, inside
setInterval
the plugin is initialized every second, each time using a different image asinitialPreview
. But in this first snippet you will only see the first image (in the following attempts to initialize the plugin, it is already initialized):This second snippet does the same thing, but this time destroying it
file input
using the destroy method and re-initializing it on each iteration: