Turn.js 和 AJAX 集成

Question

我一直在研究 turn.js，但沒有找到任何關於通過 ajax 加載帶有內容的動態頁面的示例，頁面正在加載，但並非所有結果都是來自控制器的 json 結果

<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。