Не закрывать модальное окно после отправки сообщения. Bootstrap modal + FormLister

На одном сайте работает, на другом нет (вёрстки разные и набор JS-скриптов тоже). Не пойму почему.

Смысл в том, чтобы модальное окно не закрывалось, а отображало здесь же чанк tplThank.

Форма вызывается так:

<div class="modal-contact">
	<a href="#" class="btn-home-contact">
		<a href="#" role="button" data-toggle="modal" data-target="#modal-contact">
			<div class="contact-button">
				<i class="far fa-comments fa-3x"></i>
				<span class="d-block">Связаться с нами</span>
			</div>
		</a>
 <a name="cut"></a> 	</a>
</div>
<!-- MODAL CONTACT -->
<div class="modal fade" id="modal-contact" tabindex="-1" role="dialog" aria-labelledby="ModalContact" aria-hidden="true">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title text-uppercase">E-mail</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">×</span>
				</button>
			</div>
			<div class="modal-body">
				[!FormLister?
				&formid=`basic`
				&rules=`{
				"name":{
				"required":"Mandatory field: Name"
				},
				"email":{
				"required":"Mandatory field: E-mail",
				"email":"E-mail is not correct"
				},
				"message":{
				"required":"Mandatory field: Message"
				}
				}`
				&formTpl=`tplForm`
				&successTpl=`tplThank`
				&to=`тут_была@моя.почта`
				&subject=`Страница: [*pagetitle*]`
				&reportTpl=`tplReport`
				&errorTpl=`@CODE:<p class="text-danger pb-0">[+message+]</p>`
				!]
			</div>
		</div>
	</div>
</div>
<!-- END MODAL CONTACT -->


В чанке tplForm:

[+name.error+]
[+email.error+]
[+message.error+]
[+form.messages+]
<form class="pb-3" method="post" action="[~[*id*]~]" name="Form" id="Form">
	<input value="" name="special" class="special" type="text" eform="Antispam:date:0" style="display:none;">
	<input type="hidden" name="formid" value="basic">
	<div class="input-group pb-1">
		<span class="input-group-addon px-3" id="basic-addon1"><i class="far fa-user"></i></span>
		<input name="name" value="[+name.value+]" type="text" class="form-control" id="InputName"
			   aria-describedby="nameHelp"
			   placeholder="Ваше имя *">
	</div>
	<div class="input-group pb-1">
		<span class="input-group-addon px-3" id="basic-addon2"><i class="far fa-envelope"></i></span>
		<input name="email" value="[+email.value+]" type="email" class="form-control" id="InputEmail"
			   aria-describedby="emailHelp"
			   placeholder="E-mail *">
	</div>
	<div class="input-group pb-1">
		<span class="input-group-addon px-3" id="basic-addon3"><i class="fas fa-phone-volume"></i></span>
		<input name="phone" value="[+phone.value+]" type="tel" class="form-control" id="InputTel"
			   aria-describedby="telHelp"
			   placeholder="Телефон">
	</div>
	<div class="form-group">
		<textarea name="message" class="form-control" id="Message" rows="6"
				  placeholder="Сообщение *">[+message.value+]</textarea>
	</div>
	<button type="submit" name="submit" id="submit" class="btn btn-primary float-right text-uppercase">Отправить</button>
</form>


В футере после всех jquery.js + bootstrap.js сделал это:

<script>
	$(function(){
		$(document).on("submit","#Form",function(e){
			e.preventDefault();
			var m_method=$(this).attr('method');
			var m_action=$(this).attr('action');
			var m_data=$(this).serialize();
			$.ajax({
				type: m_method,
				url: m_action,
				data: m_data,
				resetForm: 'true',
				success: function(result){
					var data = $(result).find("#modal-contact").html();
					$("#modal-contact").html(data);
				}
			});
		});
	});
</script>


Почему не работает? Подскажите, пожалуйста.

Спасибо.

6 комментариев

avatar
Ребят, помогите, пожалуйста. Ведь для многих это актуально и будет актуально с выходом Bootstrap 4.
avatar
оберните только вызов самого FormLister в div с id=«mc» и тут измените на

var data = $(result).find("#mc").html();
$("#mc").html(data);
avatar
Огромное спасибо! Работает!
А как здесь поставить Вам плюсик или Спасибо?
avatar
Лично я буду отказываться от этого метода в пользу этого modx.im/blog/addons/5570.html Уже использую в одном проекте, буду подключать и на других проектах.
avatar
Тот метод неплох, но мне чего-то нравится больше использовать функционал Бутстрапа, чем самопис.
avatar
А при чем тут вообще бутстрап? Аякс отправка форм ни как не зависит от функциональности бутсрапа и тот скрипт, что у вас в вопросе приведен тот еще «самопис» и для каждой формы придется отдельный скрипт писать, хотя я тут не так давно показывал универсальный скрипт для множества аякс форм на странице на основе этого скрипта.
А новый метод я использую в том числе и в модальном окне бутсрапа, но там формы генерируются налету, т.е. боты не будут спамить, один скрипт используется для всех форм, ну и на сколько я понял там еще защита от учета ложных кликов на кнопку в метрике. Т.е. более верное и универсальное решение. Но в нем конечно чуть сложнее разобраться.
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.