Обновление страницы Laravel / Ajax с фильтрами - PullRequest
0 голосов
/ 31 мая 2018

У меня есть список предложений о работе на моей домашней странице, нумеруются каждые 5 предложений, нумерация страниц добавляется, когда я прокручиваю раздел «loadScroll».

На моей домашней странице есть несколько фильтров, которые могут отображатьпредложения о работе только с выбранными типами контрактов или секторами.

Когда я выбираю фильтр (флажок), я просто публикую форму с выбранным входом, а затем запускается вызов AJAX (functions.js).

Проблема в том, что когда я фильтрую свои предложения, я обновляю текущие отображаемые предложения, но если я выполняю прокрутку, нумерация страниц работает с предыдущими предложениями и отображает еще 5 предложений без фильтрации.

Я просто хотел быобновить нумерацию страниц для выполнения этой работы с текущими предложениями с выбранными фильтрами

<strong>homepage.blade.php</strong>

<div class="filters">
    <form method="post" action="/offers/filter/result" name="filterOffer" role="form">
        <label>Contract types</label>
        <button class="collapseButton" type="button" data-toggle="collapse" data-target="#collapseContractTypes" aria-expanded="false" aria-controls="collapseContractTypes">See contract types <i class="fa fa-chevron-right"></i></button>
        <ul id="collapseContractTypes" class="collapse">
            <li><input type="checkbox" name="contract_type[]" class="checkboxInput checkboxContract" checked="checked" value="all"><span class="checkboxSpan">All</span></li>
            <?php $contract_types = \Illuminate\Support\Facades\Lang::get('vocabulary.contract_type'); ?>
            @foreach($contract_types as $key => $contract_type)
                    <li><input type="checkbox" name="contract_type[]" class="checkboxInput checkboxContract" value="{{ $key }}"><span class="checkboxSpan">{{ $contract_type }}</span></li>
            @endforeach
        </ul>

        <label>Activity sectors</label>
        <button class="collapseButton" type="button" data-toggle="collapse" data-target="#collapseSectors" aria-expanded="false" aria-controls="collapseSectors">See activity sectors <i class="fa fa-chevron-right"></i></button>
        <ul id="collapseSectors" class="collapse">
            <li><input type="checkbox" name="sectors[]" class="checkboxInput checkboxSector" checked="checked" value="all"><span class="checkboxSpan">All</span></li>
            <?php $sectors = \Illuminate\Support\Facades\Lang::get('vocabulary.sector_activity'); ?>
            @foreach($sectors as $key => $sector)
                @if ($sector['display'] == 1)
                <li><input type="checkbox" name="sectors[]" class="checkboxInput checkboxSector" value="{{ $key }}"><span class="checkboxSpan">{{ $sector['name'] }}</span></li>
                @endif
            @endforeach
        </ul>
        <input type="hidden" name="_token" value="{{ csrf_token() }}">
        <input type="hidden" name="companyFilter" id="companyFilter" />
        <?php
            null !== request()->get('searchOffer') ? $offerFilter = request()->get('searchOffer') : $offerFilter = "";
        ?>
        <input type="hidden" name="offerFilter" id="offerFilter" value="{{ $offerFilter }}" />
    </form>

    <label>By company</label>
    <div class="inputGroupSidebar">
        <input type="text" name="searchOffersByCompany" class="inputForm" id="searchOffersByCompany" placeholder="Search a company..." />
        <div class="inputFormRightIcon">
            <i class="fa fa-search"></i>
        </div>
    </div>
</div>

<div class="boxList showMenu" id="loadOffersContent">
  @include ('website/offers/actions/load')
</div>

<div class="loadScroll">
    <button class="buttonActionLg bgPrimary"><i class="fa fa-circle-o-notch fa-spin fa-fw"></i> Loading offers...</button>
</div>

<strong>load.blade.php</strong>

@foreach ($offers as $offer)
  <a class="boxEffect boxOffer" href="/offers/{{ $offer->id_offer }}">
    <div class="boxHeader">
        <h3 class="boxTitle">{{ $offer->title }}</h3>
        <span class="boxLabel @lang('vocabulary.contract_type_bgcolors.' . $offer->contract_type)">@lang('vocabulary.contract_type.' . $offer->contract_type)</span>
        <?php
        $date = new \Carbon\Carbon($offer->created_at);
        $date::setLocale('fr');
        ?>
        <span class="boxDate">{{ $date->diffForHumans() }}</span>
    </div>
    <div class="boxSubtitle">
        <p>{{ $offer->city }}</p>
    </div>
    <div class="boxContent">
        <p>{{ $offer->description }}</p>
    </div>
    <div class="boxFooter">
        <div class="boxLeftSide">
            <span>Posted by : <small>{{ $offer->name ? $offer->name : $offer->email }}</small></span>
            <span>Sector : <small>@lang('vocabulary.sector_activity.' . $offer->sector . '.name')</small></span>
        </div>
        <div class="boxRightSide rightArrow"></div>
    </div>
  </a>
