Фреймворк Laravel, Как избежать перезагрузки страницы, когда через QueryBuilder


Фреймворк Laravel, Как избежать перезагрузки страницы, когда через QueryBuilder

05.10.2020 03:37:11 Просмотров 62 Источник

В моем laravel-приложении я использую spatie/laravel-query-builder для фильтрации списка заданий по некоторым категориям.

Так что на данный момент мой код выглядит примерно так:

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

public function index(Request $request) {

    $regions = Region::all();
    $jobtypes = JobType::all();
    $industries = Industry::all();

    $jobs = QueryBuilder::for(Job::class)
        ->allowedFilters([
            AllowedFilter::exact('region', 'region_id'),
            AllowedFilter::exact('jobtype', 'job_type_id'),
            AllowedFilter::exact('industry', 'industry_id')
        ])
        ->get();

    return view('job.index', compact('jobs', 'regions', 'jobtypes', 'industries'));
}

мой взгляд на клинок:

<form method="GET" id="jobfilter-form" enctype="multipart/form-data" content="{{ csrf_token() }}">
   <div>
    <p>Location</p>
    @foreach ($regions as $region)
    <label for="{{$region->id}}">
        <input type="checkbox" class="chk-filter" name="region" value="{{$region->id}}" />
        @if (in_array($region->id, explode(',', request()->input('filter.region'))))
        checked
        @endif
        {{$region->name}}
    </label>
    @endforeach
  </div>

  <div>
    <p>Job type</p>
    @foreach ($jobtypes as $jobtype)
    <label for="{{$jobtype->id}}">
        <input type="checkbox" class="chk-filter" name="jobtype" value="{{$jobtype->id}}" />
        @if (in_array($jobtype->id, explode(',', request()->input('filter.jobtype'))))
        checked
        @endif
        {{$jobtype->name}}
    </label>
    @endforeach
  </div>

  <div>
    <p>Industry</p>
    @foreach ($industries as $industry)
    <label for="{{$industry->id}}">
        <input type="checkbox" class="chk-filter" name="industry" value="{{$industry->id}}" />
        @if (in_array($industry->id, explode(',', request()->input('filter.industry'))))
        checked
        @endif
        {{$industry->name}}
    </label>
    @endforeach
  </div>

  <div>
    <button type="submit" id="filter">filter</button>
  </div>
</form>

и, наконец, на JavaScript:

function getIds(checkboxName) {
  let checkBoxes = document.getElementsByName(checkboxName);
  let ids = Array.prototype.slice
    .call(checkBoxes)
    .filter(ch => ch.checked == true)
    .map(ch => ch.value);
  return ids;
}

function filterResults() {
  let regionIds = getIds("region");

  let jobtypeIds = getIds("jobtype");

  let industryIds = getIds("industry");

  let href = "filter?";

  if (regionIds.length) {
     href += "filter[region_id]=" + regionIds;
  }

  if (jobtypeIds.length) {
     href += "&filter[job_type_id]=" + jobtypeIds;
  }

  if (industryIds.length) {
    href += "&filter[industry_id]=" + industryIds;
  }

  document.location.href = href;
}


$("#jobfilter-form #filter").on("click", e => {
  filterResults();
});

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

Поэтому мой вопрос таков: могу ли я избежать перезагрузки страницы? и как я могу сохранить отмеченные флажки?

Другое дело, что я думал использовать что-то вроде этого:

$(".chk-filter").on("change", function() {
   if (this.checked) {
     $('#jobfilter-form button[type="submit"]').click();
   }
});

и спрячьте кнопку отправки.

Кто-нибудь может мне помочь?

У вопроса есть решение - Посмотреть?

Ответы - Фреймворк Laravel, Как избежать перезагрузки страницы, когда через QueryBuilder / Laravel How to avoid page reloading when using QueryBuilder

Martin Zeitler

05.10.2020 04:04:56

Когда вы обновите URL-адрес и заставите его перемещаться, это, скорее всего, перезагрузит страницу. Лучше добавить дополнительный маршрут, который принимает эти параметры и возвращает JSON. Затем вы можете преобразовать свой стиль web 1.0 в динамическую форму, которая извлекает данные с помощью XHR, а затем соответствующим образом манипулирует DOM. Маркер CSRF должен быть передан вместе с XHR - но форма обычно не требуется, потому что JS будет получать JSON & update DOM (который будет областью, которая показывает результаты). Если вы никогда не отправляете какую-либо форму, страница не будет перезагружаться, и флажки останутся такими, как они есть.

Помочь в развитии проекта:
Закрыть X