1
votes

Been struggling with this or a couple of hours, I am using Cycle 2 plugin and I am trying to dynamically create content using the scripts below.

The content writes into the .cycle-slideshow div but .cycle() won't seem to run. Is there anything else I can try here?

I am fetching content from a php page to show inside a slide in the slideshow and then I am querying the openweathermap.com api to get results. All of these return values, each gets wrapped in a .slide div too.

html

<div class="module-content">
    <div class="cycle-slideshow weather blue-box">
    </div>
    <div class="cycle-pager weather-pager blue-box"></div>
</div>

jQuery

    var $ = jQuery;
    $(document).ready(function() {
        $.getJSON( "http://api.openweathermap.org/data/2.5/weather?q=Aberdeen,uk&units=metric", function( data ) {
            var weather = data.weather[0].main;
            var temp = Math.round(data.main.temp);
            $(".weather").append("<div class=\"slide\"><div class=\"curr-weather\"><h3>"+weather+"</h3><h2>"+temp+"°C</h2></div></div>");
        });
        $(function(){
            var contentURI= "http://www.domain.co.uk/page.php";
            $(".weather").append("<div class=\"slide\"><div id=\"landings\"></div></div>");
            var jqxhr = $.get( "wp-content/plugins/weather-plugin/grab.php?url="+ contentURI, function(data) {
                var lands = $(data).find("#sidebar-bgbtm .data");
                lands = lands.splice(0,1);
                console.log(lands);
                $("#landings").append(lands);
            })
            .done(function(data){
                $(".weather").cycle();
            });
        });
    });