Can't remove all objects from ContentFlow coverflow carousel with remove function

Question

Before I describe my problem I'd like to outline exactly what I'm attempting

What I'm trying to do here is load different sets of items into a content flow based on buttons a user can press. I've already set up a function triggered by a button that will get the items associated with the name value I pass to it via AJAX (using the jQuery $.get) and put in a div with an ID of itemcontainer. This works great.

function getPictures(Gallery){
$.get( "getimages.php", {name : Gallery}, function( data ) {
for(x in data){
    $("#itemcontainer").append(data[x]);
}
addPictures();
}, "json" );
return false;

}

You'll see the function calls another function inside of it ( addPictures() ) that actually adds the pictures to the ContentFlow carousel from the div with an ID of itemcontainer via ContentFlow's addItem method.

     function addPictures(){ 
        clearBox();
        var it = ajax_cf.items;
        // Grabs pictures from 'itemcontainer' and iteratively adds them to 'flow'
        var ic = document.getElementById('itemcontainer');
        var is = ic.getElementsByTagName('img');
        for (var i=0; i< is.length; i++) {
          ajax_cf.addItem(is[i],"end");
        } 
      }

You'll notice that the addPictures() function has a function inside it that I previously declare called clearBox(). clearBox() is supposed to loop through the items in my content flow and remove them so I can delete the old gallery of items in the ContentFlow carousel before loading new ones.

It works by looping through the list items (called items) which is a property of the ContentFlow object ajax_cf I create and run a method rmItem on the list element at index 0 for each item. Here's the clearBox function.

 var ajax_cf = new ContentFlow('ajax_cf');
      function clearBox(){
        alert("clear");
        var it = ajax_cf.items;
        var len = it.length;
        for(var i=0; i<len; i++){
         ajax_cf.rmItem(0);
        } 
        return false;
      }

If you want you can get the source or the docs here. http://www.jacksasylum.eu/ContentFlow/

Thanks in advance!

score 0 · Answer 1 · answered Mar 08 '14 at 17:24

0

I don't know if you've fixed the problem yet, but here's a thought. Since these objects are in the DOM, try making your clearBox() method remove the items in the itemcontainer. So your method could look like:

function clearBox()
{
    alert("clear");
    var images = $('itemcontainer').children();

    for (var i = 0; i < images.length; i++)
    {
        $('itemcontainer').remove(images[i]);
    }
}

This way, you're forcing the ContentFlow object to remove the images and when your addPictures method continues, it will basically reinitialize the ContentFlow carousel.

This is untested but logically seems it would work because all the ContentFlow library's rmItem method would do is remove the object from the DOM, so you are choosing to do that yourself instead.

answered Mar 08 '14 at 17:24

Martavis P.

1,708
2
27
45

Maybe I'm mistaken but from the contentflow docs it looks more like rmItem splices an item from the contentflow item object array, not from the dom. I've played around with deleting items from the dom in the #itemcontainer div and the .flow div. It wil delete the item but will leave a gap in it's place. To keep the styling correct you have to delete the items from the items object array in contentflow. – user3188234 Mar 11 '14 at 11:44
Seems, like progress, so have you tried removing the item from the contentflow array as well afterwards? – Martavis P. Mar 11 '14 at 23:35
Yes. It doesn't seem to do anything once the ContentFlow object items have been removed. – user3188234 Mar 12 '14 at 00:21

Can't remove all objects from ContentFlow coverflow carousel with remove function

1 Answers1