How to get data from a line and move to a modal? L

问题:

I have a table where listo products from my database, in it I have ID, name, description, among other data types. I created a button that would call a modal to display more details about the product, however the modal always displays details of the first product in the table and not the ID related to it.

My table:

My table code:

    <table class="table table-striped table-bordered" id="table1" class="table table-bordered">
                                <thread>
                                    <th><center>Imagem</center></th>
                                    <th>SKU</th>
                                    <th><center>Produto</center></th>
                                    <th>Custo</th>
                                    <th>Preço</th>
                                    <th>Atualização</th>
                                    <th>Status</th>
                                    <th>Estoque</th>
                                    <th>Distruibuidor</th>
                                    <th>Categoria</th>
                                    <th id="acoes">Ações</th>
                                </thread>
                                @foreach($product as $prod)
                                    <thread>
                                        <tbody>
                                        <td><img src="{{$prod->image->erp_image}}" style="width: 50px; height: 50px;" alt="" id="ProdImage"></td>
                                        <td>{{$prod->erp_model}}</td>
                                        <td>{{$prod->description->erp_name}}</td>
                                        <td>R$ {{$prod->erp_cost}}</td>
                                        <td>R$ {{$prod->erp_price}}</td>
                                        <td>{{ $prod->erp_modifieddate}}</td>
                                        <td style="max-width: 45px">
                                            @if($prod->status == 1)
                                                <span class="label label-success">Ativo</span>
                                            @else
                                                <span class="label label-danger">Inativo</span>
                                            @endif
                                        </td>
                                        <td>{{ $prod->erp_quantity}}</td>
                                        <td>@if($prod->erp_distributor == 'A')
                                                <span class="label label-default">Aldo</span>
                                            @elseif($prod->erp_distributor == 'AN')
                                                <span class="label label-default">All Nations</span>
                                            @elseif($prod->erp_distributor == 'H')
                                                <span class="label label-default">Hayamax</span>
                                            @elseif($prod->erp_distributor == 'O')
                                                <span class="label label-default">Oderço</span>
                                            @elseif($prod->erp_distributor == 'R')
                                                <span class="label label-default">Rico Peças</span>
                                            @endif
                                        </td>
                                        <td>
                                            @foreach($prod->category as $category)
                                                {{$category->erp_name}}
                                            @endforeach
                                        </td>
                                        <td>
                                            <button href="#" data-toggle="modal" data-target="#view" class="btn btn-default"><i class="glyphicon glyphicon-eye-open"></i></button>
                                            <div class="modal fade" id="view" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                                                <div class="modal-dialog" role="document">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                                            <h4 class="modal-title" id="myModalLabel">Detalhes</h4>
                                                        </div>
                                                        <div class="modal-body">
                                                            <div class="panel panel-default">
                                                                <div class="panel-heading">
                                                                    <h3 class="panel-title">Informações do produto</h3>
                                                                </div>
                                                                <div class="panel-body">
                                                                    <h5>Nome</h5>
                                                                    <input class="form-control" type="text" placeholder="{{$prod->description->erp_name}}" readonly>
                                                                    <h5>SKU</h5>
                                                                    <input class="form-control" type="text" placeholder="{{$prod->erp_model}}" readonly>
                                                                    <h5>EAN</h5>
                                                                    <input class="form-control" type="text" placeholder="{{$prod->erp_ean}}" readonly>
                                                                    <h5>NCM</h5>
                                                                    <input class="form-control" type="text" placeholder="{{$prod->erp_ncm}}" readonly>
                                                                    <h5>CST</h5>
                                                                    <input class="form-control" type="text" placeholder="{{$prod->erp_cstid}}" readonly>
                                                                    <h5>Marca</h5>
                                                                    <input class="form-control" type="text" placeholder="{{$prod->brand->erp_name}}" readonly>
                                                                    <h5>Categoria</h5>
                                                                    @foreach($prod->category as $category)
                                                                        <input class="form-control" type="text" placeholder="{{$category->erp_name}}" readonly>
                                                                    @endforeach
                                                                    <h5>Distribuidor</h5>
                                                                    <input class="form-control" type="text" placeholder="{{ App\Helpers\ProductDistributorHelper::$distributor[$prod->erp_distributor]}}" readonly>
                                                                </div>
                                                            </div>
                                                            <div class="panel panel-success">
                                                                <div class="panel-heading">
                                                                    <h3 class="panel-title">Informações dos preços</h3>
                                                                </div>
                                                                <div class="panel-body">
                                                                    <h5>Preço custo</h5>
                                                                    <input class="form-control" type="text" placeholder="R$ {{$prod->erp_cost}}" readonly>
                                                                    <h5>Preço venda</h5>
                                                                    <input class="form-control" type="text" placeholder="R$ {{$prod->erp_price}}" readonly>
                                                                </div>
                                                            </div>
                                                            <div class="panel panel-success">
                                                                <div class="panel-heading">
                                                                    <h3 class="panel-title">Informações de peso e medida</h3>
                                                                </div>
                                                                <div class="panel-body">
                                                                    <h5>Peso</h5>
                                                                    <input class="form-control" type="text" placeholder="{{$prod->erp_weight}} kg" readonly>
                                                                    <h5>Comprimento</h5>
                                                                    <input class="form-control" type="text" placeholder="{{$prod->erp_lenght}} cm" readonly>
                                                                    <h5>Largura</h5>
                                                                    <input class="form-control" type="text" placeholder="{{$prod->erp_width}} cm" readonly>
                                                                    <h5>Altura</h5>
                                                                    <input class="form-control" type="text" placeholder="{{$prod->erp_height}} cm" readonly>
                                                                </div>
                                                            </div>
                                                            <div class="panel panel-danger">
                                                                <div class="panel-heading">
                                                                    <h3 class="panel-title">Informações de estoque</h3>
                                                                </div>
                                                                <div class="panel-body">
                                                                    <h5>Quantidade</h5>
                                                                    <input class="form-control" type="text" placeholder="{{$prod->erp_quantity}}" readonly>
                                                                </div>
                                                            </div>
                                                            <div class="panel panel-danger">
                                                                <div class="panel-heading">
                                                                    <h3 class="panel-title">Informações técnicas e descrição</h3>
                                                                </div>
                                                                <div class="panel-body">
                                                                    <h5>Descrição</h5>
                                                                    <p></p>
                                                                </div>
                                                            </div>
                                                            <div class="modal-footer">
                                                                <button type="button" class="btn btn-default" data-dismiss="modal">OK</button>
                                                            </div>
                                                        </div>

                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                        <style>
                                            td{
                                                max-width: 100px;
                                                min-width: 80px;
                                            }
                                        </style>
                                        </tbody>

                                    </thread>
                                @endforeach
                            </table>

