Turn.js和AJAX集成

Question

我一直在turn.js上工作，但没有找到任何通过ajax加载带有内容的动态页面的示例，页面正在加载，但不是所有的结果json result from controller

<div class="sample-flipbook" id="BookViewer">
            <div id="book-js" class="text-center">
                <div class="hard">
                    <img src="~/Theme/OtherAssets/Images/temp-img.jpg" class="img-fluid" style="width:100%; height:100%">
                </div>
                <div class="hard"></div>
                <div id="Page-Loader"></div>
                <div class="hard"></div>
            </div>
        </div>


<script type="text/javascript">
    $(document).ready(() => {
        $('#book-js').turn({
            width: 900,
            height: 600,
            autoCenter: true
        });
    });
    function LoadBook(HBID, ChapterNo, TableRef) {
        $.ajax({
            url: '@Url.Action("GetData", "Books")',
            type: "GET",
            data: { HadithBookID: HBID, ChapterNo: ChapterNo, TableRefNo: TableRef },
            success: (response) => {

                console.log(response.length);
                for (var i = 0; i < response.length; i++) {
                    var Html = "<div>";
                    Html += '<p class="urdu-font-fm container-fluid mt-3">' + response[i].ArabicText+'</p>';
                    Html += '<p class="container-fluid">' + (response[i].EnglishText != null ? response[i].EnglishText == null : "") + '</p>';
                    Html += '<p class="urdu-font-fm container-fluid">' + response[i].UrduText+'</p>';
                    Html += '<p class="urdu-font-fm container-fluid">' + (response[i].Language1  != null ? response[i].Language1  == null : "") + '</p>';
                    Html += "</div>";

                    $('#Page-Loader').html(Html);
                }
            },
            error: (response) => { console.log(response); }
        });
    }
</script>

Answer 1

你必须改变

$('#Page-Loader').html(Html);

此行到

$('#Page-Loader').append(Html);

如果在循环中使用它来获取输出结果中的所有html。现在发生的情况是，在每次循环完成后，以前的html被替换为新的html。