pjax.js v0.6.6

Automatic Pjax

The Pjax.js is a jQuery plugin script that uses ajax, pushState and automatically detects links and forms, for configure page you need use id="pjax-container" in all pages, example:

<div id="pjax-container">
    ...
</div>

Pjax load all content from pages, but uses only contents from first element using pjax-container, if you don't need the Pjax in a spefic link or form then use data-pjax-ignore attribute, example:

<p>
    Hello world!
    Example <a data-pjax-ignore href="/page.html">page</a>.
</p>

Setup

Include lib

<link rel="stylesheet" type="text/css" href="pjax.min.css" data-pjax-resource="true">
<script src="pjax.min.js"></script>

Or use CDN:

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/pjax.js@0.6/pjax.min.css" data-pjax-resource="true">
<script src="https://cdn.jsdelivr.net/npm/pjax.js@0.6/pjax.min.js"></script>

Note: CSS is optional, you can create your own loader or customize the following structure using CSS (the structure is generated by Pjax.js):

<div class="pjax-loader pjax-start pjax-inload pjax-end pjax-hide">
    <div class="pjax-progress"></div>
</div>

Import:

const Pjax = require('pjax.js');

...

ESM/ES6 import:

import Pjax from 'pjax.js';

...

RequireJS:

requirejs(['folder/foo/bar/pjax'], function (Pjax) {
    ...
});

Support

The pjax.js support links, forms with method GET, forms with method POST and support files and multiple files (<input type="file" multiple>).

Requirements:

• DOMParser or document.implementation
• pushState, replaceState and popstate (DOM History manipulation)
• FormData (XMLHttpRequest Level 2) - if need upload files using PJAX (enctype="multipart/form-data")

Tested in:

• Internet Explorer 10
• Firefox
• Google Chrome
• iOS 10
• Android 2.3+

Usage

For use:

Pjax.start();

Pjax API

Pjax.request() method

config param is optional, you can define like this:

Pjax.request("/foo/bar", {
    method: "POST",
    replace: true,
    data: "foo=1&bar=2&baz=3"
});

Uploading file:

const formdata = new FormData;
const blob = new Blob(["Hello World!"], {
  type: "text/plain"
});

formdata.append("file", blob, "hello.txt");

Pjax.request("/foo/bar", {
    method: "POST",
    replace: true,
    data: formdata
});

Details for use data::

Pjax Events

Tip: You can use Pjax.on("dom", ...); for remove events in DOM

Pjax configs

PJAX with HTML5 data attribute

If need overwrite properties for specific link or form you can config using HTML attributes:

For change configs use like this:

Pjax.start({
    containers: [ "#my-container" ], //Change container element
    scrollLeft: -1, //Disable autoscroll
    scrollTop: -1 //Disable autoscroll
});

Update two elements (or more)

You can change the element you want to update or even add more elements, eg.:

<div id="navbar">
    ...
</div>
<div id="my-container">
    ...
</div>
<script>
Pjax.start({
    containers: [ "#navbar", "#my-container" ] //Change containers element
});
</script>

You can change configs in initiate event, example:

<div id="pjax-container">
    <div id="filter">
        <form>
            ...
        </form>
    </div>
    <div id="search-container">
        ...
    </div>
</div>
<script>
Pjax.start();

Pjax.on("initiate", function (url, configs) {
    if (url.indexOf("/search/") === 0 && window.location.href.indexOf("/search/") === 0) {
        configs.containers = [ "#search-container" ];
    }
});
</script>

If you are on a product search page and are doing a new search instead of updating the entire container will only update the element where the products are, other pages will continue to update the entire container.

Pjax in server-side

It is possible to detect if the request came from the PJAX using the request headers:

Example using PHP:

if (isset($_SERVER['HTTP_X_PJAX'])) {
    echo 'You using pjax';
}

Redirect using PJAX

You can use HTTP response header X-PJAX-URL in back-end for force Pjax.js redirects, example:

header('X-PJAX-URL: /new-page.html');

...

Change or add container using PJAX

You can use HTTP response header X-PJAX-URL in back-end for force Pjax.js redirects, example:

if (isset($_SERVER['HTTP_X_PJAX'])) {
    header('X-PJAX-Container: #foo,#bar');

    echo '<div id="foo"> ... </div>';

    echo '<div id="bar"> ... </div>';
}

Custom loader with Pjax

You can custom CSS, example change color and size, put in new CSS file or <style> tag:

.pjax-loader .pjax-progress {
    height: 6px;
    background-color: blue;
}

If you need custom "more", first remove default loader:

Pjax.start({
    loader: false
});

And after use initiate and then events:

Pjax.on("initiate", function () {
    $(".my-custom-loader").css("display", "block");
});

Pjax.on("then", function () {
    $(".my-custom-loader").css("display", "none");
});

HTML:

<div class="my-custom-loader">
    <img src="loader.gif">
</div>

Pjax handler response

For create a custom responses for Pjax you can use handler event, example:

Pjax.start({
    updatehead: false //Prevent remove itens in head
});

Pjax.on("handler", function (hdata, config, done, fail) {
    setTimeout(function () {
        done(hdata.url, '<div id="pjax-container">Foo: ' + new Date() + '</div>', config, hdata.state);
    }, 1000);
});