Turn.js & AJAX Integration

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后，每个循环完成。