Модальное окно и JS

Общие вопросы по использованию второй версии фреймворка. Если не знаете как что-то сделать и это про Yii 2, вам сюда.
Ответить
dymsonn
Сообщения: 77
Зарегистрирован: 2018.06.13, 15:37

Модальное окно и JS

Сообщение dymsonn »

Здравствуйте. Подскажите пожалуйста, нашел на просторах Инета пример вывода модального окна и он точь в точь подходит к моему случаю. Только вот он не работает у меня должным образом. Где я делаю не так?
Новое действие в контроллере:

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

public function actionAdd() {
   $ model = new Company();

if ($model->load(Yii::$app->request->post()) && $model->save()) {
    echo 1;
} else {
    return $this->renderAjax('create', [
        'model' => $model,
    ]);
};

}
Кнопка в _form.php

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

 <?= Html::button('<span class="glyphicon glyphicon-plus"></span> Новая компания', ['value' => Url::to('/web/company/add'), 'class' => 'btn btn-success', 'id' => 'modalButton']) ?>
Модальное окно в _form.php

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

use yii\bootstrap\Modal;
use yii\widgets\Pjax;

<?php
    Modal::begin([
        'header' => '<h4>Company<h4>',
        'id' => 'modal',
        'size' => 'modal-lg',
    ]);
    echo "<div id='modalContent'></div>";
    Modal::end();
?>
Дальше было написано применить pjax к списку компаний. Я сделал так:

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

<?php Pjax::begin(['id' => 'companyList']); ?>
    <?= $form->field($model, 'id_company')->widget(Select2::className(), [
        'data' => ArrayHelper::map(Company::find()->all(), 'id', 'name'),
        'options' => [
            'placeholder' => 'Выберете компанию',
        ],
        'pluginOptions' => [
            'allowClear' => true
        ],
    ]) ?>
    <?php Pjax::end(); ?>
Изменить активы /AppAsset.php:

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

public $js = [
    'js/main.js'
];
Создайте папку и файл js web/js/main.js:

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

$(function(){
    $('#modalButton').click(function(){
        $('#modal').modal('show')
            .find('#modalContent')
            .load($(this).attr('value'));
    });
});
Добавьте script в вид компании _form.php:

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

<?php

$script = <<< JS

$('form#{$model->formName()}').on('beforeSubmit', function(e)
{
    var \$form = $(this);
    $.post(
        \$form.attr("action"), // serialize yii2 form
        \$form.serialize()
    )
        .done(function(result) {
        if(result == 1)
        {
            $(document).find('#modal').modal('hide');
            $.pjax.reload({container:'#companyList'});
            $(document).on('pjax:complete', function() {
              $('#customer-company_id option:last-child').attr('selected', true);
            })
        }else
        {
            $(\$form).trigger("reset");
            $("#message").html(result.message);
        }
        }).fail(function()
        {
            console.log("server error");
        });
    return false;
});

JS;

$this->registerJs($script);

?>
У меня модальное окно работает. Данные через него в базу заносятся. Только после нажатия на кнопку добвления в модальном окне, переход по адресу web/company/add где пустая страница и выводится единица. Я так понимаю JS не отрабатывает. Или я его напсал не туда.
andku83
Сообщения: 988
Зарегистрирован: 2016.07.01, 10:24
Откуда: Харьков

Re: Модальное окно и JS

Сообщение andku83 »

Последний блок кода с js должен быть в view create.php, которая вызывается в первом приведенном блоке кода.
dymsonn
Сообщения: 77
Зарегистрирован: 2018.06.13, 15:37

Re: Модальное окно и JS

Сообщение dymsonn »

Результат тот же. Ничего не изменилось. Подозреваю что вот эта строка

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

$('form#{$model->formName()}').on('beforeSubmit', function(e)
не работает.Может кто подсказать почему?
masson
Сообщения: 545
Зарегистрирован: 2012.07.03, 15:59

Re: Модальное окно и JS

Сообщение masson »

В HTML-е что генерится в этом месте?
Может двойные кавычки нужны?

Или переменную заранее определите :

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

<?php 
$formName = $model->formName();
?>

<script>
$("#$formName").on('beforeSubmit', function(e)
</script>
dymsonn
Сообщения: 77
Зарегистрирован: 2018.06.13, 15:37

Re: Модальное окно и JS

Сообщение dymsonn »

двойные кавычки и объявление переменной не помогло. тоже самое, выводится единица.
В HTML-е выводит form#Company.
И кстати, так

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

<script>
...
</script>
не работает.
Заворачиваю в <?php>
И еще назначение обратных слешей на понимаю перед переменными. Вроде экранирование, но и с ними и без них ничего не меняется.
andku83
Сообщения: 988
Зарегистрирован: 2016.07.01, 10:24
Откуда: Харьков

Re: Модальное окно и JS

Сообщение andku83 »

покажите ваш create.php
dymsonn
Сообщения: 77
Зарегистрирован: 2018.06.13, 15:37

Re: Модальное окно и JS

Сообщение dymsonn »

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

<?php

use yii\helpers\Html;

/* @var $this yii\web\View */
/* @var $model app\models\Company */

$this->title = 'Создать';
$this->params['breadcrumbs'][] = ['label' => Company', 'url' => ['index']];
$this->params['breadcrumbs'][] = $this->title;
?>
<div class="сompany-create">

    <!--<h1><?= Html::encode($this->title) ?></h1>-->

    <?= $this->render('_form', [
        'model' => $model,
    ]) ?>

</div>


<?php
$script = <<< JS
\$("form#{$model->formName()}").on('beforeSubmit', function(e)
{
var \$form = $(this);
$.post(
\$form.attr("action"), // serialize yii2 form
\$form.serialize()
)
.done(function(result) {
if(result == 1)
{
$(document).find('#modal').modal('hide');
$.pjax.reload({container:'#сompanyList'});
$(document).on('pjax:complete', function() {
$('#object-id_company option:last-child').attr('selected', true);
})} else
{
$(\$form).trigger("reset");
$("#message").html(result.message);
}
}).fail(function()
{
console.log("server error");
});
return false;
});
JS;

$this->registerJs($script);

?>
Это если перенести JS как советовали выше.
andku83
Сообщения: 988
Зарегистрирован: 2016.07.01, 10:24
Откуда: Харьков

Re: Модальное окно и JS

Сообщение andku83 »

$("form#{$model->formName()}") - этим кодом вы хотите повесить обработчик на форму, а во всем топике у вас форма нигде не создается...
dymsonn
Сообщения: 77
Зарегистрирован: 2018.06.13, 15:37

Re: Модальное окно и JS

Сообщение dymsonn »

andku83 писал(а): 2018.08.10, 18:40 $("form#{$model->formName()}") - этим кодом вы хотите повесить обработчик на форму, а во всем топике у вас форма нигде не создается...
Я вообще не понимаю как работает beforeSubmit. Например $('#modal').on('click', function(e){alert 'Работает'}. А $('#modal').on('beforeSubmit', function(e) {'сюда не попадает'} после нажатия кнопки в модальном окне.
andku83
Сообщения: 988
Зарегистрирован: 2016.07.01, 10:24
Откуда: Харьков

Re: Модальное окно и JS

Сообщение andku83 »

beforeSubmit - event для form, а не для modal.
dymsonn
Сообщения: 77
Зарегистрирован: 2018.06.13, 15:37

Re: Модальное окно и JS

Сообщение dymsonn »

andku83 писал(а): 2018.08.14, 17:44 beforeSubmit - event для form, а не для modal.
Понял. Но уже получилось вот так

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

$('#modalContent').on('submit', function()
Вроде работает как нужно. Только вот данные постом не получается отправить.
dymsonn
Сообщения: 77
Зарегистрирован: 2018.06.13, 15:37

Re: Модальное окно и JS

Сообщение dymsonn »

Выше не правильно написал. Теперь понял как работает. Протестировал вот так

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

$('form').on('submit', function()
Только в этом случае submit срабатывает на всех формах естественно. Подскажите где задать имя форме
andku83 писал(а): 2018.08.10, 18:40 $("form#{$model->formName()}") - этим кодом вы хотите повесить обработчик на форму, а во всем топике у вас форма нигде не создается...
andku83
Сообщения: 988
Зарегистрирован: 2016.07.01, 10:24
Откуда: Харьков

Re: Модальное окно и JS

Сообщение andku83 »

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

<?php $form = ActiveForm::begin([
	'id' => 'super-create',
	...
]) ?>


$('#super-create').on('submit', function(){});
//or
$('#{$form->id}').on('submit', function(){});
dymsonn
Сообщения: 77
Зарегистрирован: 2018.06.13, 15:37

Re: Модальное окно и JS

Сообщение dymsonn »

Работает только вот так

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

$('#{$model->formName()}').on('submit', function(e)
Только теперь проблема, собственно она и была. Теперь скрипт отрабатывает и когда форма в модальном окне открывается и когда просто views/create. Как разграничить эти действия не пойму. То ли id не задавать, если это не модальное окно, то ли в контроллере условие какое то. Только у же всё перепробовал. В каком случае views/view выводить не пойму.

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

public function actionAdd()
    {
        $model = new Company();

        if ($model->load(Yii::$app->request->post()) && Yii::$app->request->isAjax) {
            if ($model->save()) {
                return 1;
            }
        }
        if (Yii::$app->request->isAjax) {
            return $this->renderAjax('create', [
                'model' => $model,
            ]);
        } else {
            return $this->render('create', [
                'model' => $model,
            ]);

        }
    }
andku83
Сообщения: 988
Зарегистрирован: 2016.07.01, 10:24
Откуда: Харьков

Re: Модальное окно и JS

Сообщение andku83 »

выкладывайте весь свой код куда-то, иначе тяжело увидеть что там где и когда поменялось
dymsonn
Сообщения: 77
Зарегистрирован: 2018.06.13, 15:37

Re: Модальное окно и JS

Сообщение dymsonn »

Если б мог, сразу так сделал. Всё на офлайн машине. Такие правила)))
dymsonn
Сообщения: 77
Зарегистрирован: 2018.06.13, 15:37

Re: Модальное окно и JS

Сообщение dymsonn »

Это форма Объекта, где нужно добавить Компанию в селект.

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

 <?php Pjax::begin(['id' => 'companyList']); ?>
    <?= $form->field($model, 'id_company')->widget(Select2::className(), [

        'data' => ArrayHelper::map(Company::find()->all(), 'id', 'name'),
        'options' => [
            'placeholder' => 'Выберете компанию',
        ],
        'pluginOptions' => [

            'allowClear' => true
        ],
    ]) ?>
 <?php Pjax::end(); ?>

    <?= Html::button('<span class="glyphicon glyphicon-plus"></span> Новая компания', ['value' => Url::to('/web/company/add'), 'class' => 'btn btn-success', 'id' => 'modalButton']) ?>

    <?php Modal::begin([
        'header' => '<h4>Новая Компания</h4>',
        'id' => 'modal',
        'size' => 'modal-md',
        //'footer' => '',
    ]);
    echo "<div id='modalContent'></div>";
    Modal::end();
    ?>
Это скрипт в views/company/create, который отрабатывает при нажатии кнопки в модальном окне. При чем beforeSubmit чудным образом заработало.

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

$script = <<< JS
$('form#{$model->formName()}').on('beforeSubmit', function(e)
{ 
    e.preventDefault();
    var form = $(this);
    $.ajax({
        url:'/web/company/add',
        type:"POST", 
        data:form.serialize(),
        success:function() {
                $(document).find('#modal').modal('hide');
                $.pjax.reload({container:'#companyList'});
                $(document).on('pjax:complete', function() {
                $('#object-id_company option:last').attr('selected', true).trigger('change');    
        })},
        error: function() {
            alert ('Error!');
        }
    })
return false;
});
JS;
$this->registerJs($script);
?>
Так задаю id в файле company/_form для формы модального окна.

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

<?php $form = ActiveForm::begin([
        'id' => $model->formName()
    ]); ?>
А это контроллер CompanyController

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

public function actionAdd()
    {
        $model = new Company();

        if ($model->load(Yii::$app->request->post()) && Yii::$app->request->isAjax) {
            $model->save();
        } else {
            return $this->renderAjax('create', [
                'model' => $model,
            ]);
        }
    }
Вот и получается, что по 'id' => $model-> formName beforeSubmit срабатывает и в модальном окне и в самой форме views/company/create.
dymsonn
Сообщения: 77
Зарегистрирован: 2018.06.13, 15:37

Re: Модальное окно и JS

Сообщение dymsonn »

Может тут сценарии добавить нужно? Если модальное окно, то id присваивается и соответственно скрипт срабатывает. Если просто вьюха открылась, то id не присваивается, а значит отправляется обычный запрос на добавление и редирект на добавленную запись. Только как это в коде прописать...?
andku83
Сообщения: 988
Зарегистрирован: 2016.07.01, 10:24
Откуда: Харьков

Re: Модальное окно и JS

Сообщение andku83 »

andku83 писал(а): 2018.08.16, 14:54 выкладывайте весь свой код куда-то, иначе тяжело увидеть что там где и когда поменялось
по крайней мере все файлы которые учавствуют в процессе, из ваши обрывки в голове тяжело собирать
Ответить