the select is not working in mobile
Imdad-cr7 opened this issue · 2 comments
Imdad-cr7 commented
$(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 commented
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 commented
As stated before: we need a demo (test case) for this. Please provide one.