I am writing the JavaScript for a webpage that I'm building. I am using the following (simplified) code successfully:
$('#selector').on('click', function () {
if (isTrue) {
if (isTrue) {
}
else {
// execute block of code 'A', which is similar to 'B'
callAjax(url, function() {
// do some things...
})
}
}
else {
// execute block of code 'B', which is similar to 'A'
callAjax(url, function() {
// do some things...
})
}
});
/**************************
* Call Ajax
**************************/
function callAjax(url, callback) {
$.get(
url,
function(data) {
callback();
}
)
}
However, I want to improve the code by modularizing it like so:
$('#selector').on('click', function () {
if (isTrue) {
if (isTrue) {
}
else {
handler(objects);
}
}
else {
handler(objects);
}
});
/**************************
* Handler
**************************/
function handler(objects) {
callAjax(url, function() {
// do some things...
})
}
/**************************
* Call Ajax
**************************/
function callAjax(url, callback) {
$.get(
url,
function(data) {
callback();
}
)
}
Whenever I run the second set of code, it throws the "Synchronous XMLHttpRequest on the main thread is deprecated" warning. Subsequent runs through the code throw the "$.get is not a function" error, and the code stops running as soon as handler() is called.
I am not referencing the slim version of JavaScript.
Why are these errors and warnings being thrown, and how can I successfully simplify my code in the way I have described?
EDIT:
To add clarity and to answer the comments I have so far, here are the scripts I've included at the bottom of the webpage within the <body></body> tags:
<script src="https://code.jquery.com/jquery-3.2.1.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
I suppose I should include this as well. It references the .js file I'm writing.
<script src="script.js"></script>
