bscheshirwork/yii2-jquery-pjax-asset

Asset for the origin https://github.com/defunkt/jquery-pjax instead of https://github.com/yiisoft/jquery-pjax

Asset for origin defunkt/jquery-pjax

This asset propose use original defunkt/jquery-pjax instead fork yii2 build in yiisoft/jquery-pjax, _(*1)

Installation

The preferred way to install this extension is through composer., _(*2)

add, _(*3)

"bscheshirwork/yii2-jquery-pjax-asset": "@dev"

to the require section of your composer.json file., _(*4)

Usage

@see defunkt/jquery-pjax readme for common usage, _(*5)

Use directly

First: add assets to you page;, _(*6)

<?php
bscheshirwork\y2jpa\PjaxAsset::register($this);
?>

Second: we can use $.pjax directly in JS block, _(*7)

for document notation, _(*8)

<?php
$this->registerJs(new JsExpression(<<<JS
//global settings
$.pjax.defaults.timeout = 0;
//pjax links 
//(for document; click on specific `a` inside .model-index; reload area '.model-index'; inject content from first '.model-index' match in answer)
$(document).pjax('.model-index a:not(\'[data-pjax="0"]\')', '.model-index', {fragment: '.model-index'});
//pjax forms
//(for document; submit a specific `form` inside .model-index; reload area '.model-index'; inject content from first '.model-index' match in answer)
$(document).on('submit', '.model-index form:not(\'[data-pjax="0"]\')', function (event) {
    $.pjax.submit(event, '.model-index', {fragment: '.model-index'})
})
//restore js widgets
//(for document; listen a specific action at .model-index)
$(document).on('.model-index ready pjax:end', function (event) {
    //reinit already existing yiiGridView (by default code `jQuery('w0').yiiGridView` is in <script> tag and non-disabled by comment tag)
    $('script').each(function () {
        if (!this.src) {
            $.each($(this).html().match(/jQuery\('.+'\).yiiGridView\(.+\)/g) || [], function (index, value) {
                $.globalEval(value)
            })
        }
    })
})
JS
), \yii\web\View::POS_READY);
?>

for concrete tag, _(*9)

<?php
$this->registerJs(new JsExpression(<<<JS
//global settings
$.pjax.defaults.timeout = 0;
//pjax links 
//(for selector; click on specific `a` inside .model-index; reload area '.model-index'; inject content from first '.model-index' match in answer)
$('.model-index').pjax('a:not(\'[data-pjax="0"]\')', '.model-index', {fragment: '.model-index'});
//pjax forms
//(for selector; submit a specific `form` inside .model-index; reload area '.model-index'; inject content from first '.model-index' match in answer)
$('.model-index').on('submit', 'form:not(\'[data-pjax="0"]\')', function (event) {
    $.pjax.submit(event, '.model-index', {fragment: '.model-index'})
})
//restore js widgets
//(for selector; listen a specific action at .model-index)
$('.model-index').on('ready pjax:end', function (event) {
    //reinit already existing yiiGridView (by default code `jQuery('w0').yiiGridView` is in <script> tag and non-disabled by comment tag)
    $('script').each(function () {
        if (!this.src) {
            $.each($(this).html().match(/jQuery\('.+'\).yiiGridView\(.+\)/g) || [], function (index, value) {
                $.globalEval(value)
            })
        }
    })
})
JS
), \yii\web\View::POS_READY);
?>

Note: we can re-init your js widgets like a yiiGridView, _(*10)

Note: we can check sender inside pjax:beforeSend event listener if you wish use nested pjax blocks, _(*11)

$('.model-index').on('ready pjax:beforeSend', function (event) {
    console.log(event.target)
    //...
    event.preventDefault()
})

Use as part of a your own widget

add bscheshirwork\y2jpa\PjaxAsset::register($this); to run() method of your widget, _(*12)

use your widget id as tag for build $('#id').pjax('#id a', '#id', {fragment: '#id'})expression, _(*13)

on server side we can croup content use ob_start()/ob_end_clean() mechanism in widget::begin()/widget::end(), _(*14)

Tips

For debug reason we can log a global events with fragment The 90% reasons of page reload is a missing fragment selector in answer body, _(*15)

$(document).bind('ajaxStart', function(){
    console.log('ajaxStart');
}).bind('ajaxSend', function(event, jqXHR, s){
    console.log('ajaxSend' + ' ' + s.fragment);
}).bind('ajaxSuccess', function(event, jqXHR, s, success){
    console.log('ajaxSuccess' + ' ' + s.fragment);
}).bind('ajaxError', function(event, jqXHR, s, error){
    console.log('ajaxError' + ' ' + s.fragment);
}).bind('ajaxComplete', function(event, jqXHR, s){
    console.log('ajaxComplete' + ' ' + s.fragment);
}).bind('ajaxStop', function(){
    console.log('ajaxStop');
});

$(document).on('pjax:start', function (event, xhr, options) {
    console.log('pjax:start' + ' ' + options.fragment);
}).on('pjax:complete', function (event, xhr, textStatus, options) {
    console.log('pjax:complete' + ' ' + options.fragment);
}).on('pjax:end', function (event, xhr, options) {
    console.log('pjax:end' + ' ' + xhr.status + ' ' + options.fragment);
});