AjaxForm в модальном Ajax окне
Приветствую!
Мой «101» вопрос про ajaxform )
Задача: выводить форму в модальном окне, контент которого загружается ajax'ом.
Что смог сделать на данном этапе благодаря документации и инструкциям с этого ресурса:
1. Если форма просто в теле документа, то работает всё ок. Окно «своё», т.е. не bootstrap
js которые открывает/закрывает окно и работает с формой
2. Научился грузить статичные документы в модальное окно через ajax. Спасибо вот этому комменту
js (тестировал только контент подгружать)
если в тело документа прописать чанк — получаю код вызова чанка, а не его содержимое
если в тело дока прописать вызов форму — результат анологичный первому
если в тело докуменда вставить саму форму — капча не грузится, да и форма не работает
Я так понимаю форма не подключается, подскажите как это можно реализовать, её нужно как-то подключать после подгрузки html каркаса?
P.s. про дополнение quickview знаю, не хочу его ставить, надо решение с минимумом кода, без лишних функций
Мой «101» вопрос про ajaxform )
Задача: выводить форму в модальном окне, контент которого загружается ajax'ом.
Что смог сделать на данном этапе благодаря документации и инструкциям с этого ресурса:
1. Если форма просто в теле документа, то работает всё ок. Окно «своё», т.е. не bootstrap
js которые открывает/закрывает окно и работает с формой
var overlay = $('#modal-overlay');
var modalwindow = $('#modal-window');
var modalclose = $('#modal-window-close, #modal-overlay');
var modalform = $('form#modalform');
$(document).ready(function() {
$('#callbutton').click( function(event){
overlay.fadeIn(200,
function(){
modalwindow
.css('display', 'block')
.animate({opacity: 1}, 200);
});
});
modalclose.click( function(){
modalwindow
.animate({opacity: 0}, 200,
function(){
modalwindow.css('display', 'none');
overlay.fadeOut(200);
$("#modal-success-msg").remove();
}
);
modalform.find('.error').html('');
modalform.find('.error').removeClass('error');
modalform[0].reset();
});
});
$(document).on('af_complete', function(event, response) {
if (response.success) {
var msgPaste = $( '<div id="modal-success-msg"><span>' + response.message + '</span></div>' );
msgPaste.appendTo('div.modal-window-wrap');
}
});
var AjaxForm = {
initialize: function (afConfig) {
if (!jQuery().ajaxForm) {
document.write('<script src="' + afConfig['assetsUrl'] + 'js/lib/jquery.form.min.js"><\/script>');
}
$(document).off('submit', afConfig['formSelector']).on('submit', afConfig['formSelector'], function (e) {
$(this).ajaxSubmit({
dataType: 'json',
data: {pageId: afConfig['pageId']},
url: afConfig['actionUrl'],
beforeSerialize: function (form) {
form.find(':submit').each(function () {
if (!form.find('input[type="hidden"][name="' + $(this).attr('name') + '"]').length) {
$(form).append(
$('<input type="hidden">').attr({
name: $(this).attr('name'),
value: $(this).attr('value')
})
);
}
})
},
beforeSubmit: function (fields, form) {
//noinspection JSUnresolvedVariable
if (typeof(afValidated) != 'undefined' && afValidated == false) {
return false;
}
form.find('.error').html('');
form.find('.error').removeClass('error');
form.find('input,textarea,select,button').attr('disabled', true);
return true;
},
success: function (response, status, xhr, form) {
form.find('input,textarea,select,button').attr('disabled', false);
response.form = form;
$(document).trigger('af_complete', response);
if (!response.success) {
AjaxForm.Message.error(response.message);
if (response.data) {
var key, value, focused;
for (key in response.data) {
if (response.data.hasOwnProperty(key)) {
if (!focused) {
form.find('[name="' + key + '"]').focus();
focused = true;
}
value = response.data[key];
form.find('.error_' + key).html(value).addClass('error');
form.find('[name="' + key + '"]').addClass('error');
}
}
}
}
else {
AjaxForm.Message.success(response.message);
form.find('.error').removeClass('error');
form[0].reset();
//noinspection JSUnresolvedVariable
if (typeof(grecaptcha) != 'undefined') {
//noinspection JSUnresolvedVariable
grecaptcha.reset();
}
}
}
});
e.preventDefault();
return false;
});
$(document).on('keypress change', '.error', function () {
var key = $(this).attr('name');
$(this).removeClass('error');
$('.error_' + key).html('').removeClass('error');
});
$(document).on('reset', afConfig['formSelector'], function () {
$(this).find('.error').html('');
});
}
};
//noinspection JSUnusedGlobalSymbols
AjaxForm.Message = {
success: function (message, sticky) {
if (message) {
}
},
error: function (message, sticky) {
if (message) {
}
},
info: function (message, sticky) {
if (message) {
}
},
};
2. Научился грузить статичные документы в модальное окно через ajax. Спасибо вот этому комменту
js (тестировал только контент подгружать)
$(document).on('click','a#callbutton',function(e){
e.preventDefault();
var id = $(this).data('id') || 0;
$.post("/assets/ajax.php",{action:"getContent",id:id}, function(response) {
response.success = response.success || false;
if (response.success) {
$('.modal-window-wrap','#modal-window').html(response.content);
}
}, 'json');
});
php<?php
if ($_SERVER['HTTP_X_REQUESTED_WITH'] != 'XMLHttpRequest' || empty($_REQUEST['action'])) {exit();}
$action = $_REQUEST['action'];
define('MODX_API_MODE', true);
require_once dirname(dirname(__FILE__)).'/index.php';
$modx->getService('error','error.modError');
$modx->getRequest();
$modx->setLogLevel(modX::LOG_LEVEL_ERROR);
$modx->setLogTarget('FILE');
$modx->error->message = null;
$output = '';
switch ($action) {
case 'getContent':
$id = isset($_POST['id']) ? (int) $_POST['id'] : 0;
if (empty($id)) {
exit();
};
$object = $modx->getObject('modResource',$id);
$output = array();
$output['content'] = $object->get('content');
$output['pagetitle'] = $object->get('pagetitle');
$output['success'] = true;
// И выводить в JSON
exit($modx->toJSON($output));
$maxIterations= (integer) $modx->getOption('parser_max_iterations', null, 10);
$modx->getParser()->processElementTags('', $output, false, false, '[[', ']]', array(), $maxIterations);
$modx->getParser()->processElementTags('', $output, true, true, '[[', ']]', array(), $maxIterations);
}
@session_write_close();
exit($output);
Пробовал объединить, но:если в тело документа прописать чанк — получаю код вызова чанка, а не его содержимое
если в тело дока прописать вызов форму — результат анологичный первому
если в тело докуменда вставить саму форму — капча не грузится, да и форма не работает
Я так понимаю форма не подключается, подскажите как это можно реализовать, её нужно как-то подключать после подгрузки html каркаса?
P.s. про дополнение quickview знаю, не хочу его ставить, надо решение с минимумом кода, без лишних функций
Комментарии: 9
так это… местами поменяй
$maxIterations= (integer) $modx->getOption('parser_max_iterations', null, 10);
$modx->getParser()->processElementTags('', $output, false, false, '[[', ']]', array(), $maxIterations);
$modx->getParser()->processElementTags('', $output, true, true, '[[', ']]', array(), $maxIterations);
exit($modx->toJSON($output));
ато у тебя после exit ничего же не отрабатывает
спасибо, исправил, но как бы ситуация в целом никак не поменялась
AjaxForm при вызове сниппета формирует конфиг и запускается через метод AjaxForm.initialize, его можно увидеть в коде страницы.
Соответственно, наверное, нужно при загрузке формы в окно перевызвать этот метод.
Не проверял и не уверен что будет работать.
JS
PHP
Соответственно, наверное, нужно при загрузке формы в окно перевызвать этот метод.
Не проверял и не уверен что будет работать.
JS
$(document).on('click', 'a#callbutton', function() {
var id = $(this).data('id');
$.ajax({
url: '/assets/ajax.php',
method: 'POST',
dataType: 'json',
data: {
action: 'getContent',
id: id
}
})
.done(function(response) {
if (response.success) {
$('.modal-window-wrap','#modal-window').html(response.data.content);
// Тут надо перевызвать AjaxForm
AjaxForm.initialize(response.config);
} else {
AjaxForm.Message.error(response.message);
}
});
return false;
});
PHP
<?php
if ($_SERVER['HTTP_X_REQUESTED_WITH'] != 'XMLHttpRequest' || empty($_REQUEST['action'])) {exit();}
define('MODX_API_MODE', true);
require_once dirname(dirname(__FILE__)).'/index.php';
$modx->getService('error','error.modError');
$modx->getRequest();
$modx->setLogLevel(modX::LOG_LEVEL_ERROR);
$modx->setLogTarget('FILE');
$modx->error->message = null;
if (isset($_REQUEST['action']) && $_REQUEST['action'] == 'getContent') {
$result = array(
'success' => false
);
$id = $_REQUEST['id'];
if (!$id) {
$result['message'] = 'Не указан ID ресурса';
return json_encode($result, true);
}
if (!$modx->loadClass('ajaxform', MODX_CORE_PATH . 'components/ajaxform/model/ajaxform/', false, true)) {
return false;
}
$AjaxForm = new AjaxForm($modx, array());
$AjaxFormConfig = array(
'assetsUrl' => $AjaxForm->config['assetsUrl'],
'actionUrl' => str_replace('[[+assetsUrl]]', $AjaxForm->config['assetsUrl'], $AjaxForm->config['actionUrl']),
'closeMessage' => $AjaxForm->config['closeMessage'],
'formSelector' => "form.{$AjaxForm->config['formSelector']}",
'pageId' => $id
);
if ($resourse = $modx->getObject('modResource', $id)) {
$content = $resourse->get('content');
$maxIterations = (integer) $modx->getOption('parser_max_iterations', null, 10);
$modx->getParser()->processElementTags('', $content, false, false, '[[', ']]', array(), $maxIterations);
$modx->getParser()->processElementTags('', $content, true, true, '[[', ']]', array(), $maxIterations);
$result['success'] = true;
$result['config'] = $AjaxFormConfig;
$result['data'] = array(
'pagetitle' => $resourse->get('pagetitle'),
'content' => $content
);
} else {
$result['message'] = 'Такого ресурса не существует';
}
return json_encode($result, true);
}
Да, видел, так и думал, проблема именно в том, не знаю как технически сделать.
Ваш вариант попробовал: контент вообще не подтягивается. Окно остаётся пустым, да и ajaxform не перевызывается.
Ещё вопрос: как именно вызвать форму в теле документа? чанк указывать или форму из чанка вставлять? или может есть вариант без документа напрямую сниппет ajaxform вызвать в окно?
Ваш вариант попробовал: контент вообще не подтягивается. Окно остаётся пустым, да и ajaxform не перевызывается.
Ещё вопрос: как именно вызвать форму в теле документа? чанк указывать или форму из чанка вставлять? или может есть вариант без документа напрямую сниппет ajaxform вызвать в окно?
В документ можно вставить вызов чанка с формой.
Самый простой вариант — это сделать скрытое модальное окно с формой прямо на странице, а по клику на кнопку/ссылку показывать окно, без всяких ajax.
Самый простой вариант — это сделать скрытое модальное окно с формой прямо на странице, а по клику на кнопку/ссылку показывать окно, без всяких ajax.
У меня сейчас как раз и сделано через «самый простой вариант», но хочется всё на ajax завязать
У меня на странице несколько разных форм обратной связи. После работы AjaxForm в коде страницы выводится код всех форм. В результате увеличивается время загрузки страницы. Есть ли решение, которое позволяет через Ajax выводить нужную форму, чтобы, при этом код не рендерился в код страницы при загрузке, а вызывался только тогда, когда нужно?
Нашли какое-нибудь решение?
Быстро не нашел. Поэтому оставил все как есть.
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.