Загрузка данных в модальное окно Ajax-ом?

Question

[Валентин Попов]

Подключен fancybox3.
Вызов модального окна с загрузкой контента:

<div class="avatar avatar__hover-menu js-avatar-singup" data-fancybox data-type="ajax" data-src="modal.html" data-filter="#modal-signup">

Есть файл modal.html в котором код модального окна.
При клике открывается модальное окно, но не инициализируется слайдер slick и его стили.

Из за чего такое может происходить, куда копать?

Вот код:

Код при клике на кнопку:

<div class="avatar avatar__hover-menu js-avatar-singup" data-fancybox data-type="ajax" data-src="modal.html" data-filter="#modal-signup">

Код модального окна:

<!-- modal-slider -->
  <div id="modal" class="modal" style="display: none;">
    <div class="modal__container">
      <div class="modal__right">
        <div class="avatar avatar--modal">
          <div class="avatar__wrap-img">
            <img class="avatar__img lazy"
              src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAEALAAAAAABAAEAAAICTAEAOw=="
              data-src="img/Tom.png" alt="">
            <svg class="icon republican-elefant">
              <use xlink:href="img/sprite-icon.svg#republican-star"></use>
            </svg>
          </div>
          <div class="avatar__wrap-name">
            <div class="avatar__name">Tom Smith</div>
            <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
          </div>
          <a href="#" class="button button--follow">Follow</a>
        </div>
        <div class="modal__content">
          <p>Lorem, ipsum dolor. Lorem, ipsum dolor.</p>
          <div class="modal__slider-main">
            <div class="modal__slide" data-index="1">
              <img src="img/view2.jpg" alt="">
            </div>
            <div class="modal__slide" data-index="1">
              <img src="img/view3.jpg" alt="">
            </div>
            <div class="modal__slide" data-index="1">
              <img src="img/view4.jpg" alt="">
            </div>

            <div class="modal__slide" data-index="1">
              <img src="img/view5.jpg" alt="">
            </div>
            <div class="modal__slide" data-index="1">
              <img src="img/view6.jpg" alt="">
            </div>
            <div class="modal__slide" data-index="1">
              <img src="img/view7.jpg" alt="">
            </div>
          </div>
          <div class="modal__slider-nav">
            <div class="modal__slide">
              <img src="img/view2.jpg" alt="">
            </div>
            <div class="modal__slide">
              <img src="img/view3.jpg" alt="">
            </div>
            <div class="modal__slide">
              <img src="img/view4.jpg" alt="">
            </div>
            <div class="modal__slide">
              <img src="img/view5.jpg" alt="">
            </div>
            <div class="modal__slide">
              <img src="img/view6.jpg" alt="">
            </div>
            <div class="modal__slide">
              <img src="img/view7.jpg" alt="">
            </div>
          </div>
          <div class="modal__bottom">
            <div class="view">
              <svg class="icon icon_view">
                <use xlink:href="img/sprite-icon.svg#view"></use>
              </svg>
              <span>123</span>
            </div>
            <div class="controls--modal">
              <div class="controls-arrows--modal">
                <div class="controls-dots--modal"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal__left">
        <div class="modal__left-top">
          <div class="comment">
            <svg class="icon icon_view">
              <use xlink:href="img/sprite-icon.svg#comments"></use>
            </svg>
            <span>23</span>
          </div>
          <ul class="modal__social">
            <li>
              <a href="">
                <img src="img/facebook.png" alt="">
              </a>
            </li>
            <li>
              <a href="">
                <img src="img/google.png" alt="">
              </a>
            </li>
            <li>
              <a href="">
                <img src="img/twitter.png" alt="">
              </a>
            </li>
          </ul>
        </div>
        <div class="people-chat">
          <ul class="people-chat__items">
            <li class="people-chat__item">
              <div class="avatar avatar--list">
                <div class="avatar__wrap-img">
                  <img class="avatar__img lazy"
                    src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAEALAAAAAABAAEAAAICTAEAOw=="
                    data-src="img/hanna.png" alt="">
                  <svg class="icon democratic-donkey">
                    <use xlink:href="img/sprite-icon.svg#democratic-star"></use>
                  </svg>
                </div>
                <div class="avatar__wrap-name">
                  <div class="avatar__name">Hanna Smith</div>
                  <div class="chat chat-d">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div>
                </div>
              </div>
            </li>
            <li class="people-chat__item">
              <div class="avatar avatar--list">
                <div class="avatar__wrap-img">
                  <img class="avatar__img lazy"
                    src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAEALAAAAAABAAEAAAICTAEAOw=="
                    data-src="img/Tom.png" alt="">
                  <svg class="icon democratic-donkey">
                    <use xlink:href="img/sprite-icon.svg#democratic-star"></use>
                  </svg>
                </div>
                <div class="avatar__wrap-name">
                  <div class="avatar__name">Tom Smith</div>
                  <div class="chat chat-r">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div>
                </div>
              </div>
            </li>
            <li class="people-chat__item">
              <div class="avatar avatar--list">
                <div class="avatar__wrap-img">
                  <img class="avatar__img lazy"
                    src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAEALAAAAAABAAEAAAICTAEAOw=="
                    data-src="img/harry.png" alt="">
                  <svg class="icon republican-elefant">
                    <use xlink:href="img/sprite-icon.svg#republican-star"></use>
                  </svg>
                </div>
                <div class="avatar__wrap-name">
                  <div class="avatar__name">Harry Smith</div>
                  <div class="chat chat-i">Lorem ipsum Lorem ipsum</div>
                </div>
              </div>
            </li>
            <li class="people-chat__item">
              <div class="avatar avatar--list">
                <div class="avatar__wrap-img">
                  <img class="avatar__img lazy"
                    src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAEALAAAAAABAAEAAAICTAEAOw=="
                    data-src="img/addam.png" alt="">
                  <svg class="icon republican-elefant">
                    <use xlink:href="img/sprite-icon.svg#republican-star"></use>
                  </svg>
                </div>
                <div class="avatar__wrap-name">
                  <div class="avatar__name">Adam Smith</div>
                  <div class="chat chat-i">Aenean commodo ligula eget dolor. Aenean massa. Lorem</div>
                </div>
              </div>
            </li>
            <li class="people-chat__item">
              <div class="avatar avatar--list">
                <div class="avatar__wrap-img">
                  <img class="avatar__img lazy"
                    src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAEALAAAAAABAAEAAAICTAEAOw=="
                    data-src="img/hanna.png" alt="">
                  <svg class="icon republican-elefant">
                    <use xlink:href="img/sprite-icon.svg#republican-star"></use>
                  </svg>
                </div>
                <div class="avatar__wrap-name">
                  <div class="avatar__name">Hanna Smith</div>
                  <div class="chat chat-i">Lorem ipsum Lorem ipsum hello america</div>
                </div>
              </div>
            </li>
          </ul>
          <form class="forma-chat">
            <input class="forma-chat__input" type="text" placeholder="text">
            <a href="#" class="button button__forma">Share</a>
          </form>
        </div>

      </div>
    </div>
  </div>