My Controller

public function showView($name=null){
    if(View::exists('admin/'.$name))
    {
        $product = Product::paginate(10);
        if(Sentinel::check())
            return view('admin.'.$name)->with('product', $product);
        else
            return redirect('admin/signin')->with('error', 'You must be logged in!');
    }
    else
    {
        return view('admin.404');
    }}

Any Suggestion?

回答1:

Its showing you first modal everytime because every modal is having same id view.

so do below change in your code and it will work.

<button href="#" data-toggle="modal" data-target="#view_{{$prod->id}}" class="btn btn-default"><i class="glyphicon glyphicon-eye-open"></i></button>
<div class="modal fade" id="view_{{$prod->id}}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

This will create different IDs for each modal.

This is not good way to make it work.

You should have only one modal for every row and change data dynamically using jQuery on click event of modal show button.

Because so many records will make your HTML file larger and because of that performance would be slow.

回答2:

I think this is not a good way to render modal in foreach loop. Just think if you have lots of product so your modal code also render depending on your products count.

Here is a solution from my side which i personally use. you can try this one.

Step 1: Add a your button with with a class named 'modal-global' and add specific URL in to the href attribute.

Example:

<a href="your/url/{{$prod->id}}" class="btn btn-default modal-global"><i class="glyphicon glyphicon-eye-open"></i></a>

Step 2: Add a bootstrap modal named id "modal-global" in to your project before closing your body tag. And no need to put this modal code in your foreach loop.

Example:

<div class="modal fade" id="modal-global">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-body">
            <div class="text-center">
                <i class="fa fa-3x fa-refresh fa-spin"></i>
                <div>Please wait...</div>
            </div>
        </div>
    </div>
</div>

Step 3: Now you have to write some javascript code for opening your modal and send an ajax request to your server and wait until its response.

Example:

$('.modal-global').click(function(event) {
        event.preventDefault();

        var url = $(this).attr('href');

        $("#modal-global").modal('show');

        $.ajax({
            url: url,
            type: 'GET',
            dataType: 'html',
        })
        .done(function(response) {
            $("#modal-global").find('.modal-body').html(response);
        });

    });

Step 4: Here is an example of your controller method which will return an html content with a specific product details and our ajax will receive this html content as response

Example:

public function viewProduct($id)
{
    $product = Product::findOrfail($id);

    return "
        <table class='table table-hover'>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>description</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>{$product->id}</td>
                    <td>{$product->name}</td>
                    <td>{$product->description}</td>
                </tr>
            </tbody>
        </table>
    ";    
}

回答3:

Your way of creating modal for each row is not good, because it will decrease the page performance, slow page load and increase the size of the page and will take long time to load. For this there is a simple solution.

1. Create a global modal popup with id of view-product or any other id you want to keep. Using this id we will open modal.

   <div class="modal fade" id="view-product" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
       <div class="modal-dialog" role="document">
           <!-- Your Code goes here-->
       </div>
   </div>
   

2. Add a link in each product row and add class view-product. Using view-product class we will bind click event to get each product details and open modal. Assign each product id to the below link to identify which product details you want to view.

   <a href="javascript:;" data-id="{{$prod->id}}" class="btn btn-default view-product"><i class="glyphicon glyphicon-eye-open"></i></a>
   

3. Add click event on view-product class and use AJAX to get product details using data-id we have passed in the link of each product. Check below. After response from ajax you can assign values to each fields you want to set values.

   $('.view-product').on("click", function(event) {
       $("#view-product").modal('show');
       var product_id = $(this).data('id');
       $.ajax({
           url: "url/to/product/details/" + product_id,
           type: 'GET',
           dataType: 'json',
       }).done(function(response) {
           $("#product_name").val(response.product_name);
           // Assign values to other fields
       });
   });
   

This is the simple and global solution. We can use this everywhere, this will increase page load and send request to get details separately.