1

Realicé un modal en una vista nueva para mostrar todas las columnas de un tabla, pero lo que sucede es que toque en la fila que toque en el boton de visualizar, me muestra todos los registros y yo quiero poder mostrar solo el seleccionado. Pero no se me ocurre como hacerlo, supongo que debe ser con JavaScript.

Esta es la parte de mi vista con la tabla y los botones de editar eliminar y visualizar:

<tbody>
                           
                            @foreach($file as $key => $product)
                            @if($product->status == 1)
                                <tr>
                                    <td style="display: none">{{ $key+1 }}</td>
                                    <td>{{ $product->id }}</td>
                                    <td>{{$product->marca->brandName . " " . $product->modelo->modelName}}</td>
                                    <td>{{ $product['ptype']['productType']}}</td>
                                    <td>{{ $product->marca->brandName }}</td>
                                    <td>{{ $product->modelo->modelName}}</td>
                                    <td>{{ $product->coin }}</td>
                                    <td>{{ $product->description }}</td>
                                    
                                    <td>{{ $product->cost }}</td>
                                    
                                    @php
                                    $count_product = App\Model\Purchase::where('product_id',$product->id)->count();
                                    @endphp
                                        <td>


                                        <!--<a title="Download" id="download" class="btn btn-sm btn-success"
                                            href="/products/download/{{ $product->file }}"><i
                                                class="fa fa-download"></i></a>-->
                                        <a title="Edit" class="btn btn-sm text-white"
                                            style="background-image: linear-gradient(200deg, #070525ce 1%, rgb(1, 0, 5)100%);"
                                            href="{{ route('products.edit', $product->id) }}"><i
                                                class="fa fa-edit"></i></a>
                                        <a title="Delete" id="delete" class="btn btn-sm btn-danger"
                                            href="{{ route('products.delete', $product->id) }}"><i
                                                class="fa fa-trash"></i></a>
                                        <a title="Info" id="info" class="btn btn-sm btn-info" data-toggle="modal" data-idUpdate="'.$product->id.'" data-target="#ProductView"><i class="fa fa-eye"></i></a>
                                    </td>
                                </tr>
                            @endif

                                
                            @endforeach
                        </tbody>

Esta es la parte de mi vista con el modal que cree:

<div class="modal fade" id="ProductView" 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 producto</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%">
                            <thead class="thead">
                                <tr>
                                    <th style="display: none">Codigo</th>
                                    <th>ID</th>
                                    <th>Tipo de Producto</th>
                                    <th>Marca</th>
                                    <th>Modelo</th>
                                    <th>Moneda</th>
                                    <th>Costo</th>
                                    <th>Costo FOB</th>
                                    <th>Costo USD</th>
                                    <th>Costo USDB</th>
                                    <th>Costo Nacionalizacion</th>
                                    <th>Costo ARS</th>
                                    <th>Precio Lista</th>
                                    <th>Precio Mercado Libre</th>
                                    <th>Precio Distribuidor</th>
                                    <th>Precio Limite</th>
                                    <th>Descripcion</th>
                                    
                                    
                                    
                                    
                                </tr>
                            </thead>
                            <tbody>
                               
                                @foreach($file as $key => $product)
                                <tr>                                   
                                    <td style="display: none">{{ $key+1 }}</td>
                                    <td>{{ $product->id }}</td>
                                    <td>{{ $product['ptype']['productType']}}</td>
                                    <td>{{ $product->marca->brandName }}</td>
                                    <td>{{ $product->modelo->modelName}}</td>
                                    <td>{{ $product->coin}}</td>
                                    <td>{{ $product->cost}}</td>
                                    <td>{{ $product->fob}}</td>
                                    <td>{{ $product->costUSD}}</td>
                                    <td>{{ $product->costUSDB}}</td>
                                    <td>{{ $product->costNacionalizacion}}</td>
                                    <td>{{ $product->costARS}}</td>
                                    <td>{{ $product->list_price}}</td>
                                    <td>{{ $product->ML_price}}</td>
                                    <td>{{ $product->distributor_price}}</td>
                                    <td>{{ $product->limit_price}}</td>
                                    <td>{{ $product->description }}</td>
                                    
                                    
                                
                                </tr>
                                @endforeach
                            </tbody>
                        
                        </table>
                    </div>
                </div>
            </div>
        
        </div>

