Как запустить модальное окно через ajaxsnippet?

Павел

21.02.2019, 15:31

1.4K

Доброго дня, можете показать пример как запустить модальное окно используя ajaxsnippet?

<!-- button -->
<div class="user login order-3 ml-auto">
      <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#loginModalCenter">
           <i class="far fa-user d-lg-none"></i>
                <span class="d-none d-lg-inline">{'office_auth_login_btn' | lexicon}</span>
       </a>            
</div>
<!-- end_button -->

[[!AjaxSnippet?
    &snippet=`officeAuth`
    &tplLogin=`@FILE chunks/office/tpl.Office.auth.login.tpl`
    &HybridAuth=`0`
    &groups=`users`
    &as_mode=`onclick`
    &as_trigger=`?`
    &as_target=`?`
]]

Не пойму, что эспользовать в as_trigger и as_target, чтобы кнопка выше открывала модальное окно Чанк tpl.Office.auth.login.tpl обычное модальное окно bs4

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

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

Александр Мальцев

22.02.2019, 15:06

Доброго! Для запуска модального окна Bootstrap не нужен MODX компонент AjaxSnippet. Это выполняется с помощью JavaScript. Но и код JavaScript для этого случая писать не надо, он уже содержится в bootstrap.js.
Вам необходимо только добавить к кнопке два атрибута. Один из них data-toggle=«modal», а другой data-target. Атрибут data-target в качестве значения должен содержать селектор модального окна. В соответствии с ним кнопка и будем его показывать.
Сниппет officeAuth вообще нет смысла помещать в сниппет AjaxSnippet, т.к. из-за этого у вас не будет работать авторизация.

Павел

22.02.2019, 23:18

С запуском модального окна все понятно, с этим вопросов нет, оно уже работает.
Вопрос как раз в том, что в чанке tpl.Office.auth.login.tpl очень много информации (несколько форм, 2 модальных окна, полотно текста про «Политику обработки персональных данных» и т.д.) и хотелось бы, что бы все это подгружалось на страницу только после нажатия кнопки «Вход», а не висело в исходном коде каждой страницы сайта. Я проковырялся с js 2 дня и максимум, что удалось сделать

$(document).on('click','.more',function(e){
    e.preventDefault();
    $("#ins").load("auth.html", function(response){
        // Если ответ не пустой, открываем модальное окно
        if (response) {
            $("#loginModalCenter").modal('show');
        }
    });
});

где auth.html страница со всем этим.
При клике на кнопку

<a href="#" class="btn btn-primary more" data-toggle="modal" data-target="#loginModalCenter">

<div id="ins"></div>

Вставляется содержимое и появляется модальное окно, но естественно в нем ничего не работает (регистрация, вкладки и т.д.)

Поэтому начал рассматривать ajaxsnippet, как вариант, но тоже немного не хватило знаний.

В общем нигде нет ни урока, ни намека на то, как подобную задачу решать, если есть возможность, просветите

Александр Мальцев

23.02.2019, 06:00

AjaxSnippet предназначен не для этого. Он применяется, когда вам нужно подгрузить некоторый контент на страницу (т.е. он возвращает результат выполнения некоторого сниппета, который необходимо вставить на страницу). AjaxSnippet позволяет это сделать либо при клике по кнопке, либо после загрузки страницы.
officeAuth — это сниппет, который не просто возвращает какой-то результат.
Простое решение из коробки — это когда вызов officeAuth должен присутствовать на странице. Чанк tpl.Office.auth.login.tpl — это не самостоятельный элемент. Он содержит плейсхолдеры, которые при вызове officeAuth должны быть заменены значениями, полученными в результате его выполнения.

У меня готового решения нет, но то, что вы предложили, конечно, работать не будет.