I am programming a Rails app with a view with inline JavaScript also using jquery. When clicking the button with Id="ReloadPlaceholders"
the script is executed which is fine, wanted and works.
The script itself doesnt work. It is supposed to:
- load data from the server [WORKS]
- select a drop down [WORKS]
- empty the drop down with [DOESN’T WORK – The drop down options remain unchanged (but the drop down flickers shortly…dunno why)
- Populate the drop down with the new options. To test this I added an Option [DOESN’T WORK] (later the
options
from thevar
will be loaded)
My code in the view:
<script>
document.getElementById("ReloadPlaceholders").addEventListener("click",
function(){
const xmlHttp = new XMLHttpRequest();
xmlHttp.open( "GET", "/home/companies/<%= current_company.id %>/disbursements/placeholders", true ); // false for synchronous request
xmlHttp.onload = (e) => {
var options = xmlHttp.responseText;
let newOption = new Option('Option Text','Option Value');
const select = document.querySelector('#disbursement_disbursement_positions_attributes_0_placeholder_id');
select.empty();
select.add(newOption, undefined);
};
xmlHttp.onerror = (e) => {
console.error(xmlHttp.statusText);
};
}
);
</script>
I tried for multiple hours also using plain vanilla JS but it doesnt work.