Tabla con mis registros y sus respectivos botones

Estos son mis metodos edit y update de mi controlador de productos:

public function edit($id){
    $data['editData'] = Product::find($id);
    $data['categories'] = Category::all();
    $data['ptypes'] = Ptype::all();
    $data['brands'] = Brand::all();
    $data['models'] = ModelP::all();
    
    return view('backend.product.edit-product', $data);
}

public function update(Request $request, $id){
    $product = Product::find($id);
    if($request->file('file')){
        $file = $request->file('file');
        $filename = time().'.'.$file->getClientOriginalName();
        $request->file->move('storage/', $filename);
        $product->file = $filename;
    }
    
    $product->ptype_id = $request->ptype_id;
    $product->model_id = $request->model_id;
    $product->brand_id = $request->brand_id;
    $product->sale_coin = $request->sale_coin;
    $product->change_type = $request->change_type;
    $product->cost = $request->cost;
    $product->fob = $request->fob;
    $product->costUSD = $request->costUSD;
    $product->costUSDB = $request->costUSDB;
    $product->costNacionalizacion = $request->costNacionalizacion;
    $product->costARS = $request->costARS;
    $product->coin = $request->coin;
    $product->list_price = $request->list_price;
    $product->ML_price = $request->ML_price;
    $product->distributor_price = $request->distributor_price;
    $product->limit_price = $request->limit_price;
    $product->quantity = $request->quantity;
    $product->updated_by = Auth::user()->id;
    $product->save();
    Session::flash('success');
    return redirect()->route('products.view');
}

Si no se entendio bien, lo que trato de hacer en el modal es que al presionar el boton de visualizar sobre una fila, que me muestre unicamente esa fila y todos los valores de todas las columnas.

[Modal con las filas de la tabla][1]

2
  • Podrías adjuntar como se ve antes y después de presionar el botón?
    – alentin
    Commented el 28 sept. 2021 a las 14:08
  • @alentin Ahi edite la pregunta y adjunte las imagenes de como se ve.
    – MateoG98
    Commented el 28 sept. 2021 a las 14:19

3 respuestas 3

0

El problema que veo es que primero iteras todos los registros en la tabla principal que esta bien, pero en el modal vuelves a recorrer de nuevo todos los registros, es por eso que siempre te va a mostrar de nuevo los datos, por lo que el foreach del modal se necesita en este caso, a continuación modifico tu código

<tbody>
                           
                            @foreach($file as $key => $product)
                            @if($product->status == 1)
                                <tr>
                                    <td style="display: none">{{ $key+1 }}</td>
                                    <td>{{ $product->id }}</td>
                                    <td>{{$product->marca->brandName . " " . $product->modelo->modelName}}</td>
                                    <td>{{ $product['ptype']['productType']}}</td>
                                    <td>{{ $product->marca->brandName }}</td>
                                    <td>{{ $product->modelo->modelName}}</td>
                                    <td>{{ $product->coin }}</td>
                                    <td>{{ $product->description }}</td>
                                    
                                    <td>{{ $product->cost }}</td>
                                    
                                    @php
                                    $count_product = App\Model\Purchase::where('product_id',$product->id)->count();
                                    @endphp
                                        <td>


                                        <!--<a title="Download" id="download" class="btn btn-sm btn-success"
                                            href="/products/download/{{ $product->file }}"><i
                                                class="fa fa-download"></i></a>-->
                                        <a title="Edit" class="btn btn-sm text-white"
                                            style="background-image: linear-gradient(200deg, #070525ce 1%, rgb(1, 0, 5)100%);"
                                            href="{{ route('products.edit', $product->id) }}"><i
                                                class="fa fa-edit"></i></a>
                                        <a title="Delete" id="delete" class="btn btn-sm btn-danger"
                                            href="{{ route('products.delete', $product->id) }}"><i
                                                class="fa fa-trash"></i></a>
                                        <a title="Info" id="info" class="btn btn-sm btn-info" data-toggle="modal" data-idUpdate="'.$product->id.'" data-target="#ProductView{{$product->id}}"><i class="fa fa-eye"></i></a> //ESTO SE MODIFICÓ
                                    </td>

