J'ai une table où listo produits de ma base de données, dans laquelle j'ai l'ID, le nom, la description, parmi d'autres types de données. J'ai créé un bouton qui appellerait un modal pour afficher plus de détails sur le produit, mais le modal affiche toujours les détails du premier produit dans le tableau et non l'ID associé.

Ma table:

enter image description here

Mon code de table:

    <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>

Mon contrôleur

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

Toute suggestion?

2
Vinícius 20 avril 2017 à 19:17

3 réponses

Meilleure réponse

Il vous montre le premier modal à chaque fois, car chaque modal a la même vue d'identifiant.

Alors faites ci-dessous modifiez votre code et cela fonctionnera.

<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">

Cela créera différents ID pour chaque modal.

Ce n'est pas une bonne façon de le faire fonctionner.

Vous ne devriez avoir qu'un seul modal pour chaque ligne et modifier les données dynamiquement à l'aide de jQuery sur l'événement de clic du bouton d'affichage modal.

Parce que tant d'enregistrements rendront votre fichier HTML plus volumineux et à cause de ces performances, il serait lent.

9
Bhaumik Pandhi 20 avril 2017 à 16:49

Votre façon de créer un modal pour chaque ligne n'est pas bonne, car elle diminuera les performances de la page, ralentira le chargement de la page et augmentera la taille de la page et prendra beaucoup de temps à charger. Pour cela, il existe une solution simple.

  1. Créez une fenêtre contextuelle modale globale avec l'identifiant view-product ou tout autre identifiant que vous souhaitez conserver. En utilisant cet identifiant, nous ouvrirons 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. Ajoutez un lien dans chaque ligne de produit et ajoutez la classe view-product. En utilisant la classe view-product, nous lierons l'événement click pour obtenir les détails de chaque produit et ouvrir le modal. Attribuez chaque identifiant de produit au lien ci-dessous pour identifier les détails du produit que vous souhaitez afficher.

    <a href="javascript:;" data-id="{{$prod->id}}" class="btn btn-default view-product"><i class="glyphicon glyphicon-eye-open"></i></a>
    
  3. Ajoutez un événement de clic sur la classe view-product et utilisez AJAX pour obtenir les détails du produit en utilisant data-id que nous avons transmis dans le lien de chaque produit. Vérifiez ci-dessous. Après la réponse d'ajax, vous pouvez attribuer des valeurs à chaque champ pour lequel vous souhaitez définir des valeurs.

    $('.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
        });
    });
    

C'est la solution simple et globale. Nous pouvons l'utiliser partout, cela augmentera le chargement de la page et enverra une demande pour obtenir des détails séparément.

0
Pankaj Makwana 16 févr. 2018 à 06:38

Je pense que ce n'est pas un bon moyen de rendre modal dans la boucle foreach. Pensez simplement que si vous avez beaucoup de produits, votre code modal s'affichera également en fonction du nombre de produits.

Voici une solution de mon côté que j'utilise personnellement. vous pouvez essayer celui-ci.

Étape 1: Ajoutez un bouton avec avec une classe nommée " modal-global " et ajoutez une URL spécifique dans l'attribut href .

Exemple:

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

Étape 2: Ajoutez un modal bootstrap nommé id "modal-global" dans votre projet avant de fermer votre balise body. Et pas besoin de mettre ce code modal dans votre boucle foreach.

Exemple:

<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>

Étape 3: Maintenant, vous devez écrire un code javascript pour ouvrir votre modal et envoyer une requête ajax à votre serveur et attendre sa réponse.

Exemple:

$('.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);
        });

    });

Étape 4: Voici un exemple de votre méthode de contrôleur qui renverra un contenu html avec des détails de produit spécifiques et notre ajax recevra ce contenu html en réponse

Exemple:

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
Saifur Rahman 20 avril 2017 à 19:54