0

Recupero datos desde PHP y los almaceno en JSON para manipularlos desde jQuery. Al seleccionar un registro de una lista, el primer registro me visualiza los datos correctamente, pero al seleccionar otro registro ya no me visualiza la imagen (los demás datos en los otros input se ven correctamente).

Cabe destacar que uso el plugin Bootstrap File Input para manipular las imágenes.

Anexo el código que estoy usando:

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);
        }
    }); 
}

1 respuesta 1

1

Lo que te sucede es que la primera vez que llamas al plugin, inicializas el file input correctamente, pero la segunda vez que lo llamas en el mismo elemento, ya se encuentra inicializado y se ignorará dicha operación.

Observa los siguientes snippets:

Como verás, dentro del setInterval se inicializa el plugin cada un segundo, cada vez usando una imagen diferente como initialPreview. Pero en este primer snippet solo verás la primera imagen (en los siguientes intentos de inicializar el plugin, el mismo ya se encuentra inicializado):

var images = [
  "https://www.w3schools.com/howto/img_woods.jpg",
  "https://www.w3schools.com/howto/img_5terre.jpg",
  "https://www.w3schools.com/howto/img_lights.jpg"
];
var index = 0;

setInterval(function () {
  $("#myInput").fileinput({
    initialPreview: [images[index]],
    initialPreviewAsData: true
  });
  index++;
  if (index === images.length) { index = 0; }
}, 1000);
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.6/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.6/js/plugins/piexif.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.6/js/plugins/sortable.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.6/js/plugins/purify.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.6/js/fileinput.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.6/themes/fa/theme.js"></script>

<div class="file-loading">
    <input id="myInput" name="myInput" type="file" multiple>
</div>

Este segundo snippet realiza lo mismo, pero esta vez destruyendo el file input usando el método destroy y volviendo a inicializarlo en cada iteración:

var images = [
  "https://www.w3schools.com/howto/img_woods.jpg",
  "https://www.w3schools.com/howto/img_5terre.jpg",
  "https://www.w3schools.com/howto/img_lights.jpg"
];
var index = 0;

setInterval(function () {
  $("#myInput")
    .fileinput("destroy")
    .fileinput({
      initialPreview: [images[index]],
      initialPreviewAsData: true
    });
  index++;
  if (index === images.length) { index = 0; }
}, 1000);
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.6/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.6/js/plugins/piexif.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.6/js/plugins/sortable.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.6/js/plugins/purify.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.6/js/fileinput.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.6/themes/fa/theme.js"></script>

<div class="file-loading">
    <input id="myInput" name="myInput" type="file" multiple>
</div>

1
  • 1
    Agradezco tu observación, me ha servido bastante. el 12 nov. 2019 a las 23:44

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.