Question

我有一个页面，其中所有数据都是从数据库动态加载并以div显示。在每个div上都有一个名为View的按钮。点击此按钮后，我调用一个方法：onclick="getdetails(this)"。此方法使用数据动态创建模态，并且工作正常。

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');
        }
    });
}

问题是，一旦我点击任何div的“查看”按钮，它第一次在模态中显示相同的数据，即使我点击任何其他视图详细信息按钮后。如果我刷新页面，它会显示新数据，但同样的问题仍然存在。

任何人都可以帮我找出问题是什么以及如何解决它？

Answer 1

在append()新HTML之前，您需要清空模式的先前内容。您可以使用empty()方法执行此操作。试试这个：

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

Modal没有使用新数据刷新

1 个答案: