Блог

Я запускаю запрос, чтобы получить ленту новостей в формате JSON, используя getJSON, который затем я помещаю в div, как собственные div для поворота с помощью jQuery Cycle2. Я могу заставить jQuery Cycle2 работать с новостными элементами, когда я жестко кодирую их в div, но когда я добавляю его через getJSON, он не запускается. как я могу изменить динамическое содержимое для загрузки до запуска цикла?

Я даже переместил javascript над jQuery.Cycle2.js но у меня закончились идеи, поэтому мне любопытно, случалось ли с кем-нибудь подобное раньше и как они справляются с этим.

Мой код до сих пор

 
<div class="cycle-pager news-pager"></div>
<div id="news-area" class="cycle-slideshow oh"
data-cycle-swipe=true
data-cycle-swipe-fx=scrollHorz
    data-cycle-fx="scrollHorz"
    data-cycle-timeout="8000"
    data-cycle-auto-height="calc"
    data-cycle-pause-on-hover="true"
    data-cycle-pager=".news-pager"
    data-cycle-pager-event="mouseover"
    data-cycle-slides="> div"
>

</div>
<script> 
$.getJSON('https://mydomain.ca/feed/PressRelease.svc/GetPRList?apiKey=XXXX', function(data) {
               $.each(data.GetPRListResult, function(i, f) {
                  var tblRow = "<div class='news-item'><div class='heading date'>"   f.PressReleaseDate   "</div><h3><a href=https://investors.wfsinc.com"   f.LinkToDetailPage   ">"   f.Headline   "</a></h3></div>";
                    $(tblRow).appendTo("#news-area");


             });                    
           });
</script>
 

С главной страницы Cycle2:

Автоматическая инициализация не поддерживается для слайд-шоу, которые добавляются в DOM после запуска события ready jQuery.

И:

Вы предпочитаете устанавливать свои параметры через скрипт, а не в разметке? Хорошо, пусть будет по-твоему.

Поскольку .getJSON() метод является асинхронным, у вас нет другого выбора, кроме как использовать сценарий для создания экземпляра Cycle.

Документация Cycle2 может быть полезной.

Это было бы внутри .getJSON() обратного вызова.

Обратите внимание, что я не использовал cycle-slideshow класс, который используется для автоматической инициализации…

 <div class="cycle-pager news-pager"></div>
  <div id="news-area" class="cycle-slideshow_notInitiated oh">
</div>

<script>
$.getJSON('https://mydomain.ca/feed/PressRelease.svc/GetPRList?apiKey=XXXX', function(data) {
  $.each(data.GetPRListResult, function(i, f) {
    var tblRow = "<div class='news-item'><div class='heading date'>"   f.PressReleaseDate   "</div><h3><a href=https://investors.wfsinc.com"   f.LinkToDetailPage   ">"   f.Headline   "</a></h3></div>";
    $(tblRow).appendTo("#news-area");
  });
  
  // Instantiate Cycle here
  $(".cycle-slideshow_notInitiated ").cycle({
    swipe: true,
    "swipe-fx": "scrollHorz",
    fx: "scrollHorz",
    timeout: 8000,
    "auto-height": "calc",
    "pause-on-hover": true,
    pager: ".news-pager",
    "pager-event": "mouseover",
    slides: "> div"
  })
  
});
</script>