Не работает второе модальное окно из-за [[!AjaxForm? . Как сделать две формы обратного звонка FormIt MODX REVO + Bootstrap 5

Здравствуйте, хотел сделать на сайте две модальные формы. Первая оставить звонок, вторая сделать заказ.
Одна форма работает, все приходит на почту. Но вторая даже модальное окно не вызывается, просто оверлей модального вызывается, а самой формы нет. Меняю местами чанки, начинает работать, другая перестает.

javascript никакой нигде не вызываю для форм. в бустрапе 5 вроде без этого все вызывается.

Начал копаться и понял, что

вот пример формы 
<div class="modal fade" id="callback-1" tabindex="-1" role="dialog" aria-labelledby="callback-1">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content forma forma_modal mx-auto p-0 p-sm-2">
 
<div class="forma_modal_padding">
	  [[!AjaxForm?
	  &snippet=`FormIt`
	  &form=`modalFormTpl`
	  &hooks=`spam,email,FormItSaveForm`
	  &emailTpl=`contactEmailTpl`
    &emailSubject=`[[++site_name]] Сообщение с сайта`
    &emailTo=`[[++emailsender]]`
    &successMessage=`Ваша заявка отправлена. 
Ожидайте пожалуйста звонка`
    &emailFrom=`noreply@site.ru`
	  &formName=`[[++site_name]]`
	  &validate=`phone:required,text,user:blank,username:blank,captcha:blank`
&successMessage=`<strong>Сообщение успешно отправлено.</strong>

Спасибо за заявку
Ожидайте пожалуйста, с Вами свяжутся`]]
	  </div>
 	  
    </div>
  </div>
</div>
и второй 
<div class="modal fade" id="modals-zvonok" tabindex="-1" role="dialog" aria-labelledby="modals-zvonok">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content forma forma_modal mx-auto p-0 p-sm-2">

    <div class="forma_modal_padding">
	  [[!AjaxForm?
	  &snippet=`FormIt`
	  &form=`modalFormTplzvonok`
	  &hooks=`spam,email,FormItSaveForm`
	  &emailTpl=`contactEmailTplzvonok`
    &emailSubject=`[[++site_name]] Сообщение с сайта`
    &emailTo=`[[++emailsender]]`
    &successMessage=`Ваша заявка отправлена. 
Ожидайте пожалуйста звонка`
    &emailFrom=`noreply@site.ru`
	  &formName=`[[++site_name]]`
	  &validate=`name:required,phone:required,text,user:blank,username:blank,captcha:blank`
&successMessage=`<strong>Сообщение успешно отправлено.</strong>

Спасибо за заявку
Ожидайте пожалуйста, с Вами свяжутся. 
Пожалуйста, разрешите на вашем телефоне прием звонков для номера`
	  ]]
	  </div>
	  
	  
    </div>
  </div>
</div>

Вызываю ссылкой их
<a class="nav-link" href="#" data-bs-toggle="modal" data-bs-target="#modals-zvonok">modals-zvonok</a>
<a class="nav-link" href="#" data-bs-toggle="modal" data-bs-target="#callback-1">modals</a>

ну вот если например я вырезаю этот кусок:
[[!AjaxForm?
	  &snippet=`FormIt`
	  &form=`modalFormTplzvonok`
	  &hooks=`spam,email,FormItSaveForm`
	  &emailTpl=`contactEmailTplzvonok`
    &emailSubject=`[[++site_name]] Сообщение с сайта`
    &emailTo=`[[++emailsender]]`
    &successMessage=`Ваша заявка отправлена. 
Ожидайте пожалуйста звонка`
    &emailFrom=`noreply@site.ru`
	  &formName=`[[++site_name]]`
	  &validate=`name:required,phone:required,text,user:blank,username:blank,captcha:blank`
&successMessage=`<strong>Сообщение успешно отправлено.</strong>

Спасибо за заявку
Ожидайте пожалуйста, с Вами свяжутся. 
Пожалуйста, разрешите на вашем телефоне прием звонков для номера`
	  ]]
тогда оба модальных окна вызываются, но одно без содержимого, но они вызываются! Значит с модальными окнами все верно сделано и скрипты работают. Может нельзя вызывать [[!AjaxForm?? может нужно &snippet=`FormIt` каждой форме свой какой-то id уникальный? Помогите пожалуйста…
как вызвать два модальных окна на одной странице…
Игорь
Игорь
06 февраля 2022, 08:45
modx.pro
845
0

Комментарии: 2

Игорь
Игорь
06 февраля 2022, 12:10
0
Ошибка решена…

не закрыл в modalFormTpl, 
<div>
где идет вызов 
<form action="[[~[[*id]]]]" method="POST" class="ajax_form" enctype="multipart/form-data">
банально не закрыл в конце div. вот так вот товарищи, банальная ошибка 1 день потрачено на выявление ошибки
    Игорь
    Игорь
    07 февраля 2022, 13:22
    0
    Как я сделал Отмена стандартного алерта jGrowl

    $(document).on('af_complete', function(event, response) {
    if (response.success) {
        
response.message = ''; // Отмена стандартного алерта jGrowl
$('#modals-zvonok').modal('hide');
$('#callback-1').modal('hide');
$('#modal').modal('hide');
$('#thanks').modal('show'); // вызов своего модального она после отправки заявки.
    }
 });
      Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
      2