Yii2 modal ajax

Выкладываем свои наработки
Ответить
Loveorigami
Сообщения: 751
Зарегистрирован: 2014.08.27, 21:54

Yii2 modal ajax

Сообщение Loveorigami » 2016.11.07, 13:39

Сделал второй релиз виджета Yii2-modal-ajax.

Он позволяет выводить содержимое форм в модальном окне, выполнять в нем валидацию и сохранение модели.
В новой версии добавлена возможность редактирования записей в гриде. Достаточно передать 2 опции selector и pjaxContainer.

Изображение

Пример для добавления записи в гриде.

Код: Выделить всё

use lo\widgets\modal\ModalAjax;

echo ModalAjax::widget([
    'id' => 'createCompany',
    'header' => 'Create Company',
    'toggleButton' => [
        'label' => 'New Company',
        'class' => 'btn btn-primary pull-right'
    ],
    'url' => Url::to(['/partner/default/create']), // Ajax view with form to load
    'ajaxSubmit' => true, // Submit the contained form as ajax, true by default

    'options' => ['class' => 'header-primary'],
    'autoClose' => true,
    'pjaxContainer' => '#grid-company-pjax'

]); 
Больше примеров на странице виджета
https://github.com/loveorigami/yii2-modal-ajax/

home_kot
Сообщения: 4
Зарегистрирован: 2017.07.24, 02:29

Re: Yii2 modal ajax

Сообщение home_kot » 2017.07.24, 04:53

Доброе время суток!
А можно, для единообразия, применить данное расширения для вывода окон без модели? Например для About я пишу:

views/about.php

Код: Выделить всё

$this->title = 'О сайте...';
$this->params['breadcrumbs'][] = $this->title;

echo ModalAjax::widget([
    'id' => 'modalAbout',
    'header' => $this->title,
    'toggleButton' => [
        'label' => 'Закрыть',
        'class' => 'btn btn-primary pull-right'
    ],
    //'url' => Url::to(['/site/users/form']), // Ajax view with form to load
    'selector' => 'site-about',
    'ajaxSubmit' => true, // Submit the contained form as ajax, true by default
    // ... any other yii2 bootstrap modal option you need
]);               

?>
<div class="site-about">
    <h1 id="page-header"><?= Html::encode($this->title) ?></h1>

    <p>
        Здесь напишем всякое разное! Но, потом.....
    </p>   
</div>
SiteController.php

Код: Выделить всё

public function actionAbout()
    {
        if (Yii::$app->request->isAjax) {
            return $this->renderAjax('about');
        } else {
            return $this->render('about');
        }
    }        
В Nav::widget ничего не меняю! Диалог не появляется....

Спасибо за консультацию!

Loveorigami
Сообщения: 751
Зарегистрирован: 2014.08.27, 21:54

Re: Yii2 modal ajax

Сообщение Loveorigami » 2017.07.24, 10:11

По идее, вы должны указать
'url' => Url::to(['/site/about']), // Ajax view
_______
Up данный виджет подгружает даные по ссылке. Вы находитесь на странице about и хотите подгрузить about?
Используйте как обычный виджет modal из коробки. Т.к modalAjax наследуется от него

https://github.com/loveorigami/yii2-mod ... ax.php#L17

home_kot
Сообщения: 4
Зарегистрирован: 2017.07.24, 02:29

Re: Yii2 modal ajax

Сообщение home_kot » 2017.07.25, 08:05

Спасибо, все получилось!

А можно для данного виджета добавить свойство draggable ?

Например так: https://gist.github.com/wellwind/a5a10222ad691d72a11c

Сам отупел совсем, несколько лет не писал под web, сейчас приходится все по новой проходить......

Спасибо!

Loveorigami
Сообщения: 751
Зарегистрирован: 2014.08.27, 21:54

Re: Yii2 modal ajax

Сообщение Loveorigami » 2017.07.25, 11:33

home_kot писал(а):
2017.07.25, 08:05
А можно для данного виджета добавить свойство draggable ?
Нет, т.к. draggable входит в Jquery UI, а я его в своих проектах не использую.
Вы можете сами подключить Jquery UI и прописать эти строки в своем скрипте. Должно работать.

home_kot
Сообщения: 4
Зарегистрирован: 2017.07.24, 02:29

Re: Yii2 modal ajax

Сообщение home_kot » 2017.07.26, 08:57

А если сделать как-то так:

Код: Выделить всё

		var _FormDrag = function(setting) {
			var form = settings.form.$;			
			// Если jquery.event.drag загружен, то делаю форму перемещаемой
			var processing = false;
			if ($.fn.drag) {
				form.drag(function(ev, dd){
					var $this = $(this);
					if (processing) return false;
					setTimeout(function(){
						processing = true;
						$this.css({
							top: dd.offsetY,
							left: dd.offsetX
						});
						processing = false;
					}, 10);
				}, { handle: settings.form.header });
			}

Loveorigami
Сообщения: 751
Зарегистрирован: 2014.08.27, 21:54

Re: Yii2 modal ajax

Сообщение Loveorigami » 2017.07.26, 10:23

У себя Вы можете делать что хотите ).
Вы же можете добавить эти пару строк в свой js и поддерживать, в случае чего.
Я же даже протестировать эти перемещения не могу...

Ответить