@endforeach

<strong>functions.js</strong>

var page = 1;

$(window).scroll(function() {
    if ($(window).scrollTop() + $(window).height() >= $(document).height()) {
        page++;
        loadMoreData(page);
    }
});

function loadMoreData(page) {
    $.ajax({
        type: 'GET',
        url: '?page=' + page,
        beforeSend: function() {
            $('.loadScroll').show();
        },
        success: function(response) {
            if (response.html == "") {
                $('.loadScroll').html("<span class='colorPrimary'>No job offers has been found.</span>");
                return;
            }

            $('.loadScroll').hide();
            $("#loadOffersContent").append(response.html);
        },
        error: function (response) {
            console.error(response);
            notification('danger', "An error has occurred.");
        }
    });
}

$(document).on('submit', 'form[name=filterOffer]', function(event) {
    event.preventDefault();
    var url = $(this).attr('action');
    var data = $(this).serialize();

    $.ajax({
        type: 'POST',
        url: url,
        data: data,
        success: function(response) {
            $('.boxList').hide().html($(response).find('.boxList').html()).fadeIn();
        },
        error: function (response) {
            console.error(response);
            notification('danger', "An error has occurred.");
        },
    });
});

<strong>HomeController.php</strong> (контроллер домашней страницы)

public function index(Request $request)
{
    $offers = DB::table('offers')
        ->leftJoin('users', 'offers.company_id', '=', 'users.id')
        ->leftJoin('companies', 'users.id', '=', 'companies.user_id')
        ->where([
            ['offers.valid', '=', true],
            ['offers.complete', '=', false],
        ])
        ->select('offers.id as id_offer', 'users.id as id_company', 'users.email', 'users.role', 'offers.title', 'offers.description', 'offers.contract_type', 'offers.duration', 'offers.remuneration', 'offers.valid', 'offers.complete', 'offers.created_at', 'offers.city', 'offers.sector', 'companies.name', 'companies.siret', 'companies.address', 'companies.phone')
        ->orderBy('offers.created_at', 'DESC')
        ->paginate(5);

    if ($request->ajax()) {
        $view = view('website/offers/actions/load',compact('offers'))->render();
        return response()->json(['html' => $view]);
    }

    return view('website/index', ['offers' => $offers]);
}

<strong>OffersController.php</strong> (функция контроллера срабатывает при использовании фильтров)

public function filterOffers(Request $request)
{
    $contracts = Input::only('contract_type');
    $sectors = Input::only('sectors');
    $company_name = Input::only('companyFilter');
    $offer_title = Input::only('offerFilter');

    if (isset($contracts['contract_type'])) {
        $contracts = $contracts['contract_type'];
    }

    if (isset($sectors['sectors'])) {
        $sectors = $sectors['sectors'];
    }

    if (isset($company_name['companyFilter'])) {
        $company_name = $company_name['companyFilter'];
    } else {
        $company_name = "";
    }

    if (isset($offer_title['offerFilter'])) {
        $offer_title = $offer_title['offerFilter'];
    } else {
        $offer_title = "";
    }

    if (in_array("all", $contracts)) {
        $contractsFile = Lang::get('vocabulary.contract_type');
        $contractsKey = array();
        foreach ($contractsFile as $key => $value) {
            array_push($contractsKey, $key);
        }
        $contracts = $contractsKey;
    }

    if (in_array("all", $sectors)) {
        $sectorsFile = Lang::get('vocabulary.sector_activity');
        $sectorsKeys = array();
        foreach ($sectorsFile as $key => $value) {
            array_push($sectorsKeys, $key);
        }
        $sectors = $sectorsKeys;
    }


    $offers = DB::table('offers')
        ->leftJoin('users', 'offers.company_id', '=', 'users.id')
        ->leftJoin('companies', 'users.id', '=', 'companies.user_id')
        ->select('offers.id as id_offer', 'users.id as id_company', 'users.email', 'users.role', 'offers.title', 'offers.description', 'offers.contract_type', 'offers.duration', 'offers.remuneration', 'offers.valid', 'offers.complete', 'offers.created_at', 'offers.city', 'offers.sector', 'companies.name', 'companies.siret', 'companies.address', 'companies.phone')
        ->whereIn('offers.contract_type', $contracts)
        ->whereIn('offers.sector', $sectors)
        ->where([
            ['companies.name', 'LIKE', '%'.$company_name.'%'],
            ['offers.title', 'LIKE', '%'.$offer_title.'%'],
            ['offers.valid', '=', true],
            ['offers.complete', '=', false],
        ])
        ->orderBy('offers.created_at', 'DESC')
        ->paginate(5);

    return view('website/index')->with(['offers' => $offers]);
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...