Besoin d'aide ?

Utiliser Ajax pour recharger des infos

  • Avatar de Benjilbc
    Membre depuis :
    17/03/2019
    Messages :
    1

    Bonjour,

    J'ai commencé à utiliser laravel il y a peu de temps et je bloque sur un pb.
    Je vous explique, j'ai une page dans laquelle je fais un @foreach sur une liste d'utilisateurs afin de créer une div d'info par utilisateur.
    Dans cette div j'affiche les horaires de dispo de l'utilisateur en bouclant sur ses 'slots'( qui est un tableau contenu dans l'object utilisateur). J'affiche donc une div avec l'utilisateur et ses slots de dispo. Maintenant ce que je souhaiterais faire c'est de pouvoir, pour un utilisateur (via un clique sur une fleche 'suivant' par ex), charger les prochains slots et cela de facon dynamique donc en ajax.
    Et la je ne sais pas comment m'y prendre, comment recharger ses infos aors que j'ai une div qui est contruite dynamiquement ?
    C'est dans la fonction loadSlots() que je souhaiterais appeler l'ajax qui fasse une requete pour recuperer les slots suivants

    Voici mes vues :
    search.blade.php

    <div id="results" class="col-md-8">
    <div class="row row-search">
    @foreach ($utilisateurs as $utilisateur)
    <div id="{{ $utilisateur['id'] }}" class="col-md-12">
    <div class="row practician-sheet" >
    <div class="col-md-6" >
    @include('layouts.utilisateur', $utilisateur)
    </div>
    <div class="col-md-6" >
    @include('layouts.booking', $utilisateur)
    </div>
    </div>
    </div>
    @endforeach
    </div>
    </div>

    booking.blade.php

    <div id='container-availabilities-days'>
    @foreach ($utilisateur['slots'] as $key => $slots)
    <div style='display:block; flex: 1 0 0; margin: 0 7px'>
    <div style='margin-bottom: 20px;height: 90px; text-align:center'>
    <p>{{ $key }} </p>
    </div>
    <div style='display: block'>
    @foreach($slots as $num => $slot)
    @if($num > 4 )
    <div name='{{ $utilisateur["id"]."".$num }}' class='availabilities-slot more-slot hidden'>
    @else
    <div name='{{ $utilisateur["id"]."
    ".$num }}' class='availabilities-slot'>
    @endif
    <p>{{ $slot }}</p>
    </div>
    @endforeach
    </div>
    </div>
    @endforeach
    <div class='availabilities-pagination' onclick="loadSlots('{{ $utilisateur['id'] }}')">
    </div>
    </div>

    Merci

  • Avatar de bestmomo
    Membre depuis :
    07/04/2013
    Messages :
    2455

    Bonjour,

    Il y a plusieurs façon d'aborder ce genre de chose mais ce qui me semble le plus simple est de :

    • mettre en place une pagination côté Laravel
    • côté serveur utiliser Javascript, par exemple boostée avec JQuery (ou vanilla pour les puristes), pour récupérer l'événement de clic sur un lien de pagination
    • envoyer la requête à Laravel en Ajax
    • côté Laravel générer le code HTML avec une vue et l'envoyer au client
    • récupérer avec Javascript et mettre à jour le DOM avec le nouveau code HTML
    • pour être complet faire suivre le contenu de l'adresse dans le navigateur pour obtenir le même résultat que celui affiché en cas de rechargement de page

    Une autre approche consiste à envoyer tous tes slots côté client et le laisser s'occuper de la pagination. Le chargement initial sera plus long mais la navigation sera ensuite plus rapide.

Vous ne pouvez pas répondre à ce sujet.