- Posts: 89
- Thank you received: 0
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Autocomplete text input to grab location details to zoom onto map
- KhemrajC
- Topic Author
- Offline
- Premium Member
Less
More
4 years 6 days ago #197495
by KhemrajC
Replied by KhemrajC on topic Autocomplete text input to grab location details to zoom onto map
Hi,
Is it possible to have map style set to Humanitarian on load?
Thanks and regards
Is it possible to have map style set to Humanitarian on load?
Thanks and regards
Attachments:
The topic has been locked.
- KhemrajC
- Topic Author
- Offline
- Premium Member
Less
More
- Posts: 89
- Thank you received: 0
4 years 6 days ago #197529
by KhemrajC
Replied by KhemrajC on topic Autocomplete text input to grab location details to zoom onto map
Hi,
I attempted by mixing the codes for the GPS and Autocomplete by using a switch case. Only the GPS executes.
Whatever else I tried, the autocomplete just does not execute when it is mixed with the GPS code.
LSS attached and here is the code:
Location:<button class="gpsLink" type="button">Get GPS Data</button><script type="text/javascript" charset="utf-8">
<link href="/upload/surveys/{SID}/files/jquery-ui.min.css" rel="stylesheet" type="text/css" /> <script src="/upload/surveys/{SID}/files/jquery-ui.min.js"></script> <script src="/upload/surveys/{SID}/files/jquery.csv.min.js"></script> <script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:complete',function() {
var x = 0;
myFunction(x);
$('.gpsLink').click(function(){
var x = 1;
myFunction(x);
});
function myFunction(x) {
switch (x) {
case 0:
// Identify this question
var thisQuestion = $('#question{QID}');
// Hide the second input
$('.question-item:eq(1)', thisQuestion).hide();
var url = "/upload/surveys/{SID}/files/NAMES_cleaned.csv";
var Names = [];
var Coords = { };
$.get(url, function(data){
fullArray = $.csv.toArrays(data);
$(fullArray).each(function(i, item){
Names.push(item[0]);
Coords[item[0].toLowerCase()] = item[1];
});
// Initiate the Autocomplete plugin
$('input[type=text]:eq(0)', thisQuestion).autocomplete({
minLength: 2,
source: Names,
select: function(event, ui) {
$('input[type=text]:eq(1)', thisQuestion).val(Coords[ui.item.value.toLowerCase()].replace(/;/, ' '));
// Auto-submit
if($.trim($('input[type=text]:eq(1)', thisQuestion).val()) != '') {
$('#ls-button-submit').trigger('click');
}
}
}).on('change', function(e) {
$('input[type=text]:eq(1)', thisQuestion).val(Coords[$.trim($(this).val()).toLowerCase()].replace(/;/, ' '));
// Auto-submit
if($.trim($('input[type=text]:eq(1)', thisQuestion).val()) != '') {
$('#ls-button-submit').trigger('click');
}
});
});
alert("Case 0");
break;
case 1:
getGPS();
function getGPS() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showGPS, gpsError);
} else {
$("#answer{SGQ}SQ003").val('No GPS Functionality');
}
}
function gpsError(error) {
alert('GPS Error: '+error.code+', '+error.message);
}
function showGPS(position) {
$("#answer{SGQ}SQ003").val(position.coords.latitude+';'+position.coords.longitude).trigger('keyup');
}
alert("Case 1");
break;
}
}
});
</script>
Any idea?
Thanks and regards
I attempted by mixing the codes for the GPS and Autocomplete by using a switch case. Only the GPS executes.
Whatever else I tried, the autocomplete just does not execute when it is mixed with the GPS code.
LSS attached and here is the code:
Location:<button class="gpsLink" type="button">Get GPS Data</button><script type="text/javascript" charset="utf-8">
<link href="/upload/surveys/{SID}/files/jquery-ui.min.css" rel="stylesheet" type="text/css" /> <script src="/upload/surveys/{SID}/files/jquery-ui.min.js"></script> <script src="/upload/surveys/{SID}/files/jquery.csv.min.js"></script> <script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:complete',function() {
var x = 0;
myFunction(x);
$('.gpsLink').click(function(){
var x = 1;
myFunction(x);
});
function myFunction(x) {
switch (x) {
case 0:
// Identify this question
var thisQuestion = $('#question{QID}');
// Hide the second input
$('.question-item:eq(1)', thisQuestion).hide();
var url = "/upload/surveys/{SID}/files/NAMES_cleaned.csv";
var Names = [];
var Coords = { };
$.get(url, function(data){
fullArray = $.csv.toArrays(data);
$(fullArray).each(function(i, item){
Names.push(item[0]);
Coords[item[0].toLowerCase()] = item[1];
});
// Initiate the Autocomplete plugin
$('input[type=text]:eq(0)', thisQuestion).autocomplete({
minLength: 2,
source: Names,
select: function(event, ui) {
$('input[type=text]:eq(1)', thisQuestion).val(Coords[ui.item.value.toLowerCase()].replace(/;/, ' '));
// Auto-submit
if($.trim($('input[type=text]:eq(1)', thisQuestion).val()) != '') {
$('#ls-button-submit').trigger('click');
}
}
}).on('change', function(e) {
$('input[type=text]:eq(1)', thisQuestion).val(Coords[$.trim($(this).val()).toLowerCase()].replace(/;/, ' '));
// Auto-submit
if($.trim($('input[type=text]:eq(1)', thisQuestion).val()) != '') {
$('#ls-button-submit').trigger('click');
}
});
});
alert("Case 0");
break;
case 1:
getGPS();
function getGPS() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showGPS, gpsError);
} else {
$("#answer{SGQ}SQ003").val('No GPS Functionality');
}
}
function gpsError(error) {
alert('GPS Error: '+error.code+', '+error.message);
}
function showGPS(position) {
$("#answer{SGQ}SQ003").val(position.coords.latitude+';'+position.coords.longitude).trigger('keyup');
}
alert("Case 1");
break;
}
}
});
</script>
Any idea?
Thanks and regards
Attachments:
The topic has been locked.
- KhemrajC
- Topic Author
- Offline
- Premium Member
Less
More
- Posts: 89
- Thank you received: 0
4 years 5 days ago #197612
by KhemrajC
Replied by KhemrajC on topic Autocomplete text input to grab location details to zoom onto map
Hi,
I attempted it using:
$('#question{QID} input:radio[name=leaflet-base-layers]:eq(1)').prop('checked', true).trigger('change');
Logically, it should be correct that function to access that specific second radio button.
However, nothing happens, may be cause the radio selection are hidden and only show up upon mouseover!
Please assist.
Thanks regards
I attempted it using:
$('#question{QID} input:radio[name=leaflet-base-layers]:eq(1)').prop('checked', true).trigger('change');
Logically, it should be correct that function to access that specific second radio button.
However, nothing happens, may be cause the radio selection are hidden and only show up upon mouseover!
Please assist.
Thanks regards
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10109
- Thank you received: 3595
4 years 4 days ago #197693
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic Autocomplete text input to grab location details to zoom onto map
Attempted what?I attempted it using:
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
- KhemrajC
- Topic Author
- Offline
- Premium Member
Less
More
- Posts: 89
- Thank you received: 0
4 years 4 days ago #197700
by KhemrajC
Replied by KhemrajC on topic Autocomplete text input to grab location details to zoom onto map
Hi TPartner,
Glad to hear back from you. Trust all is ok.
As per previous related posts:
Is it possible to have the map style set to Humanitarian on load (pls see attachment)?
Then I tried this:
$('#question{QID} input:radio[name=leaflet-base-layers]:eq(1)').prop('checked', true).trigger('change');
Logically, it should be correct for that function to access that specific second radio button.
However, nothing happens, may be cause the radio selection are hidden and only show up upon mouseover!
Please figure out my mistake.
Thanks and regards
Glad to hear back from you. Trust all is ok.
As per previous related posts:
Is it possible to have the map style set to Humanitarian on load (pls see attachment)?
Then I tried this:
$('#question{QID} input:radio[name=leaflet-base-layers]:eq(1)').prop('checked', true).trigger('change');
Logically, it should be correct for that function to access that specific second radio button.
However, nothing happens, may be cause the radio selection are hidden and only show up upon mouseover!
Please figure out my mistake.
Thanks and regards
Attachments:
The topic has been locked.
- KhemrajC
- Topic Author
- Offline
- Premium Member
Less
More
- Posts: 89
- Thank you received: 0
4 years 4 days ago #197702
by KhemrajC
Replied by KhemrajC on topic Autocomplete text input to grab location details to zoom onto map
Hi TPartner,
Please see also see my previous posts:
I wish to achieve this,
www.limesurvey.org/forum/can-i-do-this-w...-map?start=15#197494
And this is my attempt,
www.limesurvey.org/forum/can-i-do-this-w...-map?start=15#197529
Both have the LSS attached.
Thank you very much.
Best regards
Please see also see my previous posts:
I wish to achieve this,
www.limesurvey.org/forum/can-i-do-this-w...-map?start=15#197494
And this is my attempt,
www.limesurvey.org/forum/can-i-do-this-w...-map?start=15#197529
Both have the LSS attached.
Thank you very much.
Best regards
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10109
- Thank you received: 3595
4 years 4 days ago - 4 years 4 days ago #197744
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic Autocomplete text input to grab location details to zoom onto map
Is it possible to have the map style set to Humanitarian on load (pls see attachment)?
Code:
<script type="text/javascript" charset="utf-8"> $(document).on('ready pjax:complete',function() { $('#map_{SGQ}').css({ 'position': 'absolute', 'left': '-9999em' }); setTimeout(function() { $('.leaflet-control-layers-base label:eq(1) :radio').trigger('click'); $('#map_{SGQ}').css({ 'position': 'relative', 'left': 'auto' }); }, 1000); }); </script>
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 4 years 4 days ago by tpartner.
The following user(s) said Thank You: KhemrajC
The topic has been locked.
- KhemrajC
- Topic Author
- Offline
- Premium Member
Less
More
- Posts: 89
- Thank you received: 0
4 years 3 days ago #197823
by KhemrajC
Replied by KhemrajC on topic Autocomplete text input to grab location details to zoom onto map
Hi TPartner,
You are a real JQuery master!!!
The layer is indeed being automatically selected.
Thanks a lot.
Please see also see my previous posts:
I wish to achieve this,
www.limesurvey.org/forum/can-i-do-this-w...-map?start=15#197494
And this is my attempt,
www.limesurvey.org/forum/can-i-do-this-w...-map?start=15#197529
LSS are attached to these posts.
I am waiting for your reply to know about the next step forward.
Thanks and regards
You are a real JQuery master!!!
The layer is indeed being automatically selected.
Thanks a lot.
Please see also see my previous posts:
I wish to achieve this,
www.limesurvey.org/forum/can-i-do-this-w...-map?start=15#197494
And this is my attempt,
www.limesurvey.org/forum/can-i-do-this-w...-map?start=15#197529
LSS are attached to these posts.
I am waiting for your reply to know about the next step forward.
Thanks and regards
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10109
- Thank you received: 3595
4 years 3 days ago - 4 years 3 days ago #197865
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic Autocomplete text input to grab location details to zoom onto map
This script will apply autocomplete to the first sub-question of a multiple-short-text question and add a button to the third sub-question that will get the GPS coordinates (if allowed).
Both the autocomplete function and the getGPS() function will load the second sub-question with GPS coordinates formatted for use as the default location for the map.
Sample survey attached:
Both the autocomplete function and the getGPS() function will load the second sub-question with GPS coordinates formatted for use as the default location for the map.
Code:
<link href="/upload/surveys/{SID}/files/jquery-ui.min.css" rel="stylesheet" type="text/css" /> <script src="/upload/surveys/{SID}/files/jquery-ui.min.js"></script> <script src="/upload/surveys/{SID}/files/jquery.csv.min.js"></script> <script type="text/javascript" charset="utf-8"> $(document).on('ready pjax:complete',function() { // Identify this question var thisQuestion = $('#question{QID}'); var url = "/upload/surveys/{SID}/files/NAMES_cleaned.csv"; // Hide the second input $('.question-item:eq(1)', thisQuestion).hide(); var Names = []; var Coords = { }; $.get(url, function(data){ fullArray = $.csv.toArrays(data); $(fullArray).each(function(i, item){ Names.push(item[0]); Coords[item[0].toLowerCase()] = item[1]; }); // Initiate the Autocomplete plugin $('input[type=text]:eq(0)', thisQuestion).autocomplete({ minLength: 2, source: Names, select: function(event, ui) { $('input[type=text]:eq(1)', thisQuestion).val(Coords[ui.item.value.toLowerCase()].replace(/;/, ' ')).trigger('keyup'); $('input[type=text]:eq(2)', thisQuestion).val('').trigger('keyup'); } }).on('change', function(e) { $('input[type=text]:eq(1)', thisQuestion).val(Coords[$.trim($(this).val()).toLowerCase()].replace(/;/, ' ')).trigger('keyup'); $('input[type=text]:eq(2)', thisQuestion).val('').trigger('keyup'); }); }); // Insert the GPS button $('input[type=text]:eq(2)', thisQuestion).before('<button type="button" class="btn btn-primary gps-button" style="margin-bottom: 5px;">Get GPS Coordinates</button>'); // Get GPS coordinates $('.gps-button', thisQuestion).on('click', function(e) { getGPS(); }); function getGPS() { disableButtons(); if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showGPS, gpsError); } else { $('input[type=text]:eq(2)', thisQuestion).val('No GPS Functionality'); enableButtons(); } } function gpsError(error) { alert('GPS Error: '+error.code+', '+error.message); enableButtons(); } function showGPS(position) { $('input[type=text]:eq(0)', thisQuestion).val('').trigger('keyup'); $('input[type=text]:eq(1)', thisQuestion).val(position.coords.latitude+' '+position.coords.longitude).trigger('keyup'); $('input[type=text]:eq(2)', thisQuestion).val(position.coords.latitude+';'+position.coords.longitude).trigger('keyup'); enableButtons(); } function disableButtons() { $('#ls-button-submit').prop('disabled', true); $('.gps-button', thisQuestion).prop('disabled', true); } function enableButtons() { $('#ls-button-submit').prop('disabled', false); $('.gps-button', thisQuestion).prop('disabled', false); } }); </script>
Sample survey attached:
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 4 years 3 days ago by tpartner.
The following user(s) said Thank You: KhemrajC
The topic has been locked.
- KhemrajC
- Topic Author
- Offline
- Premium Member
Less
More
- Posts: 89
- Thank you received: 0
4 years 2 days ago #197886
by KhemrajC
Replied by KhemrajC on topic Autocomplete text input to grab location details to zoom onto map
Hi TPartner,
Just tested it and as usual it is doing the job. Hats off.
Is there any possibility to avoid the second sub question to accept input by the user though it is not affecting any functionality?
Also, I wish that once the autocomplete is selected or the gps button is successful, that next button is automatically activated to the map.
Thanks a lot.
Best regards
Just tested it and as usual it is doing the job. Hats off.
Is there any possibility to avoid the second sub question to accept input by the user though it is not affecting any functionality?
Also, I wish that once the autocomplete is selected or the gps button is successful, that next button is automatically activated to the map.
Thanks a lot.
Best regards
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10109
- Thank you received: 3595
4 years 2 days ago #197895
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic Autocomplete text input to grab location details to zoom onto map
The requirements here keep escalating. I'm afraid I'm done.
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The following user(s) said Thank You: DenisChenu
The topic has been locked.
- KhemrajC
- Topic Author
- Offline
- Premium Member
Less
More
- Posts: 89
- Thank you received: 0
4 years 2 days ago #197897
by KhemrajC
Replied by KhemrajC on topic Autocomplete text input to grab location details to zoom onto map
Hi,
You have really helped at the most complicated section and I am learning a lot from your codes.
I have now also shifted my attention to other part of the questionnaire.
Thanks a lot.
Best regards
You have really helped at the most complicated section and I am learning a lot from your codes.
I have now also shifted my attention to other part of the questionnaire.
Thanks a lot.
Best regards
The topic has been locked.