привет, я работаю над фильтрами laravel, используя checbox, и у меня возникают проблемы.Я использую AJAX и JQuery, чтобы избежать перезагрузки страниц - PullRequest
0 голосов
/ 25 апреля 2018

Я хочу, чтобы при нажатии на флажок моя страница только частично менялась. Я использовал два метода. сначала я передаю свои данные ajax контроллеру, который выполняет мой запрос и возвращает частичное представление, которое я адаптирую, и пытаюсь вставить в функцию append (), но это не работает. во-вторых, контроллер возвращает объект json, который я восстанавливаю в ajax и пытаюсь отобразить с добавлением. проблема в том, что данные моего запроса содержат таблицы, и я не знаю, как отобразить их в приложении $ .each (), например, $ jobs-> company-> name).

вот код моего представления, который содержит флажки

  <div class="panel-body">
    @foreach($typelists as $typelist)
    <label for="{{ $typelist->name }}"><input type="checkbox" 
      name="{{ $typelist->name }}" id="{{ $typelist->name }}"
      value="{{ $typelist->id }}" 
      onclick="jobfiltre('{{ $typelist->name }}')"> {{ $typelist->name }} 
    </label>
    @endforeach
 </div><!-- panel-body -->

вот моя функция JavaScript

<script type="text/javascript">
    function jobfiltre(nom) {
        var nom1 = '#'+nom;
        var id;
        id = $(nom1).val();
        console.log(id);
        var  choix = $(nom1).is(':checked');
        console.log(choix);
        if(choix == true) {
            $.ajax({
                url: '{{ url('jobs') }}/' + id,
                type: 'get',
                dataType: 'json',
                cache: false,
                data: {'id': id},
                success: function (data) {
                    // console.log(data);
                    $('#typeJobs').empty();
                    $.each(data, function(index,filtreTypes){
                        console.log(filtreTypes.ville);
                        $('#typeJobs').append('<div class="job-ad-item"><div class="item-info"><div class="item-image-box" <div class="item-image">'+
                            '<a href=\"/jobs/single/'+filtreTypes.id+'\">'+'<img src=\"images/avatars/'+filtreTypes.user.avatar+'\" alt="Image" class="img-responsive" heigth="75px" width="75px"></a> </div><!-- item-image --> </div> <div class="ad-info"> <span><a href=\"/jobs/single/'+filtreTypes.id+'\" class="title">'+filtreTypes.titre+'</a> @ <a href="#">'+filtreTypes.entreprise+'</a></span> <div class="ad-meta"> <ul> <li><a href="#"><i class="fa fa-map-marker" aria-hidden="true"></i>filtreTypes.ville.name</a></li> <li><a href="#"><i class="fa fa-clock-o" aria-hidden="true"></i>filtreTypes.type.name</a></li> <li><a href="#"><i class="fa fa-money" aria-hidden="true"></i>filtreTypes.salaire.salmin+'-'+filtreTypes.salaire.salmax</a></li> </ul> </div><!-- ad-meta --> </div><!-- ad-info --> </div><!-- item-info <hr style="width: 100%">--> </div><!-- job-ad-item -->');');
                    });
                },
                error: function (e) {
                    console.log(e.responseText);
                },
                complete: function () {
                    $('#loader').css("visibility", "hidden");
                 }
              });
           }
        }
   </script>

