CODEWITHSUNDEEP
htmlajaxtwitter-bootstrapaccordion
Jeremy
Jeremy

Reputation: 167

Bootstrap accordion not showing correctly when created with ajax call

I have no problem creating accordion from bootstrap manually.

But in the ajax call it doesn't render correctly.

My ajax call :

function LoadReservation() {
    $.ajax({
        url: '@ecuriePath' + 'MesReservations',
        type: 'GET',
        headers: headers,
        success: function (data) {
            var j = 1;
            $.each(data,
                function (i, v) {
                    $('#accordion').append('<div class="panel panel-default">');
                    $('#accordion').append('<div class="panel-heading">');
                    $('#accordion').append('<h4 class="panel-title">');
                    $('#accordion').append('<a data-toggle="collapse" data-parent="#accordion" href="#collapse'+j+'">'+moment(v.heureDebut).format("DD-MM-YYYY")+' : '+v.typeDeCours+' - '+v.discipline+'</a>');
                    $('#accordion').append('</h4>');
                    $('#accordion').append('</div>');
                    $('#accordion').append('<div id="collapse'+j+'" class="panel-collapse collapse in">');
                    $('#accordion').append('<div class="panel-body">');
                    $('#accordion').append('test'+j);
                    $('#accordion').append('</div>');
                    $('#accordion').append('</div>');
                    $('#accordion').append('</div>');
                    j = j + 1;
                });
        },
        error: function(error) {
            alert('failed : ' + error);
        }
    });
}

HTML and references :

<link rel="stylesheet" href="~/Content/bootstrap.min.css">
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"> 
</script>

<div class="container">
<div id="accordion"></div>
</div>

This is the result :

enter image description here

Does anyone has any idea why this is? Same code directly in html works well and gives following result :

enter image description here

Upvotes: 0

Views: 514

Answers (1)

Jeremy
Jeremy

Reputation: 167

I found why it is not working.

Jquery .append() function appends your html but will also automatically close the tag.

If you append following :

$('#accordion').append('<div class="panel panel-default">');

It will add a </div> at the end of it.

I put everything in an array and appended my array. This did the trick !

Upvotes: 1

Related Questions