Javascript mystery error - Event listener does not fire

JavaScript gods!

I have a JS code here which does not work. Could someone please point out what I'm doing wrong here?

In the code below, the loadCountryList() function is called and I see a list of countries in the HTML datalist element. But the event listeners, responsible for detecting the changes in the input field does not work.

When I call the loadRegionList() function outside of the event listener, I get a proper server response.

I am instantiating the class inside another file like this:

if (document.querySelector(".rooms-page")) {
    // Room country filter
    new RoomRegionFiter(
        "id_country_input", 
        "country_datalist", 
        "region_datalist",
        csrftoken);
}

class RoomRegionFiter {
    constructor (id_country_input, country_datalist, region_datalist, csrftoken) {
        this.input = document.getElementById(id_country_input);
        this.country_dataList = document.getElementById(country_datalist);
        this.region_datalist = document.getElementById(region_datalist);
        this.csrftoken = csrftoken;

        this.initializeCountryEventListeners();
    }

    initializeCountryEventListeners() {
        this.loadCountryList()

        this.input.addEventListener("change", () => {
            console.info("Listening for changes")
            const selected_country = this.input.value;
            this.loadRegionList(selected_country);
        });

        this.input.addEventListener("input", () => {
            console.info("Listening for input")
            const selected_country = this.input.value;
            this.loadRegionList(selected_country);

        });
    };

    // Loads all the countries on page load
    async loadCountryList() {
        const protocol = window.location.protocol;
        const hostname = window.location.hostname;
        const port = window.location.port;
        const endPoint = `${protocol}//${hostname}:${port}/roomfiltercountry/`;
    
        try {
            const response = await fetch(endPoint, {
                method: "GET",
                headers: {
                    "Accept": "application/json",
                    "X-Requested-With": "XMLHttpRequest",
                    "X-CSRFToken": this.csrftoken
                }
            });
    
            if (!response.ok) {
                console.log("Response is not available");
            }
        
            const json_response = await response.json();
            const countries = json_response.countries

            let dataListOptions = ``;
            
            for (const country of countries) {
                dataListOptions += `<option value="${country.name}"></option>`
            }

            this.country_dataList.innerHTML = dataListOptions
    
        } catch (error) {
            console.log(error.message);
        }
    }

    // Whenever a country is selected, loads the regions
    async loadRegionList() {
        console.log("Building URL")
        const protocol = window.location.protocol;
        const hostname = window.location.hostname;
        const port = window.location.port;
        const endPoint = `${protocol}//${hostname}:${port}/roomfilterregion/`;
        const url = `${endPoint}?country=${encodeURIComponent(selected_country)}`;
        console.log(url)
    
        try {
            const response = await fetch(url, {
                method: "GET",
                headers: {
                    "Accept": "application/json",
                    "X-Requested-With": "XMLHttpRequest",
                    "X-CSRFToken": this.csrftoken
                },
            });
    
            if (!response.ok) {
                console.log("Response is not available");
            }
        
            const json_response = await response.json();
            const regions = json_response.regions

            console.log(json_response)
            console.log(regions)

            let dataListOptions = ``;
            
            for (const region of regions) {
                dataListOptions += `<option value="${region.name}"></option>`
            }

            this.region_datalist.innerHTML = dataListOptions
    
        } catch (error) {
            console.log(error.message);
        }
    }

};

Someone, please?

Вернуться на верх