pjax.js

Pjax automatique

Le Pjax.js est un script de plugin jQuery qui utilise ajax, pushState et détecte automatiquement les liens et les formulaires. Pour configurer la page, vous devez utiliser id="pjax-container" dans toutes les pages, exemple :

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

Pjax charge tout le contenu des pages, mais utilise uniquement le contenu du premier élément en utilisant pjax-container , si vous n'avez pas besoin du Pjax dans un lien ou un formulaire spécifique, utilisez l'attribut data-pjax-ignore , exemple :

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

Installation

Inclure la bibliothèque

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

Ou utilisez CDN :

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

Remarque : CSS est facultatif, vous pouvez créer votre propre chargeur ou personnaliser la structure suivante en utilisant CSS (la structure est générée par Pjax.js) :

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

Importer:

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

...

Importation ESM/ES6 :

 import Pjax from 'pjax.js' ;

...

ExigerJS :

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

Soutien

Le pjax.js prend en charge les liens, les formulaires avec la méthode GET , les formulaires avec la méthode POST et prend en charge les fichiers et plusieurs fichiers ( <input type="file" multiple> ).

Exigences:

• DOMParser ou document.implementation
• pushState , replaceState et popstate (manipulation de l'historique DOM)
• FormData (XMLHttpRequest Niveau 2) - si besoin, téléchargez des fichiers à l'aide de PJAX ( enctype="multipart/form-data" )

Testé dans :

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

Usage

Pour utilisation :

 Pjax . start ( ) ; 

API Pjax

Méthode	Description
Pjax.supported	Renvoie true si prend en charge cette bibliothèque, sinon renvoie false
Pjax.remove();	Supprimer les requêtes et les événements PJAX
Pjax.on(event, function (...) {...});	Définir un événement
Pjax.off(event, function (...) {...});	Supprimer un événement
Pjax.request(url[, config])	Demande à l'aide d'un script

Méthode Pjax.request()

Le paramètre config est facultatif, vous pouvez le définir comme ceci :

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

Téléchargement du fichier :

 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
});

Détails data: :

Propriété	taper	défaut	description
replace:	bool	false	Définit le mode d'état de l'historique, si vous le définissez sur false (ou omis), il utilisera history.pushState() , mais si vous le définissez sur true il utilisera history.replaceState() .
method:	string	GET	Définir la méthode HTTP
data:	bool	false	Pour envoyer des données dans la requête, vous pouvez utiliser String ou FormData

Événements Pjax

Exemple	Description
Pjax.on("initiate", function (url, config) {...});	Déclenché lorsque vous cliquez sur un lien, soumettez un formulaire ou exécutez la méthode Pjax.request()
Pjax.on("done", function (url, status) {...});	Déclenché lors du chargement de la page, status renvoie le code HTTP
Pjax.on("fail", function (url, status) {...});	Déclenché lorsque la page n'a pas pu être chargée, status renvoie le code HTTP
Pjax.on("then", function (url) {...});	S'exécute chaque fois qu'une requête est terminée, même si elle échoue ou réussit
Pjax.on("history", function (url, stateData) {...});	Exécute chaque utilisation en arrière ou en avant
Pjax.on("handler", function (data, config, callbackDone, callbackFail) {...});	Créez votre réponse de propriétaire à la demande Pjax.js
Pjax.on("dom", function (url, newdocument) {...});	Vous permet de manipuler manuellement un changement d'élément, par exemple vous pouvez créer des transitions ou modifier un nouveau document

Astuce : Vous pouvez utiliser Pjax.on("dom", ...); pour supprimer des événements dans le DOM

Configurations Pjax

Propriété	taper	défaut	description
containers:	array	[ "#pjax-container" ]	Indique les éléments à mettre à jour sur la page
updatecurrent:	bool	false	Si true demande, la même URL utilisée par la page actuelle est exécutée history.replaceState , sinon rien ne sera exécuté
updatehead:	bool	true	Le "pjax.js" dispose d'un système de mise à jour intelligent qui permet d'éviter l'effet "clignotement", car au lieu de tout mettre à jour, il ne met à jour que ce qui a été modifié, cependant si vous êtes sûr que rien ne changera au fur et à mesure de votre page, vous pouvez le configurer à false, la seule qui continuera à être mise à jour sera la balise <title>
insertion:	string	undefined	Les valeurs prises en charge append et prepend . Si elles sont omises, elles remplaceront le contenu.
scrollLeft:	number	0	Après avoir chargé une page via PJAX, vous pouvez définir où scrollLeft doit défiler. Définissez -1 pour désactiver le défilement automatique dans x-cord
scrollTop:	number	0	Après avoir chargé une page via PJAX, vous pouvez définir où scrollTop doit défiler. Définissez -1 pour désactiver le défilement automatique dans y-cord
loader:	bool	true	Ajoute le chargeur Pjax natif, si vous souhaitez créer votre propre chargeur, définissez-le sur false
nocache:	bool	false	Empêcher le cache
proxy:	string	""	Définir un proxy Web
formSelector:	string	form:not([data-pjax-ignore]):not([action^='javascript:'])	Définir le sélecteur de formulaire, définir vide pour empêcher les formulaires d'utiliser Pjax
linkSelector:	string	a:not([data-pjax-ignore]):not([href^='#']):not([href^='javascript:'])	Définir le sélecteur de formulaire, définir vide pour empêcher les liens d'utiliser Pjax
headers:	object	Ajoute des en-têtes personnalisés, par exemple : { "foo": "bar", "test": "baz" }