Инициализация slick sliderа :

$(document).ready(function () {
  
  $('.modal__slider-main').slick({
    prevArrow: '<button class="slick-prev">back</button>',
    nextArrow: '<button class="slick-next">next</button>',
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: true,
    appendArrows: $('.controls-arrows--modal'),
    asNavFor: '.modal__slider-nav',
  });

  var slick = $('.modal__slider-nav').slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    asNavFor: '.modal__slider-main',
    arrows: false,
    dots: true,
    appendDots: $('.controls-dots--modal'),
    focusOnSelect: true
  });

  $('.modal__slider-nav .slick-slide').removeClass('slick-active');
  $('.modal__slider-nav .slick-slide').eq(0).addClass('slick-active');

  $('.modal__slider-main').on('beforeChange', function (event, slick, currentSlide, nextSlide) {
    var mySlideNumber = nextSlide;
    $('.modal__slider-nav .slick-slide').removeClass('slick-active');
    $('.modal__slider-nav .slick-slide').eq(mySlideNumber).addClass('slick-active');
  });

});

Comments

[Pavel Kuzyakin]

без кода вам решительно нечем помочь

Answer 1

[Валентин Попов]

Вопрос решил. Необходимо код инициализации слайдера в див модального окна запихнуть между тегами script

Answer 2

[Alexey Moloko]

Подключайте скрипты и стили слайдера в файле modal.html

Comments

[Валентин Попов]

Я их подключил, но не работает, не инициализируется слайдер

[Alexey Moloko]

Попробуйте в modal.html прописать все, что связанно со слайдером.
для примера:

<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>

и инициализацию

<script>
$(document).ready(function(){
  $('.your-class').slick({
    setting-name: setting-value
  });
});
</script>

[Валентин Попов]

Alexey Moloko, Пробовал, не работает.

Answer 3

[ThunderCat]

Было бы странно если бы он работал.

$(document).ready(function () {
    $('.modal__slider-main').slick({
...

А теперь подумайте, при загрузке этого кода ГДЕ находится элемент $('.modal__slider-main')?

Comments

[Валентин Попов]

В файле modal.html?

[ThunderCat]

Валентин Попов, угу, только вот браузер о его существовании не подозревает

[Валентин Попов]

ThunderCat, Странно, а не подскажешь, как сделать так чтобы он узнал?)

[Валентин Попов]

ThunderCat, У меня просто модальное окно, без инициализации скриптов из внешних библиотек таким способом браузер отображает, а почему с внешними библиотеками, такими как slick slider не хочет отображать, загадка для меня...

[Валентин Попов]

Валентин Попов, Хотя если я убираю файл modal.html и просто html код модального окна размещаю в файле indx.html в самом низу, то все работает, почему посредстовом ajax он не инициализирует slider не могу понять. Ведь я ничего не менял, просто вынес код в отдельный html файл modal.html

[ThunderCat]

Валентин Попов, проще всего в фэнси добавить функцию которая будет вешать листенер на элемент, то есть перенести этот код из $(document).ready в инициализацию попапа фэнси, емнип там есть afterload или как то так - функция выполняющаяся после загрузки контента в фэнсибокс контейнер.

[ThunderCat]

Валентин Попов,

не могу понять. Ведь я ничего не менял, просто вынес код в отдельный html файл modal.html

такое впечатление что о яваскрипте у вас очень туманное представление.
Ладно, объясняю на пальцах - когда браузер загружает весь контент страницы, у вас выполняется скрипт прописанный в $(document).ready условии. На этот момент ваше модальное окно "пустое", в нем нет элемента $('.modal__slider-main'), соответственно этот код отрабатывает впустую. Далее вы грузите этот элемент в модалку, но так как скрипт уже отработал никакие движения с ним не происходят.
Это кстати и ответ почему работает если не выносить в отдельный файл.