I am trying to trigger an onchange ajax query but it is not working. In the beginning I am changing some innerHTML, then populate a through an ajax query before the user can select any dropdown lists. Finally I want to trigger an on change of location to make another ajax query. Unfortunately the code is not working. All code is in one test.js file
jQuery(document).ready(function($){
var locationDiv = document.getElementById('locations-ddl');
var selectionDivLoc = locationDiv.querySelector('.wpv-custom-search-filter__input');
selectionDivLoc.innerHTML = '<select id="location" name="location"></script>';
var repositoryDiv = document.getElementById('repositories-ddl');
var selectionDivRep = repositoryDiv.querySelector('.wpv-custom-search-filter__input');
selectionDivRep.innerHTML = '<select id="repository" name="repository"></script>';
var fondDiv = document.getElementById('fonds-ddl');
var selectionDivFond = fondDiv.querySelector('.wpv-custom-search-filter__input');
selectionDivFond.innerHTML = '<select id="fond" name="fond"></script>';
var seriesDiv = document.getElementById('series-ddl');
var selectionDivSeries = seriesDiv.querySelector('.wpv-custom-search-filter__input');
selectionDivSeries.innerHTML = '<select id="series" name="series"></script>';
$.ajax({
'url' : ajaxurl,
data: {
'action':'get_locations', // This is our PHP function below
},
success:function(data) {
// This outputs the result of the ajax request (The Callback)
$("#location").replaceWith(data);
},
error: function(errorThrown){
window.alert(errorThrown);
}
});
jQuery('#location').change(function(){
window.alert('yep');
$.ajax({
'url' : ajaxurl,
data: {
'action':'test', // This is our PHP function below
},
success:function(data) {
window.alert(data);
},
error: function(errorThrown){
window.alert(errorThrown);
}
});
});