digitv/yii2live

Yii2 Live package

Installs: 50

Dependents: 0

Suggesters: 0

Security: 0

Stars: 0

Watchers: 2

Forks: 0

Open Issues: 0

Type:yii2-extension

1.2.2 2020-02-07 13:49 UTC

This package is auto-updated.

Last update: 2022-07-22 13:12:11 UTC


README

This extension helps you with AJAX links, forms and modals.

Application AJAX response is divided into:

  • JS/CSS files;
  • inline JS/CSS;
  • Page widgets output;
  • JS commands.

And all of these things are processed separately. So you can return only few javascript commands and no more else, or just one widget (as old good Pjax), or whole page, but only widgets, state of those were changed.

For example your Nav widget can decide what to do by itself - render widget fully or just change active link. There are special widget states for this.

Creating AJAX link

echo \digitv\yii2live\helpers\Html::a('Ajax link', ['action'])
    ->ajax(true)
    ->context(Yii2Live::CONTEXT_TYPE_PARTIAL)
    ->pushState(false)
    ->requestMethod('post')
    ->confirm('Confirm message');
  • Link is AJAX enabled (ajax(true)),
  • using a partial context context(Yii2Live::CONTEXT_TYPE_PARTIAL),
  • page url is not changed on click (->pushState(false)),
  • request method is POST (requestMethod('post')),
  • and using confirm message (confirm('Confirm message')).

Creating HtmlContainer like a Pjax

...
<?php \digitv\yii2live\widgets\PjaxContainer::begin(['id' => 'test-wrapper']) ?>
    <?= \yii\grid\GridView::widget([
        ...
    ]) ?>
<?php \digitv\yii2live\widgets\PjaxContainer::end() ?>
...

All links inside this container will be AJAX enabled. Search form, that will update this container is looks like this:

<?php $form = \digitv\yii2live\components\ActiveForm::begin([
    'id' => 'test-search-form',
    'action' => ['index'],
    'method' => 'get',
])->context('test-wrapper'); ?>
...
<?php \digitv\yii2live\components\ActiveForm::end(); ?>

or this

<?php $form = ActiveForm::begin([
    'id' => 'test-search-form',
    'action' => ['index'],
])->ajax(true)
    ->requestMethod('get')
    ->context('test-wrapper'); ?>
...
<?php ActiveForm::end(); ?>

Using JS commands

...
    public function actionTest() {
        $live = Yii2Live::getSelf();
        $content = $this->render('test');
        if($live->isLiveRequest()) {
            $cmd = $live->commands();
            return $cmd->jHtml('#insert-selector', '<div>New HTML!</div>')
                ->jRemove('#remove-selector')
                ->modalBody($content)
                ->modalTitle('Modal title')
                ->messageSuccess('Success message!');
        } else {
            return $content;
        }
    }
...
  • jHtml - jQuery.html()
  • jRemove - jQuery.remove()
  • modalBody - Set modal body content
  • modalTitle - Set modal title content
  • messageSuccess - Show success message to user

There are much more JS commands that you can use (@see in digitv\yii2live\components\JsCommand)

Config options

Option Description
enable Global enabled flag
enableLiveLoad Enable "live" request for each link and form
enableReplaceAnimation Enable replace animation for each widget
enableLoadingOverlay Enable loading animation as animated overlay
headerName Header name used for "request ID" sending
headerNameContext Header name used for "context ID" sending
linkSelector jQuery selector for links (only when enableLiveLoad active)
linkSelectorAjax jQuery selector for links
formSelector jQuery selector for forms (only when enableLiveLoad active)
formSelectorAjax jQuery selector for forms
fieldSelectorAjax jQuery selector for form fields (change event)
messageAdapter Name of message adapter. Used to show messages for user (alert or notify)
modalDefaultSelector jQuery selector for default modal popup
modalDefaultRender Render default modal or not
modalDefaultId Default modal ID
modalDefaultSize Default modal size (sm/lg or empty)
modalDefaultWithFooterClose Show close button in modal footer