вот мой контроллер

 public function filtreType($id) {
    $filtreTypes =Job::with('Category')
        ->with('Ville')
        ->with('Type')
        ->with('Salaire')
        ->with('User')
        ->where('type_id', $id)
        ->where('confirmed', 1)
        ->limit(5)
        ->orderBy('updated_at', 'desc')
        ->get();
       // if(Request::ajax()) 
       //return Response::json(['filtreTypes'=>$filtreTypes ]);
       //dd($filtreTypes);
       //return view('Filtre.typeJobs', compact('filtreTypes'));
      return $filtreTypes;

вот представление, которое я хочу динамически изменить

 <div class="col-sm-8 col-md-8">
                    <div class="section job-list-item" id="typeJobs">
                        @foreach($joblists as $joblist)
                            <div class="job-ad-item">
                                <div class="item-info">
                                    <div class="item-image-box">
                                        <div class="item-image">
                                            <a href="{{ route('jobsingle', 
  ['id'=>$joblist->id]) }}"><img src="{{url('images/avatars/'. 
  $joblist->user->avatar) }}" alt="Image" class="img-responsive"></a>
                                        </div><!-- item-image -->
                                    </div>

                                    <div class="ad-info">
                                        <span><a href="{{ route('jobsingle', ['id'=>$joblist->id]) }}" class="title">{{ $joblist->titre }}</a> @ <a href="#">{{ $joblist->entreprise->name }}</a></span>
                                        <div class="ad-meta">
                                            <ul>
                                                <li><a href="#"><i class="fa fa-map-marker" aria-hidden="true"></i>{{ $joblist->ville->name }}</a></li>
                                                <li><a href="#"><i class="fa fa-clock-o" aria-hidden="true"></i>{{ $joblist->type->name }}</a></li>
                                                <li><a href="#"><i class="fa fa-money" aria-hidden="true"></i>{{ $joblist->salaire->salmin }}-{{ $joblist->salaire->salmax }}</a></li>
                                            </ul>
                                        </div><!-- ad-meta -->
                                    </div><!-- ad-info -->

                                </div><!-- item-info <hr style="width: 100%">-->
                            </div><!-- job-ad-item -->


                            @if($loop->index %2 == 0)
                                <div class="job-ad-item">
                                    <div class="ad-info">
                                        <div class="ad-section text-center">
                                            <a href="#"><img src="{{ asset('images/ads/3.jpg') }}" alt="Image" class="img-responsive"></a>
                                        </div><!-- ad-section -->
                                    </div>
                                </div>
                            @endif
                        @endforeach

                    </div>

вот частичное представление, которое я хочу добавить

  <div class="section job-list-item" id="typeJobs">
      @foreach($filtreTypes as $filtreType)
        <div class="job-ad-item">
          <div class="item-info">
            <div class="item-image-box">
                <div class="item-image">
                    <a href="{{ route('jobsingle', ['id'=>$filtreType->id]) }}"><img src="{{url('images/avatars/'. $filtreType->user->avatar) }}" alt="Image" class="img-responsive"></a>
                </div><!-- item-image -->
            </div>

            <div class="ad-info">
                <span><a href="{{ route('jobsingle', ['id'=>$filtreType->id]) }}" class="title">{{ $filtreType->titre }}</a> @ <a href="#">{{ $filtreType->entreprise->name }}</a></span>
                <div class="ad-meta">
                    <ul>
                        <li><a href="#"><i class="fa fa-map-marker" aria-hidden="true"></i>{{ $filtreType->ville->name }}</a></li>
                        <li><a href="#"><i class="fa fa-clock-o" aria-hidden="true"></i>{{ $filtreType->type->name }}</a></li>
                        <li><a href="#"><i class="fa fa-money" aria-hidden="true"></i>{{ $filtreType->salaire->salmin }}-{{ $filtreType->salaire->salmax }}</a></li>
                    </ul>
                </div><!-- ad-meta -->
            </div><!-- ad-info -->

        </div><!-- item-info <hr style="width: 100%">-->
    </div><!-- job-ad-item -->
    @if($loop->index == 7)
        <div class="ad-section text-center">
            <a href="#"><img src="{{ asset('images/ads/3.jpg') }}" alt="Image" class="img-responsive"></a>
        </div><!-- ad-section -->
    @endif
@endforeach

Я решил свою проблему. Я не отображал свои переменные в функции append (). Мой фильтр не все работает, как я хочу. на самом деле он отображает только результат последнего установленного флажка. если я отмечаю флажок, отображается результат, но если я отмечаю два или более флажка, это результат последнего, возвращенного мне. Я хотел бы получить результат всех моих флажков флажок, используя мой предыдущий код. Не могли бы вы помочь мне

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...