Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bscheshirwork/yii2-jquery-pjax-asset
Asset for the origin https://github.com/defunkt/jquery-pjax instead of https://github.com/yiisoft/jquery-pjax
https://github.com/bscheshirwork/yii2-jquery-pjax-asset
Last synced: about 1 month ago
JSON representation
Asset for the origin https://github.com/defunkt/jquery-pjax instead of https://github.com/yiisoft/jquery-pjax
- Host: GitHub
- URL: https://github.com/bscheshirwork/yii2-jquery-pjax-asset
- Owner: bscheshirwork
- Created: 2018-07-27T09:44:10.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-08-17T09:04:51.000Z (over 6 years ago)
- Last Synced: 2024-06-06T21:15:50.246Z (7 months ago)
- Language: PHP
- Size: 2.93 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Asset for origin defunkt/jquery-pjax
This asset propose use original [defunkt/jquery-pjax](https://github.com/defunkt/jquery-pjax) instead
fork [yii2 build in yiisoft/jquery-pjax](https://github.com/yiisoft/jquery-pjax)
## Installation
The preferred way to install this extension is through [composer](http://getcomposer.org/download/).
add
```
"bscheshirwork/yii2-jquery-pjax-asset": "@dev"
```
to the require section of your `composer.json` file.
## Usage
@see [defunkt/jquery-pjax readme](https://github.com/defunkt/jquery-pjax) for common usage
### Use directly
First: add assets to you page;
```php
```
Second: we can use `$.pjax` directly in JS block
for document notation
```php
registerJs(new JsExpression(<< 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
```php
registerJs(new JsExpression(<< 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`
>Note: we can check sender inside `pjax:beforeSend` event listener if you wish use nested pjax blocks
```js
$('.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
use your widget `id` as tag for build `$('#id').pjax('#id a', '#id', {fragment: '#id'})`expression
on server side we can croup content use `ob_start()`/`ob_end_clean()` mechanism in `widget::begin()`/`widget::end()`
### 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
```js
$(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);
});
```