1

en mi tabla yo contengo un campo que se llama remito que iría una imagen del remito. Hasta ahora todo bien en mi base de datos se guarda la ruta del archivo y en la vista me muestra la ruta del archivo. Lo que hice despues es agregar un boton para visualizar la imagen en si y no la ruta, pero al seleccionar el boton de visualizar me muestra todas las imagenes y no la del que seleccione. Es como si no me estuviese identificando mi id.

Lo siguiente es el modal que cree donde se muestra la imagen:

<div class="modal fade" id="DetalleTicketView" tabindex="-1" role="dialog" style="z-index: 1050; display:none; width:100%" aria-hidden="true">
            <div class="modal-dialog" role="document" style="max-width:75%;">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Detalle del Ticket</h5>
                        <button type="button" class="close btn btn-danger" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true"><i class="fas fa-times-circle"></i></span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <table id="example1" class="table table-striped table-responsive" width="100%">
                            
                            <tbody>
                               
                                @foreach($file as $key => $detalleTicket)
                                <tr>                                   
                                    
                                    <td style="display: none">{{ $key+1 }}</td>
                                    
                                    <img src="{{asset('storage/' . $detalleTicket->remitoCliente)}}" alt="">
                                
                                </tr>
                                @endforeach
                            </tbody>
                        
                        </table>
                    </div>
                </div>
            </div>
        
        </div>

Este seria el boton con la data del modal:

<a title="Info" id="info" class="btn btn-sm btn-info" data-toggle="modal" data-idUpdate="'.$detalleTicket->id.'" data-target="#DetalleTicketView"><i class="fa fa-eye"></i></a>

Este sería mi controlador de DetalleTicket:

<?php

   namespace App\Http\Controllers\Backend;

   use App\Http\Controllers\Controller;

   use Illuminate\Http\Request;
   use Auth;
   use Session;
   use App\Model\DetalleTicket;
   use App\Model\Ticket;
   use App\Model\Product;


 class DetalleTicketController extends Controller
  {
    public function view(){ 
       $file = DetalleTicket::all();
       return view('backend.detalle_ticket.view-detalle-ticket', compact('file'));
   }

public function add(){
    $detalleTicket['tickets'] = Ticket::all();        
    $detalleTicket['products'] = Product::all();
    
    return view('backend.detalle_ticket.add-detalle-ticket', $detalleTicket);
}

public function store(Request $request){
    /*dd($request->all());*/
    $detalleTicket = new DetalleTicket();

    $detalleTicket->ticket_id = $request->ticket_id;
    $detalleTicket->product_id = $request->product_id;
    $detalleTicket->serial_number = $request->serial_number;
    $detalleTicket->quantity = $request->quantity;
    $detalleTicket->commentary = $request->commentary;
    $path = request()->file('remitoCliente')->store('archivos'); 
    $detalleTicket->remitoCliente = $path;
    
    $detalleTicket->save();
    Session::flash('success');
    return redirect()->route('detalles-tickets.view', $path);
}

public function edit($id){
    $data['editData'] = DetalleTicket::find($id);
    $data['tickets'] = Ticket::all();
    $data['products'] = Product::all();
    
    
    return view('backend.detalle_ticket.edit-detalle-ticket', $data);
}

public function update(Request $request, $id){
    $detalleTicket = DetalleTicket::find($id);
    
           
    $detalleTicket->ticket_id = $request->ticket_id;
    $detalleTicket->product_id = $request->product_id;
    $detalleTicket->serial_number = $request->serial_number;
    $detalleTicket->quantity = $request->quantity;
    $detalleTicket->commentary = $request->commentary;
    $path = request()->file('remitoCliente')->store('archivos'); 
    $detalleTicket->remitoCliente = $path;
    
    $detalleTicket->save();
    
    Session::flash('success');
    return redirect()->route('detalles-tickets.view');
}

public function delete($id){
    $detalleTicket = DetalleTicket::find($id);
    $detalleTicket->delete();
    return redirect()->route('detalles-tickets.view');
}

}

Es decir si yo agrego un ticket con una imagen y luego agrego otro con otra imagen, cuando apreto en el boton para visualizar me aparecen ambas fotos una arriba de la otra.

1 respuesta 1

0

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});
}
4
  • tienes algun ejemplo para mostrarme?
    – MateoG98
    Commented el 9 sept. 2021 a las 22:54
  • Te lo formulo en unos minutos
    – roldos
    Commented el 9 sept. 2021 a las 23:10
  • Dale muchas gracias.
    – MateoG98
    Commented el 9 sept. 2021 a las 23:27
  • Puede agregar un Loading mientras se ejecuta el ajax, para que notifique al usuario que está realizando una operación
    – roldos
    Commented el 9 sept. 2021 a las 23:56

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.