PJAX avec attribut de données HTML5

Si vous avez besoin d'écraser les propriétés d'un lien ou d'un formulaire spécifique, vous pouvez les configurer à l'aide des attributs HTML :

Propriété	équivalent	exemple	description
data-pjax-containers	containers:	<a href="..." data-pjax-containers="[ &quot;#foo&quot;, &quot;#bar&quot;, &quot;#baz&quot; ]"	Ajuste les conteneurs lorsque la demande provient d'un formulaire ou d'un lien spécifique
data-pjax-updatehead	updatehead:	<a href="..." data-pjax-updatehead="false"	Autoriser/interdire la mise à jour de la balise head lorsque la demande provient d'un formulaire ou d'un lien spécifique
data-pjax-insertion	insertion	<a href="..." data-pjax-insertion="append"	Ajouter ou ajouter des données aux conteneurs au lieu de mettre à jour
data-pjax-scroll-left	scrollLeft:	<form action="..." data-pjax-scroll-left="10"	défilement personnalisé vers la gauche vers un formulaire ou un lien spécifique
data-pjax-scroll-top	scrollTop:	<form action="..." data-pjax-scroll-top="-1"	défilement personnalisé vers un formulaire ou un lien spécifique
data-pjax-loader	loader:	<a href="..." data-pjax-loader="false"	Autoriser/interdire l'animation du chargeur vers un formulaire ou un lien spécifique
data-pjax-done	-	<a href="..." data-pjax-done="console.log('success', this);"	Événement « terminé » personnalisé vers un formulaire ou un lien spécifique
data-pjax-fail	-	<a href="..." data-pjax-fail="console.log('error', this);"	Événement « erreur » personnalisé vers un formulaire ou un lien spécifique
data-pjax-ignore	-	<a href="..." data-pjax-ignore="true">	Navigation normale vers un formulaire ou un lien spécifique
data-pjax-resource	-	<link href="..." data-pjax-resource="true">	Empêcher la suppression d'un élément après la mise à jour du DOM (pour l'instant, cela ne fonctionne que dans le <head> )

Pour modifier les configurations, utilisez comme ceci :

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

Mettre à jour deux éléments (ou plus)

Vous pouvez modifier l'élément que vous souhaitez mettre à jour ou même ajouter d'autres éléments, par exemple :

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

Vous pouvez modifier les configurations lors de l'événement initiate , exemple :

 < 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 >

Si vous êtes sur une page de recherche de produits et que vous effectuez une nouvelle recherche au lieu de mettre à jour l'ensemble du conteneur, cela ne mettra à jour que l'élément où se trouvent les produits, les autres pages continueront à mettre à jour l'intégralité du conteneur.

Pjax côté serveur

Il est possible de détecter si la requête provient du PJAX à l'aide des en-têtes de requête :

En-tête	Description
X-PJAX	Indique que la page a été demandée via PJAX
X-PJAX-Container	Informe les sélecteurs de conteneurs utilisés

Exemple utilisant PHP :

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

Redirection à l'aide de PJAX

Vous pouvez utiliser l'en-tête de réponse HTTP X-PJAX-URL dans le back-end pour forcer les redirections Pjax.js, exemple :

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

. . . 

Modifier ou ajouter un conteneur à l'aide de PJAX

Vous pouvez utiliser l'en-tête de réponse HTTP X-PJAX-URL dans le back-end pour forcer les redirections Pjax.js, exemple :

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

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

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

Chargeur personnalisé avec Pjax

Vous pouvez personnaliser le CSS, par exemple changer la couleur et la taille, insérer un nouveau fichier CSS ou une balise <style> :

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

Si vous avez besoin de "plus" personnalisé, supprimez d'abord le chargeur par défaut :

 Pjax . start ( {
    loader : false
} ) ;

Et après utilisation, initiate then événements :

 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 > 

Réponse du gestionnaire Pjax

Pour créer des réponses personnalisées pour Pjax, vous pouvez utiliser l'événement handler , exemple :

 Pjax . start ( ) ;

Pjax . on ( "handler" , function ( details , done , fail ) {
    console . log ( "handler request:" , details . method , details . url ) ;
    console . log ( "handler target:" , details . element ) ;
    console . log ( "handler mode history:" , details . state ) ; // 1 == push, 2 == replace

    setTimeout ( function ( ) {
        if ( < condition for history state > ) {
            done ( '<div id="pjax-container">Foo: ' + new Date ( ) + '</div>' ) ;
        } else {
            fail ( "Custom Error" ) ;
        }
    } , 1000 ) ;
} ) ;