Autour de Laravel

probleme d'afficher les produit par categories

Avatar de SAWADOGOSIDIKI
SAWADOGOSIDIKI

Bonjour les gars, besoin d'aide. J'ai un problème pour utiliser ajax pour afficher mes données dans un tableau sans recharger la page. J'ai une liste de catégories, je veux quand je sélectionne une catégorie que tous les projets liés à cette catégorie apparaissent dans un tableau sans recharger la page. Vous pouvez m'aider avec vos extraits de code ainsi que vos idées.

public function projetCategorie() { $category = Categorie::paginate(8);

    return view('back-office.admin.categorie.projetParCategorie',[
        'titrePage'  => 'Les categories',
        'categories' => $category,
        // 'projets' => $projet,

    ]);
    
    
    Model
    
    namespace App\Model\Projet;

use Illuminate\Support\Str; use Illuminate\Database\Eloquent\Model;

class Categorie extends Model { protected $fillable = [ 'ref', 'libelle', 'resume', 'image' , ];

public function getRouteKeyName() {
    return 'ref';
}

 public function projets()
 {
     return $this->hasMany('App\Model\Projet\Projet');
 }
 
 voici mon blade
 
 @extends('pages.admin.admin_contenu')

@section('contenu')

    @if($categories->count() > 0)
    <div class="collection" id="par-categorie" itemscope itemtype="http://schema.org/ItemList">
      @foreach($categories as $categorie)
          <a href="#" class="collection-item truncate" itemprop="itemListElement" >{{ $categorie->libelle }}
              <span class="badge text-petit">{{ $categorie->projets->count() }}</span>
          </a>
      @endforeach
      
      {{$categories->links()}}
    </div>
    @endif
   </div>
  </div>

  <div id="man" class="col s12  m8 left">
    <div class="card material-table">
        <div class="table-header">
    {{-- @if($projets->count() > 0) --}}
          <span class="table-title">Liste projets</span>
          <div class="actions">
            <a href="#" class="search-toggle waves-effect btn-flat nopadding"><i class="material-icons">search</i></a>
          </div>
        </div>
        
        <table id="datatable"  class="responsive-table striped">
          <thead>
            <tr>
              <th>Phase</th>
              <th>Nom</th>
              <th>Resume</th>
              <th>Ville</th>
      
            </tr>
          </thead>
          <tbody>
           
            {{-- @foreach($projets as $projet) --}}
            <tr> 
            <td><a class="black-text" href="#">
              <span class="truncate">
                {{-- {{ucfirst( $projet->phase) }} --}}
              </span></a>     
           </td>
            <td><a class="black-text" href="#">
              <span class="truncate">
                {{-- {{ $projet->nom }} --}}
              </span></a>     
          </td>
          <td><a class="black-text" href="#">
            <span class="truncate">
              {{-- {{ $projet->resume }} --}}
            </span></a>     
          </td>
          <td><a class="black-text" href="#">
            <span class="truncate">
              {{-- {{ $projet->ville }} --}}
            </span></a>     
               </td>

            {{-- @endforeach --}}
          </tbody>
        </table>
        {{-- @else --}}
      
        <div class="padding-6">
         Pas de projet pour cette categorie 
        </div>
        {{-- @endif --}}
  </div>
</div>

@endsection

$(function() {

  // Récupération des id pour categorie et projet
  var categorie_id = {{ old('categorie', 0) }};
  var projet_id = {{ old('projet', 0) }};

  // Sélection du categorie
  $('#categorie').val(categorie_id).prop('selected', true);
  // Synchronisation des projets
  projetUpdate(categorie_id);

  // Changement de categorie
  $('#categorie').on('change', function(e) {
      var categorie_id = e.target.value;
      projet_id = false;
      projetUpdate(categorie_id);
     // console.log(566);
  });

  // Requête Ajax pour les projets
  function projetUpdate(categorieId) {
      $.get('{{ url('cities') }}/'+ categorieId + "'", function(data) {
        
          $('#projet').empty();
         
          $.each(data, function(index, cities) {
              $('#projet').append($('<option>', { 
                  value: cities.id,
                  text : cities.nom 
              }));
          });
          if(projet_id) {
              $('#projet').val(projet_id).prop('selected', true);
          }
      });
  }
   

});

Vous ne pouvez pas répondre à ce sujet.