Before I start building this I just wanted to check here first to see if anyone has already found or released anything that allows for Ajax response table updates so a survey can be saved or submitted without the page reloading.
It doesn't seem too complicated but i'm still fairly green with server side programming so any advice before I start this (if it doesn't exist already) would be much appreciated (or if there is a better way to go about this).
My issue is with a one page survey built for mobile that has all javascript navigation and logic (needed to allow jumping around to any question in the survey). I have an ajax call that stops people from submitting when there is no internet, but when there is one bar of service the submit will hang resulting in the person having to refresh the page and losing all data.
I'm hoping this can be my solution to not having them refresh the page when the submit hangs.
If not.... I noticed the lime remote has add_response() and update_response() where you can pass in an array of answers and it will find the column that has the same name as the current key and set that response to the current value. I plan on using jQuery serialize() on the form then an Ajax post to a php file, building an array from the posted data, checking if that token has a response, if not add it with add_response() or update it with update_response() if it already exists.
Or if this is a terrible idea and there's a better way to go about this, I'm all ears.
So I totally forgot about this post I made a while back. The solution was pretty easy. Below is what I am currently using to achieve this.
In this script I serialize the form and append the value of the button pressed to the data, then post it to limesurvey as if it was a normal form submit. The server will respond with the full html string which will be used to replace whats on screen with a little bit of jQuery. I first check to see if the returned html contains the limesurvey form, if yes then we are still doing the survey. If not, then we termed, completed or ended up somewhere else other than a page with questions. We can now replace our current form with the html contents of the returned form. If you are to use this, you will probably have to modify the "div.outerframe.clearfix" selector to match your template. This is just a common container for me on complete and quota pages so its what I ended up using.
If you rely on outside libraries (for example imagetick) and other things that get bound on doc ready, you will need to wrap these in a function you can call when the ajax call is complete to rebind to the new form elements, then trigger the jQuery.ready() to fire them. This is the " loadScripts()" function below.
I haven't used it in production yet but i also haven't experienced any issues in my testing. Survey navigation is much faster and you now have the ability to add spinners or page transitions. I'm sure there are other case scenarios that will need to be added but its a good place to start for anyone wanting a zero page reload ajax survey experience using lime. (btw, im still using 2.05)
If you see something stupid in here or a better way to do something, please let me know.
Code:
$(document).on('click','.submit',function(e){
e.preventDefault();var direction = this.value;var data = $('#limesurvey').serialize()+"&move="+ direction;
$.ajax("//yoursurveydomain.com/index.php/survey",{
cache:false,
type:"POST",
data: data,
success:function(response){var$data= $(response);var limesurvey =$data.find("#limesurvey").html();if(typeof limesurvey !=="undefined"){
$('#limesurvey').html(limesurvey);
loadScripts();}else{//this will be a quota/term/complete or some other page without questions
$('div.outerframe.clearfix').html($data.filter('div.outerframe.clearfix').html());}},
error:function(response){}}).done(function(){//trigger any doc ready scripts we may have just loaded
jQuery.ready();});});
Bigred wrote: you now have the ability to add spinners or page transitions.
Last week I took a survey (for well-known scientific open access journal) with a small screen phone and I thought I've never seen a mobile survey like this, almost perfect:
Just a little update. I found that when adding this to a pre-programmed survey, I had a fair bit of logic running off of button clicks so the preventDefault() was doing some damage. I changed it to a form submit and I now just get the button value on click.
Code:
var submitDirection ="";
$(document).on('click','.submit',function(e){
submitDirection = this.value;});
$(document).on('submit',"#limesurvey",function(e){
e.preventDefault();var data = $('#limesurvey').serialize()+"&move="+ submitDirection;............
Sorry, I don't think I will be able to make a demo of it any time soon but if work lets up in the next month or so ill try to add one. Its a pretty dirty hack as well to be honest. I wouldn't use it unless you understand exactly what its doing and are able to debug/add functionality to it as a ton of scenarios are surely missing from the above script.
All it does though is submit the form using ajax, parses the response text/html and replaces the #limesurvey form with what was sent back, or if not a form, the content that was sent back (ex. quota/term/complete pages).
Then on success there is a function called loadScripts() that is meant to fire any scripts you have for survey styling (ex. imagetick or anything you modify the dom with).
If I do make a demo I will rewrite the above to something more reusable and try to account for as many scenarios as I can.
Bigred wrote: you now have the ability to add spinners or page transitions.
Last week I took a survey (for well-known scientific open access journal) with a small screen phone and I thought I've never seen a mobile survey like this, almost perfect:
Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member. -
Professional support
-
Plugins, theme and development
. I don't answer to private message.
This is an excellent survey UX. Would you be able to provide details on how to develop? I'm particularly interested in:
- the slide effect between questions (without refresh)
- the use of progress bar
Best regards
Mark
All is public : view-source:https://demonstration.sondages.pro/upload/templates/1question/template.js
function setTemplateCarousel(){
But it's done a 2.6lts. Usage of All in one page survey
Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member. -
Professional support
-
Plugins, theme and development
. I don't answer to private message.
The following user(s) said Thank You: workloopteam
Topic Author
