Skip to main content
Mostrar un ejemplo de código
Origen Enlace
roldos
  • 101
  • 8

Cuando llamas al modal ya tienes todas las imágenes cargadas en él, y lo que debes hacer es usar AJAX.

Ejemplo:

creas el modal con un img y le das un ID Cuando selecciones la imagen a mostrar, la etiqueta tendrá una metadata con el id que corresponde a la imagen. con ese meta realizas la consulta ajax hacia el Backend y obtienes la ruta reletava y la retornas ya con ese resultado actualizas el modal

Actualización de respuesta con sugerencia

<!-- Le asignas la misma clase -->
<html>
@foreach(<!-- Obten los id de cada reporte IMG -->)
<li class="nombre_de_clase" id="{{_id}}"></li> 
@endforeach

<div class="modal fade" id="DetalleTicketView" tabindex="-1" role="dialog" style="z-index: 1050; display:none; width:100%" aria-hidden="true">
    <img src="" id="DetalleTicketViewImg" alt="">
</div>




<script>
  $(function () {
    $("body").on("click", ".nombre_de_clase", function (event) {
      event.preventDefault();
      var id =
        $(this).attr("id"); /* ID del elemento al que se le ha hecho "click" */

      $.ajax({
        type: "POST",
        url: "{{route('URL_DEL_BACKEND')}}",
        headers: {
          "X-CSRF-TOKEN": $("input[name=token]").val(), /*Donde tengas guardado el token CSRF*/
        },
        data: {
          _id: id,
        },
      }).done(function (url) {
        $("#DetalleTicketViewImg").attr("src", "{{url}}?" + d.getTime()); /*el final d.getTime es para que el navegador actualice la img*/
        $("#DetalleTicketView").modal("show");
      });
    });
  });
</script>
</html>

Adapta el Backend a tu solución

<!-- Backend -->

public function obtenerURL(Request $request){
    $_id =  $request->get('_id')
    /**@todo Buscas la url de la img por ese ID*/
    return response()->json({'url':url_obtenida});
}

Cuando llamas al modal ya tienes todas las imágenes cargadas en él, y lo que debes hacer es usar AJAX.

Ejemplo:

creas el modal con un img y le das un ID Cuando selecciones la imagen a mostrar, la etiqueta tendrá una metadata con el id que corresponde a la imagen. con ese meta realizas la consulta ajax hacia el Backend y obtienes la ruta reletava y la retornas ya con ese resultado actualizas el modal

Cuando llamas al modal ya tienes todas las imágenes cargadas en él, y lo que debes hacer es usar AJAX.

Ejemplo:

creas el modal con un img y le das un ID Cuando selecciones la imagen a mostrar, la etiqueta tendrá una metadata con el id que corresponde a la imagen. con ese meta realizas la consulta ajax hacia el Backend y obtienes la ruta reletava y la retornas ya con ese resultado actualizas el modal

Actualización de respuesta con sugerencia

<!-- Le asignas la misma clase -->
<html>
@foreach(<!-- Obten los id de cada reporte IMG -->)
<li class="nombre_de_clase" id="{{_id}}"></li> 
@endforeach

<div class="modal fade" id="DetalleTicketView" tabindex="-1" role="dialog" style="z-index: 1050; display:none; width:100%" aria-hidden="true">
    <img src="" id="DetalleTicketViewImg" alt="">
</div>




<script>
  $(function () {
    $("body").on("click", ".nombre_de_clase", function (event) {
      event.preventDefault();
      var id =
        $(this).attr("id"); /* ID del elemento al que se le ha hecho "click" */

      $.ajax({
        type: "POST",
        url: "{{route('URL_DEL_BACKEND')}}",
        headers: {
          "X-CSRF-TOKEN": $("input[name=token]").val(), /*Donde tengas guardado el token CSRF*/
        },
        data: {
          _id: id,
        },
      }).done(function (url) {
        $("#DetalleTicketViewImg").attr("src", "{{url}}?" + d.getTime()); /*el final d.getTime es para que el navegador actualice la img*/
        $("#DetalleTicketView").modal("show");
      });
    });
  });
</script>
</html>

Adapta el Backend a tu solución

<!-- Backend -->

public function obtenerURL(Request $request){
    $_id =  $request->get('_id')
    /**@todo Buscas la url de la img por ese ID*/
    return response()->json({'url':url_obtenida});
}
Origen Enlace
roldos
  • 101
  • 8

Cuando llamas al modal ya tienes todas las imágenes cargadas en él, y lo que debes hacer es usar AJAX.

Ejemplo:

creas el modal con un img y le das un ID Cuando selecciones la imagen a mostrar, la etiqueta tendrá una metadata con el id que corresponde a la imagen. con ese meta realizas la consulta ajax hacia el Backend y obtienes la ruta reletava y la retornas ya con ese resultado actualizas el modal