I am trying to load files that the user selects in a multiselect element. A minimal example would be something like this:
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<select name="file-select" id="file-select" multiple>
<option>http://url.to.file/Test1.txt</option>
<option>http://url.to.file/Test2.txt</option>
</select>
<script>
$(document).ready(function() {
$('#file-select').change(function () {
let loaded_files_list = new Array();
let promise = new Promise(function(myResolve,myReject) {
$("#file-select option:selected").each(function () {
$.get($(this).val(), function(response) {
data = response;
// Do something with data
loaded_files_list.push($(this).val());
if(loaded_files_list.length == $("#file-select option:selected").length) {
myResolve(loaded_files_list);
}
else {
myReject('List is not complete yet');
}
});
});
});
promise.then(
function(value) {
console.log(value);
},
function(error) {
console.log(error);
}
);
});
});
</script>
</body>
</html>
where the files Test1.txt and Test2.txt are hosted by the same server as the web page. If I use this set-up I get the following error:
Uncaught TypeError: Cannot read properties of undefined (reading 'toLowerCase')
at S.fn.init.val (jquery.min.js:2:69494)
at Object.success (ajax_test.html:21:40)
at c (jquery.min.js:2:28327)
at Object.fireWith [as resolveWith] (jquery.min.js:2:29072)
at l (jquery.min.js:2:79901)
at XMLHttpRequest.<anonymous> (jquery.min.js:2:82355)
I don't understand where that error is coming from. Where is jQuery using .toLowerCase where it does not seem to be defined?