Fire JQuery AJAX call after Kendo UI AJAX page load

Question

I'm trying to get some AJAX to collect the value of balance from a JSON file and display it in a HTML element, however it is firing before the HTML I want it to display in has loaded, this is due to KENDO UI Mobile loading the page content through AJAX as well which is happening after my AJAX call, thus the balance is not displaying.

Here's my code so far:

$(document).ready(function (){
console.log("start console log");
    $.ajax({
        type: "GET",
        url: "data/staff.php",
        async: false,
        dataType: "json",
        success: function (response){
                    var  balanceHTML = "<p>";
                    $.each(response, function (index, staff){
                        balanceHTML += response.staff[0].balance;
                        console.log(response.staff[0].balance);
                    });

                    balanceHTML += "</p>"; 
                    console.log("balanceHTML: "+balanceHTML);

                    $('#user-profile .col-3').html(balanceHTML);
                    $("#dt1").html('<b>aaaaa</b>');
                    $("#dt2").html(balanceHTML);
                }
    }); //end ajax
}); //end ready

I'm just struggling to figure out the next step to detect when the content has loaded, I tried using .load() but it didn't seem to work.

Answer 1

This may work try this code,

 function loadAjax(){
    $.ajax({
            type: "GET",
            url: "data/staff.php",
            async: false,
            dataType: "json",
            success: function(response){
                        var  balanceHTML = "<p>";
                        $.each(response, function (index, staff){
                            balanceHTML += response.staff[0].balance;
                            console.log(response.staff[0].balance);
                        });

                        balanceHTML += "</p>"; 
                        console.log("balanceHTML: "+balanceHTML);

                        $('#user-profile .col-3').html(balanceHTML);
                        $("#dt1").html('<b>aaaaa</b>');
                        $("#dt2").html(balanceHTML);
                    }
        }); //end ajax
    }
    $(function(){
        setTimeout(loadAjax,1000);
    });