Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

the select is not working in mobile #2212

Open
Imdad-cr7 opened this issue Feb 15, 2024 · 2 comments
Open

the select is not working in mobile #2212

Imdad-cr7 opened this issue Feb 15, 2024 · 2 comments

Comments

@Imdad-cr7
Copy link

Imdad-cr7 commented Feb 15, 2024

$(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

@mgol
Copy link
Member

mgol commented Feb 19, 2024

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.

@fnagel
Copy link
Member

fnagel commented Mar 21, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Development

No branches or pull requests

3 participants