I have a html page which includes javascript. In this page i call 3 ajax calls and wait until they are all done.
I'm using signalR and trying to update the UI from the onMessageReceivedSyncTasks() function. If i call a jquery selector within here it works fine. But.. if i try and call the function IntitalLoad() i get an error. Its all in the same scope?
Settings.html
<html>
<body>
<!-- html code not included -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function () {
function InitialLoad() {
$.when(GetSettings(), GetTimebands(), GetApnList()).done(function (a1, a2, a3) {
// UI changes when all 3 ajax functions done
});
}
function GetSettings() {
return $.ajax({
// ajax call 1
});
}
function GetTimebands() {
return $.ajax({
// ajax call 2
});
}
function GetApnList() {
return $.ajax({
// ajax call 3
});
}
});
<script src="/signalr/dist/browser/signalr.js"></script> <-- microsoft signalr lib -->
<script src="/signalr/dist/browser/messagebroker.js"></script>
</body>
</script>
</body>
</html>
Messagebroker.js
signalrConnection.on("onMessageReceivedSyncTasks", function (eventMessage) {
if ($('#table_buttons').length) {
$('#table_buttons').DataTable().ajax.reload(); // This selector works fine
}
InitialLoad(); // Calling a function returns error
});
Error:
[2021-11-05T13:21:33.643Z] Error: A callback for the method onmessagereceivedsynctasks threw error 'ReferenceError: InitialLoad is not defined'.