jQuery cycle text slideshow not working

Question

I am having a problem using the jQuery cycle plugin. On my page, I use it for image and text slideshows. The image slideshows work very well but one of the text slideshow is having a problem. Consider the code below. I am using the divs below as slides for the text slideshow.

<div>
    <p>This is slide1</p>
    <h4>author 1</h4>
</div>
<div>
    <p>This is slide2</p>
    <h4>author 2</h4>
</div>

If I use the code above as a static block in an HTML page, the slideshow works fine. However, if I generate the above piece of code through Javascript, I am getting an error. Here's what the Chrome console is giving me.

Cannot read property 'cycleW' of undefined

I am not able to figure out what this problem is, so any help would be really appreciated. Thanks!

Are you sure that jQuery is not parsing it before its been loaded by your javascript? Also put your javascript codes here to find out more about it. — footy, Jan 20 '12 at 08:02
Ok. I figured it out. I was calling the javascript function to generate the HTML inside the document ready function of jQuery. I took it out from there and called the function before the document ready function. And it worked. But jQuery is actually supposed to parse only after the DOM is ready. I wonder why it was not working before. Anyway, thanks for the replies. Much appreciated! — Vikas, Jan 20 '12 at 14:18

score 1 · Answer 1 · answered Jan 20 '12 at 08:28

1

If you generate the HTML with JavaScript as the page loads, make sure you are using jQuery like the following AND that you are calling your HTML generation scripts before the plugin.

$(function() {
   //code goes here
});

If you generate the HTML on an event (e.g. a button click) you need to call the plugin function(s) on any new code for it to work on that as well, so:

$(function() {
    myBtn.click(function() {
        var generatedElement = generateSomeElement();
        $('body').append(generatedElement);
        generatedElement.callPlugin();
    });
});

answered Jan 20 '12 at 08:28

Anders Arpi

8,277
3
33
49

Thanks Anders. That is exactly how I am doing it but the cycle plugin seems to be ignoring the generated HTML. – Vikas Jan 20 '12 at 13:58
Sorry for my slow response. How's it going? Could you try propping the relevant part of your HTML/jQuery code into a jsfiddle for me to look at? – Anders Arpi Jan 23 '12 at 08:23

Erik Čerpnjak · Answer 2 · 2012-01-20T08:17:08.867

0

I think the problem is that the HTML generated by javascript isnt in the DOM or its reference isnt stored in variable hence thats why an error undefined. But with only that info its realy difficult to tell.

Have you tried it with an body onload event where you first execute javascript which generates the html and then let jquery do its job?

edited Jan 20 '12 at 08:17

answered Jan 20 '12 at 08:09

Erik Čerpnjak

419
5
11

Yeah. I did try the body onload way. But it didn't work. Curiously, the HTML is generated successfully, but the cycle Plugin isn't parsing it. – Vikas Jan 20 '12 at 13:58

MuffinMan · Accepted Answer · 2012-02-03T17:18:47.257

I ran into the same problem as you, and prevailing theories seem to be right - the cycle plugin is trying to parse the slides before the DOM has finished loading. To solve the problem I had to create a sceond function that would wait for the div to finish loading before it would start cycling, like so:

function startSlideshow(id, timeout) {
    var children = $("#" + id).children().size();
    // child div loaded yet?
    if (children <= 0) {
            // no! wait for it
            setTimeout("startSlideshow('" + id + "', '" + timeout + "')", timeout);
    }
    else {
            // yes, start the cycle plugin
            $("#" + id).cycle({ 
                    fx: 'fade',
                    timeout:  timeout,
                    speed: 500
            });
    }
}

So when I make an AJAX call to load the divs, I do it like so:

// load divs with multiple ajax calls
addRandomImages("slideshow");
addRandomImages("slideshow");
addRandomImages("slideshow");
// start the slideshow when the divs are loaded
startSlideshow("slideshow", 5000)

jQuery cycle text slideshow not working

3 Answers3