Modal not getting refresh with new data

Question

I have a page where all data is loaded dynamically from a database and displayed in divs. On every div there is button named View. On click of this button I call a method: onclick="getdetails(this)". This method creates a modal dynamically with data and it is working completely fine.

function getdetails(par) {
    var modaldiv = '';
    var maincontent = '';
    var htourid = document.getElementById("htourid" + par.id).value;
    var hadultprice = document.getElementById("hadultprice" + par.id).value;
    var hchildprice = document.getElementById("hchildprice" + par.id).value;
    var hdescription = document.getElementById("hdescription" + par.id).value;
    var htourname = document.getElementById("htourname" + par.id).value;

    $.ajax({
        type: "GET",
        url: "xxxxxxxxxxxx" + htourid,
        dataType: "json",
        contentType: "application/json",
        success: function(data) {
            var rowcount = 1;
            for (var i = 0; i < data.GetToursDetailsimagesResult.TourImages.length; i++) {
                if (rowcount == 1) {
                    maincontent += '<div class="item active">' +
                        '<img src="' + data.GetToursDetailsimagesResult.TourImages[i].ImagePath + '" alt=""/>' +
                        '</div>';
                } else {
                    maincontent += '<div class="item">' +
                        '<img src="' + data.GetToursDetailsimagesResult.TourImages[i].ImagePath + '" alt=""/>' +
                        '</div>';
                }
                rowcount++;
            }
            modaldiv = '<div id="modal-package" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">' +
                '<div class="modal-dialog modal-lg">' +
                '<div class="modal-content">' +
                '<div class="modal-header">' +
                '<a  class="close" href = "Tours_and_Activities.aspx" aria-hidden="true">&times;</a>' +
                '<ul class="nav nav-tabs" data-toggle="tabs">' +
                '<li class="active"><a href="#modal-tabs-package"><i class="gi gi-package"></i>Details</a></li>' +
                '</ul>' +
                '</div>' +
                '<div class="modal-body">' +
                '<div class="tab-content">' +
                '<div class="tab-pane active" id="modal-tabs-package">' +
                '<h1 class="h2"><strong style="margin-left: 16px;">' +
                '<asp:Label ID="lbl_tourdetails_tour_name" Text="' + htourname + '" runat="server"></asp:Label></strong></h1>' +
                '<input type="hidden" id="htourid" value="' + htourid + '" />' +
                '<div class="col-lg-7">' +
                '<div id="project-carousel" class="carousel slide" data-ride="carousel" data-interval="2000">' +
                '<div id="divimages" class="carousel-inner text-center">' +
                maincontent +
                '</div>' +
                '<a class="left carousel-control" href="#project-carousel" data-slide="prev">' +
                '<span>' +
                '<i class="fa fa-chevron-left"></i>' +
                '</span>' +
                '</a>' +
                '<a class="right carousel-control" href="#project-carousel" data-slide="next">' +
                '<span>' +
                '<i class="fa fa-chevron-right"></i>' +
                '</span>' +
                '</a>' +
                '</div>' +
                '</div>' +
                '<asp:Label ID="lbldescription" Text="' + hdescription + '" runat="server"></asp:Label>' +
                '</div>' +
                '</div>' +
                '</div>' +
                '<div class="modal-footer">' +
                '<h4 class="pull-left"><span class="text-muted"><b>Adult Price: </b></span><strong class="text-primary">' +
                '<asp:Label ID="lbl_viewadultprice" Text="' + hadultprice + '" runat="server"></asp:Label></strong>/</h4>' +
                '<h4 class="pull-left"><span class="text-muted"><b>Child Price: </b></span><strong class="text-primary">' +
                '<asp:Label ID="lbl_viewchildprice" Text="' + hchildprice + '" runat="server"></asp:Label></strong></h4>' +
                '<br />' +
                '<br />' +
                '<button type="button" class="btn btn-effect-ripple btn-success" onclick="Open_Addtocart_view(this)" style="background-color: #7DC402;"><i class="fa fa-shopping-cart"></i>Add to Cart</button>' +
                '<a  class="btn btn-effect-ripple btn-danger" style="background-color: #C43902;" data-dismiss="modal">Close</a>' +
                '</div>' +
                '</div>' +
                '</div>' +
                '</div>';
            $("#modaldiv").append(modaldiv);
            $('#modal-package').modal('show');
        }
    });
}

The problem is once I click on any divs 'View' button for the first time it goes on displaying the same data in modal even after I click any other view details button. If I refresh the page it displays new data, but then again the same issue goes on.

Can anyone help me find out what the problem is and how to solve it?

Answer 1

You need to empty the previous content of the modal before you append() the new HTML. You can do this by using the empty() method. Try this:

$("#modaldiv").empty().append(modaldiv);