Laravel

justmax-53
PHP Laravel
PHP

Bonjour à tous, je souhaite afficher mes données dans un modal bootstrap, le problème que je recontre est le suivant:
Soit seulement la 1ere donnée s'affiche soit seulement la dernière, j'ai trouvé des solutions sur des forums disant d'utiliser jquery mais je ne m'y connais absolument pas et donc je n'arrive pas à le mettre en application.

<div class="row mt-5">
@foreach($projectpedagos as $projectpedago)
<div class="col-lg-4 col-md-6 col-sm-6">
<div class="service-item mb-4">
<div class="icon d-flex align-items-center">
<img class="rounded-2" src="{{ asset('storage/' . $projectpedago->image) }}">
<h4 class="mt-3 mb-3">{{$projectpedago->title}}</h4>
</div>
<div class="content">
<p class="mb-4">{{$projectpedago->subtitle}}</p>
</div>
<button type="button" class="btn bg-gray" data-bs-toggle="modal" data-bs-target="#staticBackdrop" data-remote="{{$projectpedago->id}}">
Voir le détail
</button>
</div>
</div>

        <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-scrollable">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="staticBackdropLabel">{{$projectpedago->title}}</h5>
                    </div>
                    <div class="modal-body">
                        {{$projectpedago->content}}
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
                    </div>
                </div>
            </div>
        </div>
        @endforeach
    </div>

J'espère avoir été clair, merci d'avance pour votre aide

4 réponses

popotte
Réponse acceptée

Okay alors ton problème vient de data-bs-target="#staticBackdrop" sur le bouton et id="staticBackdrop" sur le modal

Le problème c'est que tous tes boutons sont liés a #staticBackdrop, donc en cliquant tu va déclancher le dernier

La solution serait que sur le boutton tu mettes data-bs-target="{{ '#staticBackdrop' . $projectpedago->id" et sur le modal tu mettes id="{{ 'staticBackdrop' . $projectpedago->id"

popotte

Hello avant de repondre je met le code en propre ^^'

<div class="row mt-5">
    @foreach($projectpedagos as $projectpedago)
        <div class="col-lg-4 col-md-6 col-sm-6">
            <div class="service-item mb-4">
                <div class="icon d-flex align-items-center">
                    <img class="rounded-2" src="{{ asset('storage/' . $projectpedago->image) }}">
                    <h4 class="mt-3 mb-3">{{$projectpedago->title}}</h4>
                </div>

                <div class="content">
                    <p class="mb-4">{{$projectpedago->subtitle}}</p>
                </div>

                <button type="button" class="btn bg-gray" data-bs-toggle="modal" data-bs-target="#staticBackdrop" data-remote="{{$projectpedago->id}}">
                    Voir le détail
                </button>
            </div>
        </div>

        <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-scrollable">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="staticBackdropLabel">{{$projectpedago->title}}</h5>
                    </div>

                    <div class="modal-body">
                        {{$projectpedago->content}}
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
                    </div>
                </div>
            </div>
        </div>
    @endforeach
</div>
justmax-53
Auteur

Un grand merci pour ton aide, je savais que c'était tout bête, j'ai essayé plusieurs chose avec justement les id mais bon ... Vraiment merci beaucoup :)

popotte

Avec plaisir ;)

Ahah tkt dans le dev c'est pas la dernière fois que tu bloquera sur un truc tout bête c'est le quotidien des développeurs xD