AlbMilan AlbMilan - 5 months ago 33
Ajax Question

dynamic carousel slider jquery .append

i have to construct a dynamic carousel with jquery ajax and my boss suggest me to use .append() method.
This is my carousel html code:

<div id="myCarousel">

</div>
<div class="container-fluid" id="slider">
<div id="pb_2">
<div id="carousel_2" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">

<!--img slider del progetto-->
<div class="item">
<img src="images/img01.jpg" alt="image description" width="95%" height="349" />

<div class="carousel-caption">
</div>
</div>
<div class="item active">

<img src="images/img24.jpg" alt="image description" width="95%" height="349" />

<div class="carousel-caption">
</div>
</div>
<div class="item">

<img src="images/img23.jpg" alt="image description" width="95%" height="349" />

<div class="carousel-caption">
</div>
</div>
<div class="item">

<img src="images/img17.jpg" alt="image description" width="95%" height="349" />

<div class="carousel-caption">
</div>
</div>
<div class="item">

<img src="images/img15.jpg" alt="image description" width="95%" height="349" />

<div class="carousel-caption">
</div>
</div>
<!--fine img slider del progetto-->


</div>

<!-- Controls -->
<a class="left carousel-control" href="#carousel_2" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Precedente</span>
</a>
<a class="right carousel-control" href="#carousel_2" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Prossimo</span>
</a>
</div>

</div>
</div>


and my jquery ajax:

$(document).ready(function () {
$.get("myImagesURL")
.done(function (response) {
$(response.DataObject).each(function (i, item) {
$('#myCarousel').append($('<div class="item"><img src="' + item.AbsolutePathImage + '" alt="image description" width="100%" height="349" /><div class="carousel-caption"></div></div>'));
});
})
.fail(function () {
alert("error");
})
.always(function () {
alert("complete");
});

});


all images are loaded but the carousel is not... how can i implement this carousel with Jquery? I'm new in programming...

Thanks in advance!

Answer

This works for me as is. But you can try this setTimeOut.

        $(document).ready(function () {

     setTimeout(function(){
        $.get("myImagesURL")
        .done(function (response) {
          $(response.DataObject).each(function (i, item) {
              $('#myCarousel').append($('<div class="item"><img src="' + item.AbsolutePathImage + '" alt="image description" width="100%" height="250" /><div class="carousel-caption"></div></div>'));
          });
        });

    }, 3000);


    });
Comments