Carousel and dynamically changing items

[tugberkugurlu]

I have bootstrap, jQuery and knockoutjs referenced in my project and assuming I have the following html code:

<div id="details-carousel" class="carousel slide">
    <!-- Carousel items -->
    <div class="carousel-inner">
        <div data-bind="foreach: accommPropertyImages">
            <div class="item" data-bind="css: { active: IsFirst() }">
                <img style="display: block; margin-left: auto; margin-right: auto;" data-bind="attr: {src: accommPropertyAbsoluteImageUri }" />
            </div>
        </div>
    </div>
    <!-- Carousel nav -->
    <div id="carousel-controls-container">
        <a class="custom-carousel-control" href="#details-carousel" data-slide="prev">&lsaquo;</a>
        <a class="custom-carousel-control" href="#details-carousel" data-slide="next">&rsaquo;</a>
    </div>
</div>

On the first run, accommPropertyImages array is filled up and carousel is being activated with the following code:

//...
var $carouselContainer = $('#details-carousel');
//...
$carouselContainer.carousel();

I also have the following code and this nulls the accommPropertyImages array, gets new images from the HTTP service and fills up the array again. The knockoutjs then picks it up and appends the new items.

vm.showDetails = function (accommProperty) {

    detailsVm.accommPropertyImages.removeAll();
    detailsVm.accommProperty(accommProperty);

    $.post(accImagesResourceUrlBase + accommProperty.AccommPropertyId(), null, function (result) {

        var $carouselContainer = $('#details-carousel');

        $.each(buildAccommPropertyImageArray(result), function (i, accommPropertyImage) {
            detailsVm.accommPropertyImages.push(accommPropertyImage);
        });

        $('#' + accommPropertyDetailsContainerId).modal('show');
        $carouselContainer.removeData('carousel');
        $carouselContainer.carousel();
    });
}

Also, notice that I have a line of code here: $carouselContainer.removeData('carousel');. If I don't have this, carousel slide doesn't work sometimes.

Is this is a bug?

[koenpunt]

Hey @tugberkugurlu,

Thanks for opening this issue! Unfortunately, it looks like it fails to pass the criteria neccessary for submitting to bootstrap. The following things are currently failing:

• should include a jsfiddle/jsbin illustrating the problem if tagged with js but not a feature

For a full list of issue filing guidelines, please refer to the bootstrap issue filing guidelines.

thanks!

[tugberkugurlu]

@koenpunt wow, sorry but I am not gonna do that. I took the time and have provided the whole code inside the issue. If you guys don't care to fix it (in case, this is really a bug), I don't care either.

Thanks!

[koenpunt]

Ow crap, my bad, did run make haunt to see what it does and at first it showed me nothing, but now I see; it commented on all the issues..

[fat]

@koenpunt HAUNT GITHUB ISSUES 4 FAT & MDO ONLY (O_O ) lol facepalm bro

[fat]

also @tugberkugurlu adding a jsfiddle is super helpful – reading through your js i can't tell what's wrong.

this means i would have to create a jsfiddle myself to debug your problem. which i don't have time to do. Feel free to reopen this issue with a link to a jsfiddle

[tugberkugurlu]

@fat do I look like an idle person to you? Sorry but I don't have time for this either. You would be absolutely right if I didn't supply the necessary code for you to repro the issue, but apparently I did!

Ignore the potential problem inside your code base if you think this is a problem.

[koenpunt]

@fat Yeah, read that. Continued. I'm cocky.

[L0g1k]

Well this issue cost me a lot of time - I understand it's closed but I leave this insight for any future victims who stumble upon this thread.

You can workaround the issue by manually re-initialising the carousel after the new data has been loaded

$().carousel("pause").removeData(); $().carousel(target_slide_index);

[Yeswanth-JG]

@tugberkugurlu .... there is usage of jQuery func .. "DATA" in bootstrap..

return this.each(function () { var data = $(this).data(DATA_KEY); var _config = $.extend({}, Default, $(this).data()); ... }

at line 1206 in bootstrap.js ...

So, removing something added using 'data' should be done by 'removeData'