<div class="modal fade" id="ProductView{{$product->id}}" tabindex="-1" role="dialog" style="z-index: 1050; display:none; width:100%" aria-hidden="true"> //ESTO SE MODIFICÓ
            <div class="modal-dialog" role="document" style="max-width:75%;">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Detalle del producto</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%">
                            <thead class="thead">
                                <tr>
                                    <th style="display: none">Codigo</th>
                                    <th>ID</th>
                                    <th>Tipo de Producto</th>
                                    <th>Marca</th>
                                    <th>Modelo</th>
                                    <th>Moneda</th>
                                    <th>Costo</th>
                                    <th>Costo FOB</th>
                                    <th>Costo USD</th>
                                    <th>Costo USDB</th>
                                    <th>Costo Nacionalizacion</th>
                                    <th>Costo ARS</th>
                                    <th>Precio Lista</th>
                                    <th>Precio Mercado Libre</th>
                                    <th>Precio Distribuidor</th>
                                    <th>Precio Limite</th>
                                    <th>Descripcion</th>
                                    
                                    
                                    
                                    
                                </tr>
                            </thead>
                            <tbody>
                               
                         //SE ELIMINÓ EL FOREACH, NO ES NECESARIO
                                <tr>                                   
                                    <td style="display: none">{{ $key+1 }}</td>
                                    <td>{{ $product->id }}</td>
                                    <td>{{ $product['ptype']['productType']}}</td>
                                    <td>{{ $product->marca->brandName }}</td>
                                    <td>{{ $product->modelo->modelName}}</td>
                                    <td>{{ $product->coin}}</td>
                                    <td>{{ $product->cost}}</td>
                                    <td>{{ $product->fob}}</td>
                                    <td>{{ $product->costUSD}}</td>
                                    <td>{{ $product->costUSDB}}</td>
                                    <td>{{ $product->costNacionalizacion}}</td>
                                    <td>{{ $product->costARS}}</td>
                                    <td>{{ $product->list_price}}</td>
                                    <td>{{ $product->ML_price}}</td>
                                    <td>{{ $product->distributor_price}}</td>
                                    <td>{{ $product->limit_price}}</td>
                                    <td>{{ $product->description }}</td>
                                    
                                    
                                
                                </tr>
               
                            </tbody>
                        
                        </table>
                    </div>
                </div>
            </div>
        
        </div>

                                </tr>
                            @endif

                                
                            @endforeach
                        </tbody>
6
  • Si le paso el id al id del modal como hiciste "ProductView{{$product->id}}" y selecciono uno, nunca se abre el modal, no sucede nada al presionar el boton.
    – MateoG98
    Commented el 4 oct. 2021 a las 15:58
  • muestra el código de como lo implementastes Commented el 4 oct. 2021 a las 16:10
  • Ahi subí una respuesta de como lo implemente pero sigue sin funcionar.
    – MateoG98
    Commented el 4 oct. 2021 a las 16:16
  • Veo que tienes display:none en el modal eso debes quitarlo y el boton que abre el modal debes quitar la ruta del href, ponle almohadilla "#" no lo necesitas cuando quieres abrir el modal Commented el 4 oct. 2021 a las 16:25
  • Sigue sucediendo lo mismo, habiendo sacado el display none y el href
    – MateoG98
    Commented el 4 oct. 2021 a las 16:38
0

Este es el boton/enlace donde le pase al data-target el id del modal con el id del producto

<a title="Info" id="info" class="btn btn-sm btn-info" data-toggle="modal"  data-idUpdate="'.$product->id.'" data-target="#ProductView{{$product->id}}" href="{{route('products.find', $product->id)}}"><i class="fa fa-eye" ></i></a>

Este es el modal: donde tambien le paso el id del producto al id del modal.

