jquery/jquery-ui

the select is not working in mobile

Imdad-cr7 opened this issue · 2 comments

$(document).on('input', '#location', function(e) {
        $.ajax({
            url: '<?php echo $sm['config']['site_url']; ?>worldcities.json',
            dataType: 'json',  // Corrected dataType
            success: function (citiesData) {

            // Extract city names from the data
            var cityNames = [];
            var cityDataMap = {}; // Map to store city data by name

            citiesData.forEach(city => {
                const cityName = city.city_ascii.toLowerCase();
                cityNames.push(cityName);
                cityDataMap[cityName] = {
                    latitude: city.lat,
                    longitude: city.lng,
                    country: city.country,
                    cityName: city.city
                };
            });

            // Initialize the autocomplete functionality on the input field
            $('#location').autocomplete({
                source: function (request, response) {
                    // Filter the cities based on user input
                    const term = request.term.toLowerCase();
                    const filteredCities = cityNames.filter(city => city.includes(term));
                    response(filteredCities);
                },
                minLength: 1,
                select: function (event, ui) {
                    
                    console.log('click event triggered =>', ui, event);

                    // Get the selected city
                    // const selectedCityName = $('#loc').val();                    
                    const selectedCityName = ui.item.value;
                    console.log('selectedCityName =>', selectedCityName);

                    // Find the city in the map
                    const selectedCityData = cityDataMap[selectedCityName];
                    console.log(selectedCityData);

                    if (selectedCityData) {
                        var lat = selectedCityData.latitude;
                        var lng = selectedCityData.longitude;
                        var city = selectedCityData.cityName;
                        var country = selectedCityData.country;
                        message = userId + ',' + lat + ',' + lng + ',' + city + ',' + country;

                        $.ajax({
                            url: request_source() + '/api.php',
                            data: {
                                action: "updateLocation",
                                query: message
                            },
                            type: "get",
                            dataType: "JSON",
                            success: function (response) {
                                // Handle success response as needed
                            },
                            error: function (error) {
                                console.error('Error updating location:', error);
                            }
                        });
                    }

                    // Update the input fields with the selected city's information
                    $('#locality').val(selectedCityData.cityName);
                    $('#lat').val(selectedCityData.latitude);
                    $('#lng').val(selectedCityData.longitude);
                    $('#country').val(selectedCityData.country);
                }
            });
        },
        error: function (error) {
            console.error('Error loading city information:', error);
        }
        });  
    })

this is the code its working fine in desktop but not in mobile when i click with mouse it does not work but when i use arrow to slect and press enter then it works but not in select please help me out with this

EDIT by @mgol: code formatting fixed

Thanks for the report. Does the issue you describe exist when jQuery UI 1.12.1 is used or only with jQuery UI 1.13.0 or newer?

Also, a minimal isolated test case would help. This one is not minimal, it has a lot of superfluous code; please spend some time on minimizing it if you want to increase chances your issue will be addressed.

As stated before: we need a demo (test case) for this. Please provide one.