He estado trabajando en turn.js pero no encontré ningún ejemplo sobre la carga de páginas dinámicas con contenido a través de ajax, la página se está cargando, pero no con todos los resultados json del controlador
<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>tienes que cambiar
$('#Page-Loader').html(Html);esta línea a
$('#Page-Loader').append(Html);si lo usa dentro del bucle para obtener todo el html en el resultado de salida. Ahora sucede que su html anterior se reemplazó con un html nuevo después de completar cada ciclo.