Pjax

back edit

Pjax container must have id attribute.

<div data-pjax-container id="demo">
  <a href="../../support/pjax.html">Full page reload</a><br>
  <a href="../../support/pjax.html" data-pjax>Pjax navigation</a>
</div>

Pjax-powered forms. This sets data-pjax=${selector} to provide a target container to fill, and uses data-pjax-preserve-scroll so scroll position does not change after pjax. Refreshing the page after submitting the form will land you on the URL with the search param.

<form action="../../support/deferred_list_with_param.html"
  data-pjax="#demo-form"
  data-pjax-preserve-scroll>
  <input name="q" class="form-control" autocomplete="off">
  <button class="btn" type="submit">Submit</button>
</form>

<div data-pjax-container id="demo-form" class="Box mt-3">
  <div class="blankslate">
    <img src="https://ghicons.github.com/assets/images/light/Pull%20Request.png" alt="" class="mb-3" />
    <div class="f3 text-bold">This is a blank slate</div>
    <p>Use it to provide information when no dynamic content exists.</p>
  </div>
</div>