pjax form does not work

Question

Hello, the problem is such a site without frameworks on pure php and not on vps hosting, the site has pjax links goes on without reloading the pages, but the page cannot be processed; the page is reloading; I cannot understand what the problem is

$(function () { $(document).pjax('a', '#pjax-container', { fragment: '#pjax-container', maxCacheLength: 20000000000, timeout: 65000000000, container: '#pjax-container' }); $(document).on('submit', 'form[data-pjax]', function(event) { $.pjax.submit(event, '#jf-form') }) });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://raw.githubusercontent.com/defunkt/jquery-pjax/master/jquery.pjax.js"></script> <form data-pjax name="form" id="jf-form" class="mt-5" action="flt.php" method="post"> <select class="w-100" name="speed" id="speed"> <option value="">Выберите район</option> <option value="6">Кировский</option> <option value="5">Лениский</option> <option value="4">Дзержинский</option> <option value="7">Заволжский</option> <option value="8">Красноперекопский</option> <option value="9">Фрунзенский</option> </select> <p class="w-100 mt-3">Количество комнат</p> <label for="checkbox-1"><span class="text-check">1</span></label> <input type="checkbox" name="appartament[]" class="input" id="checkbox-1" value="1"> <label for="checkbox-2"><span class="text-check">2</span></label> <input type="checkbox" name="appartament[]" class="input" id="checkbox-2" value="2"> <label for="checkbox-3"><span class="text-check">3</span></label> <input type="checkbox" name="appartament[]" class="input" id="checkbox-3" value="3"> <label for="checkbox-4"><span class="text-check">4+</span></label> <input type="checkbox" name="appartament[]" class="input" id="checkbox-4" value="4"> <p class="mt-2">Цена:</p> <div class="row"> <div class="col"> <input type="text" name="price_start" class="form-control" id="price" placeholder="От"> </div> <div class="col"> <input type="text" name="price_end" class="form-control" id="price2" placeholder="До"> </div> </div> <input type="submit" class="btn btn-primary btn-block mt-4" name="filter" value="Подобрать квартиры" /> </form>

Vadim vadim 699 four 14 · Accepted Answer · 2018-01-15T04:15:30

The main problem was not understanding that I was not working with the yii2 framework, but simply with php on the hosting and here it is important that I work with the fragment option: '# pjax-container',. And also a very important parameter is type: "POST" without it, the data will not be sent.

  $(document).on("submit", "form", function(event) { $.pjax.submit(event, "#pjax-container", { fragment: '#pjax-container', maxCacheLength: 2000, timeout: 6500, type: "POST"}) });

  <form class="mt-5" action="flt.php" method="POST"> <select class="w-100" name="speed" id="speed"> <option value="">Выберите район</option> <option value="6">Кировский</option> <option value="5">Лениский</option> <option value="4">Дзержинский</option> <option value="7">Заволжский</option> <option value="8">Красноперекопский</option> <option value="9">Фрунзенский</option> </select> <p class="w-100 mt-3">Количество комнат</p> <label for="checkbox-1"><span class="text-check">1</span></label> <input type="checkbox" name="appartament[]" class="input" id="checkbox-1" value="1"> <label for="checkbox-2"><span class="text-check">2</span></label> <input type="checkbox" name="appartament[]" class="input" id="checkbox-2" value="2"> <label for="checkbox-3"><span class="text-check">3</span></label> <input type="checkbox" name="appartament[]" class="input" id="checkbox-3" value="3"> <label for="checkbox-4"><span class="text-check">4+</span></label> <input type="checkbox" name="appartament[]" class="input" id="checkbox-4" value="4"> <input type="hidden" value="1" name="filter"> <p class="mt-2">Цена:</p> <div class="row"> <div class="col"> <input type="text" name="price_start" class="form-control" id="price" placeholder="От"> </div> <div class="col"> <input type="text" name="price_end" class="form-control" id="price2" placeholder="До"> </div> </div> <input type="submit" class="btn btn-primary btn-block mt-4" id="jf-form" name="filter" value="Подобрать квартиры" /> </form>

pjax form does not work

1 answer 1

More articles: