kdes70
@kdes70
Web developer

Popup routing или смена модельного окна?

Здравствуйте народ! Столкнулся с задачей которую не знаю как реализовать.
Есть кнопка которая открывает модельное окно с формой регистрацией на сайте.
<li><div><a id="signupButton" href="<?php echo  Url::to('/user/ajax/signup')?>">Регистрация</a></div></li>

Для модельного окна использую Magnific Popup
backend на yii2

вот код который открывает это окно
// SIGNUP
	$('#signupButton').magnificPopup({
		type: 'ajax',
		preloader: true,
		//modal: true,
		ajax:{
			settings: null,
			cursor: 'mfp-ajax-cur',
			tError: '<a href="%url%">The content</a> could not be loaded.'
		},
		closeBtnInside: true,
		callbacks: {
			beforeOpen: function() {
				if($(window).width() < 700) {
					this.st.focus = false;
				} else {
					this.st.focus = '#name';
				}
			}
		}
	});

происходит ajax запрос на сервер по адресу /user/ajax/signup
public function actionSignup()
    {
        $model = new SignupForm($this->module->defaultRole);
            if ($model->load(Yii::$app->request->post())) {
                if ($user = $model->signup()) {
                    Yii::$app->getSession()->setFlash('success', Module::t('module', 'FLASH_EMAIL_CONFIRM_REQUEST'));
                    return $this->goHome();
                }
            } else {
                return $this->renderAjax('signup', [
                    'model' => $model,
                ]);
            }
    }

тут возвращается шаблон самой формы регистрации и подставляется в модальное окно
<div class="user-ajax-signup kd-modal">
    <h1><?= Html::encode($this->title) ?></h1>

    <p><?= Module::t('module', 'PLEASE_FILL_FOR_SIGNUP') ?></p>

    <div class="row">
        <div class="col-lg-12">
            <?php $form = ActiveForm::begin([
                'id' => 'form-signup',
                'enableAjaxValidation' => true,
                'enableClientValidation' => true,
            ]); ?>
            <?= $form->field($model, 'username') ?>
            <?= $form->field($model, 'email') ?>
            <?= $form->field($model, 'password')->passwordInput() ?>
            <?= $form->field($model, 'verifyCode')->widget(Captcha::className(), [
                'captchaAction' => '/user/default/captcha',
                'template' => '<div class="row"><div class="col-lg-6">{image}</div><div class="col-lg-6">{input}</div></div>',
            ]) ?>
            <p>Регистрируясь, я принимаю установленные Dicorosov.net <a class="link-base" href="#">Условия предоставления услуг.</a></p>
            <div class="form-group">
                <?= Html::submitButton(Module::t('module', 'USER_BUTTON_SIGNUP'), ['class' => 'dr-btn dr-btn-default', 'name' => 'signup-button']) ?>
            </div>
            <hr>
            <div class="row">
                <div class="col-lg-6">
                    <p>Вы уже на зарегистрырованы?</p>
                </div>
                <div class="col-lg-6">
                    <div class="form-group">
                        <?= Html::a(Module::t('module', 'USER_BUTTON_LOGIN'),
                            '/user/ajax/login',
                            ['id' => 'loginButton', 'class' => 'dr-btn dr-btn-border ']); ?>
                    </div>
                </div>
            </div>
            <?php ActiveForm::end(); ?>
        </div>
    </div>
</div>

Получается вот такое окошка
b364a35c06ff4f10999c24d321ae5c08.png

И так вот в чем проблема?!!

как видно на картинке в низу есть кнопка "ВХОД" по нажатию на которую должно закрыться форма регистрации и открыться форма входа, так же в модельном окне.

кнопка сделана по аналогии как и регистрация
<?= Html::a(Module::t('module', 'USER_BUTTON_LOGIN'),
                            '/user/ajax/login',
                            ['id' => 'loginButton', 'class' => 'dr-btn dr-btn-border ']); ?>

по нажатию на #loginButton так же уходит ajax зарос по адресу '/user/ajax/login',
где на сервере возвращается шаблон формы входа

$('#loginButton').on('click', function () {
		// LOGIN
		this.magnificPopup({
			type: 'ajax',
			//modal: true,
			preloader: true,
			ajax:{
				settings: null,
				cursor: 'mfp-ajax-cur'
			},
			closeBtnInside: true,
			callbacks: {
				beforeOpen: function() {
					if($(window).width() < 700) {
						this.st.focus = false;
					} else {
						this.st.focus = '#name';
					}
				}
			}
		});
	});


но это не срабатывает! происходит просто переход по странице по адресу /user/ajax/login
где в теле странице появляется форма входа, при этом не подгружаются doctype.

Подскажите как с этим бороться!??
  • Вопрос задан
  • 262 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
23 нояб. 2024, в 01:31
1000 руб./за проект
23 нояб. 2024, в 00:16
2000 руб./за проект