Turn.js & AJAX Integration

Question

I have been working on turn.js but didn't find any example regarding loading dynamic pages with content via ajax, the page is loading, but not with all result 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

you have to change

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

this line to

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

if using it inside the loop for getting all html in output result. Now happing is that your previous html replaced with a new html after each loop completing.