Pjax.js
es un script de complemento jQuery que usa ajax, pushState
y detecta automáticamente enlaces y formularios. Para configurar la página necesita usar id="pjax-container"
en todas las páginas, ejemplo:
< div id =" pjax-container " >
...
</ div >
Pjax carga todo el contenido de las páginas, pero usa solo el contenido del primer elemento usando pjax-container
. Si no necesita Pjax en un enlace o formulario específico, use el atributo data-pjax-ignore
, ejemplo:
< p >
Hello world!
Example < a data-pjax-ignore href =" /page.html " > page </ a > .
</ p >
incluir biblioteca
< link rel =" stylesheet " type =" text/css " href =" pjax.min.css " data-pjax-resource =" true " >
< script src =" pjax.min.js " > </ script >
O use 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 >
Nota: CSS es opcional, puede crear su propio cargador o personalizar la siguiente estructura usando CSS (la estructura es generada por Pjax.js):
< div class =" pjax-loader pjax-start pjax-inload pjax-end pjax-hide " > < div class =" pjax-progress " > </ div > </ div >
Importar:
const Pjax = require ( 'pjax.js' ) ;
...
Importación ESM/ES6:
import Pjax from 'pjax.js' ;
...
RequerirJS:
requirejs ( [ 'folder/foo/bar/pjax' ] , function ( Pjax ) {
...
} ) ;
El pjax.js
admite enlaces, formularios con método GET
, formularios con método POST
y admite archivos y múltiples archivos ( <input type="file" multiple>
).
Requisitos:
DOMParser
o document.implementation
pushState
, replaceState
y popstate
(manipulación del historial DOM)FormData
(XMLHttpRequest Nivel 2): si es necesario, cargue archivos usando PJAX ( enctype="multipart/form-data"
)Probado en:
Para uso:
Pjax . start ( ) ;
Método | Descripción |
---|---|
Pjax.supported | Devuelve true si es compatible con esta biblioteca; de lo contrario, devuelve false |
Pjax.remove(); | Eliminar solicitudes y eventos de PJAX |
Pjax.on(event, function (...) {...}); | Definir un evento |
Pjax.off(event, function (...) {...}); | Eliminar un evento |
Pjax.request(url[, config]) | Solicitar usando script |
Pjax.request()
El parámetro config
es opcional, puedes definirlo así:
Pjax.request("/foo/bar", {
method: "POST",
replace: true,
data: "foo=1&bar=2&baz=3"
});
Subiendo archivo:
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
});
Detalles de data:
:
Propiedad | tipo | por defecto | descripción |
---|---|---|---|
replace: | bool | false | Establece el modo de estado del historial, si lo configura en false (u omite) usará history.pushState() , pero si lo configura en true usará history.replaceState() . |
method: | string | GET | Definir el método HTTP |
data: | bool | false | Para enviar datos en la solicitud, puede utilizar String o FormData |
Ejemplo | Descripción |
---|---|
Pjax.on("initiate", function (url, config) {...}); | Se activa al hacer clic en un enlace, enviar un formulario o ejecutar el método Pjax.request() |
Pjax.on("done", function (url, status) {...}); | Se activa cuando se carga la página, status devuelve el código HTTP |
Pjax.on("fail", function (url, status) {...}); | Se activa cuando la página no se carga, status devuelve el código HTTP |
Pjax.on("then", function (url) {...}); | Se ejecuta cada vez que se completa una solicitud, incluso si falla o tiene éxito. |
Pjax.on("history", function (url, stateData) {...}); | Ejecuta cada uso hacia atrás o hacia adelante. |
Pjax.on("handler", function (data, config, callbackDone, callbackFail) {...}); | Cree su respuesta de propietario a la solicitud de Pjax.js |
Pjax.on("dom", function (url, newdocument) {...}); | Le permite manipular un cambio de elemento manualmente, por ejemplo, puede crear transiciones o cambiar un nuevo documento. |
Consejo: puedes usar
Pjax.on("dom", ...);
para eliminar eventos en DOM
Propiedad | tipo | por defecto | descripción |
---|---|---|---|
containers: | array | [ "#pjax-container" ] | Informa qué elementos actualizar en la página. |
updatecurrent: | bool | false | Si la solicitud true es la misma URL utilizada por la página actual, se ejecuta history.replaceState ; de lo contrario, no se ejecutará nada. |
updatehead: | bool | true | El "pjax.js" tiene un sistema de actualización inteligente que ayuda a evitar el efecto "parpadeo", ya que en lugar de actualizar todo solo actualiza lo que se ha cambiado, sin embargo si estás seguro de que nada cambiará a medida que avanzas en la página, puedes configurarlo. a false, la única que se seguirá actualizando será la etiqueta <title> |
insertion: | string | undefined | Los valores de soporte append y prepend ; si se omiten, reemplazarán el contenido |
scrollLeft: | number | 0 | Después de cargar una página a través de PJAX, puede definir dónde debe desplazarse scrollLeft. Establezca -1 para deshabilitar el desplazamiento automático en x-cord |
scrollTop: | number | 0 | Después de cargar una página a través de PJAX, puede definir dónde debe desplazarse scrollTop. Establezca -1 para deshabilitar el desplazamiento automático en el cable Y |
loader: | bool | true | Agrega el cargador Pjax nativo. Si desea crear un cargador propio, configúrelo en false |
nocache: | bool | false | Prevenir caché |
proxy: | string | "" | Establecer proxy web |
formSelector: | string | form:not([data-pjax-ignore]):not([action^='javascript:']) | Establecer selector de formulario, establecer vacío para evitar que los formularios utilicen Pjax |
linkSelector: | string | a:not([data-pjax-ignore]):not([href^='#']):not([href^='javascript:']) | Establecer selector de formulario, establecer vacío para evitar enlaces usa Pjax |
headers: | object | Agrega encabezados personalizados, por ejemplo: { "foo": "bar", "test": "baz" } |
Si necesita sobrescribir propiedades para un enlace o formulario específico, puede configurarlo usando atributos HTML:
Propiedad | equivalente | ejemplo | descripción |
---|---|---|---|
data-pjax-containers | containers: | <a href="..." data-pjax-containers="[ "#foo", "#bar", "#baz" ]" | Ajusta los contenedores cuando la solicitud proviene de un formulario o enlace específico. |
data-pjax-updatehead | updatehead: | <a href="..." data-pjax-updatehead="false" | Permitir/no permitir la actualización de la etiqueta principal cuando la solicitud proviene de un formulario o enlace específico |
data-pjax-insertion | insertion | <a href="..." data-pjax-insertion="append" | Agregar o anteponer datos a los contenedores en lugar de actualizar |
data-pjax-scroll-left | scrollLeft: | <form action="..." data-pjax-scroll-left="10" | desplazamiento personalizado hacia la izquierda para un formulario o enlace específico |
data-pjax-scroll-top | scrollTop: | <form action="..." data-pjax-scroll-top="-1" | desplazamiento superior personalizado a un formulario o enlace específico |
data-pjax-loader | loader: | <a href="..." data-pjax-loader="false" | Permitir/no permitir que el cargador se anime a un formulario o enlace específico |
data-pjax-done | - | <a href="..." data-pjax-done="console.log('success', this);" | Evento personalizado "hecho" para un formulario o enlace específico |
data-pjax-fail | - | <a href="..." data-pjax-fail="console.log('error', this);" | Evento de "error" personalizado para un formulario o enlace específico |
data-pjax-ignore | - | <a href="..." data-pjax-ignore="true"> | Navegación normal a un formulario o enlace específico |
data-pjax-resource | - | <link href="..." data-pjax-resource="true"> | Evitar eliminar elemento después de actualizar DOM (por ahora solo funciona en <head> ) |
Para cambiar configuraciones, use así:
Pjax . start ( {
containers : [ "#my-container" ] , //Change container element
scrollLeft : - 1 , //Disable autoscroll
scrollTop : - 1 //Disable autoscroll
} ) ;
Puedes cambiar el elemento que deseas actualizar o incluso agregar más elementos, por ejemplo:
< div id =" navbar " >
...
</ div >
< div id =" my-container " >
...
</ div >
< script >
Pjax . start ( {
containers : [ "#navbar" , "#my-container" ] //Change containers element
} ) ;
</ script >
Puede cambiar las configuraciones en el evento initiate
, ejemplo:
< 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 estás en una página de búsqueda de productos y estás haciendo una nueva búsqueda en lugar de actualizar todo el contenedor solo actualizará el elemento donde están los productos, otras páginas seguirán actualizando todo el contenedor.
Es posible detectar si la solicitud vino del PJAX usando los encabezados de solicitud:
Encabezamiento | Descripción |
---|---|
X-PJAX | Indica que la página fue solicitada vía PJAX |
X-PJAX-Container | Informa los selectores de contenedores utilizados. |
Ejemplo usando PHP:
if ( isset ( $ _SERVER [ ' HTTP_X_PJAX ' ])) {
echo ' You using pjax ' ;
}
Puede utilizar el encabezado de respuesta HTTP X-PJAX-URL
en el back-end para forzar redireccionamientos de Pjax.js, por ejemplo:
header ( ' X-PJAX-URL: /new-page.html ' );
. . .
Puede utilizar el encabezado de respuesta HTTP X-PJAX-URL
en el back-end para forzar redireccionamientos de Pjax.js, por ejemplo:
if ( isset ( $ _SERVER [ ' HTTP_X_PJAX ' ])) {
header ( ' X-PJAX-Container: #foo,#bar ' );
echo ' <div id="foo"> ... </div> ' ;
echo ' <div id="bar"> ... </div> ' ;
}
Puede personalizar CSS, por ejemplo cambiar color y tamaño, colocar un nuevo archivo CSS o etiqueta <style>
:
. pjax-loader . pjax-progress {
height : 6 px ;
background-color : blue;
}
Si necesita "más" personalizado, primero elimine el cargador predeterminado:
Pjax . start ( {
loader : false
} ) ;
Y después del uso initiate
y then
eventos:
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 >
Para crear respuestas personalizadas para Pjax, puede usar el evento handler
, por ejemplo:
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 ) ;
} ) ;