<div class="modal fade" id="ProductView{{$product->id}}" 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 producto</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%">
                            <thead class="thead">
                                <tr>
                                    <th style="display: none">Codigo</th>
                                    <th>ID</th>
                                    <th>Tipo de Producto</th>
                                    <th>Marca</th>
                                    <th>Modelo</th>
                                    <th>Moneda</th>
                                    <th>Costo</th>
                                    <th>Costo FOB</th>
                                    <th>Costo USD</th>
                                    <th>Costo USDB</th>
                                    <th>Costo Nacionalizacion</th>
                                    <th>Costo ARS</th>
                                    <th>Precio Lista</th>
                                    <th>Precio Mercado Libre</th>
                                    <th>Precio Distribuidor</th>
                                    <th>Precio Limite</th>
                                    <th>Descripcion</th>
                                    
                                    
                                    
                                    
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($file as $key => $product)
                                
                                <tr>                                  
                                    <td style="display: none">{{ $key+1 }}</td>
                                    <td>{{ $product->id }}</td>
                                    <td>{{ $product['ptype']['productType']}}</td>
                                    <td>{{ $product->marca->brandName }}</td>
                                    <td>{{ $product->modelo->modelName}}</td>
                                    <td>{{ $product->coin}}</td>
                                    <td>{{ $product->cost}}</td>
                                    <td>{{ $product->fob}}</td>
                                    <td>{{ $product->costUSD}}</td>
                                    <td>{{ $product->costUSDB}}</td>
                                    <td>{{ $product->costNacionalizacion}}</td>
                                    <td>{{ $product->costARS}}</td>
                                    <td>{{ $product->list_price}}</td>
                                    <td>{{ $product->ML_price}}</td>
                                    <td>{{ $product->distributor_price}}</td>
                                    <td>{{ $product->limit_price}}</td>
                                    <td>{{ $product->description }}</td>
                                    
                                    
                                
                                </tr>

                                @endforeach
                                
                            </tbody>
                        
                        </table>
                    </div>
                </div>
            </div>
        
        </div>

Si yo me paro sobre el boton info de un producto me aparece /products/find/2, si es que me paro sobre el producto con un id = 2. Pero al presionar el boton, no sucede nada, no aparece el modal.

0
<table class="table table-sm">
                            <tr style="background: steelblue;color: white">
                                <th>#</th>
                                <th>Nombres</th>
                                <th>Apellidos</th>
                                <th>Email</th>
                                <th>Acciones</th>
                            </tr>
                            @foreach($users as $us)
                                <tr>
                                    <td>{{$loop->index + 1}}</td>
                                    <td>{{$us->name}}</td>
                                    <td>{{$us->apellidos}}</td>
                                    <td>{{$us->email}}</td>
                                    <td>
                                        @if(\Auth::user()->id==1 || $us->id!=1)
                                        <a href="#" data-toggle="modal" data-target="#edit_usuario{{\Hashids::encode($us->id)}}"><i class="fa fa-edit"></i></a>
                                        @endif
                                        @if($us->id!=1)
                                        {{Form::open(['route'=>['usuarios.destroy',\Hashids::encode($us->id)],'method'=>'post','style'=>'display:inline'])}}
                                        @method('delete')
                                        <a href="#" class="ml-2 btnEliminar" onclick="eliminar(this)"><i class="fa fa-trash" style="color: red"></i></a>
                                        {{Form::close()}}
                                            @endif
                                    </td>
                                    <div class="modal fade" id="edit_usuario{{\Hashids::encode($us->id)}}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                        <div class="modal-dialog" role="document">
                                            <div class="modal-content">
                                                {{Form::model($us,['route'=>['usuarios.update',\Hashids::encode($us->id)],'method'=>'post'])}}
                                                @method('put')
                                                <div class="modal-header">
                                                    <h4 class="modal-title">Nuevo Usuario</h4>
                                                </div>
                                                <div class="modal-body">
                                                    <div class="col col-md-12">
                                                        <div class="form-group">
                                                            <strong>Nombres:</strong>
                                                            {{Form::text('name',old('name'),['class'=>'form-control form-control-sm','required'])}}
                                                        </div>

                                                        <div class="form-group">
                                                            <strong>Apellidos:</strong>
                                                            {{Form::text('apellidos',old('apellidos'),['class'=>'form-control form-control-sm','required'])}}
                                                        </div>

                                                        <div class="form-group">
                                                            <strong>Email:</strong>
                                                            {{Form::email('email',old('email'),['class'=>'form-control form-control-sm','readonly'])}}
                                                        </div>

                                                        <div class="form-group">
                                                            <strong>Contraseña:</strong>
                                                            <small>*Dejar vacío si desea conservar la misma contraseña*</small>
                                                            {{Form::text('password2',null,['class'=>'form-control form-control-sm','autocomplete'=>'off'])}}
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="modal-footer">
                                                    <button class="btn btn-danger" data-dismiss="modal">Cancelar</button>
                                                    <button class="btn btn-success">Guardar</button>
                                                </div>
                                                {{Form::close()}}

                                            </div>

                                        </div>
                                    </div>
                                </tr>
                            @endforeach
                        </table>

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.