Ajax submit/save without page refresh

Mehr
4 Jahre 2 Monate her #116346 von Bigred01
COM_KUNENA_MESSAGE_CREATED_NEW
Hey Everyone.

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.

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

LimeSurvey Partners
Mehr
2 Jahre 10 Monate her #135690 von Bigred01
COM_KUNENA_MESSAGE_REPLIED_NEW
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.
 $(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();
        });
    });
Folgende Benutzer bedankten sich: Ben_V

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
2 Jahre 10 Monate her #135712 von Ben_V
COM_KUNENA_MESSAGE_REPLIED_NEW

Bigred schrieb: 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:
  • Neutral & very clean template (closed to skeletonquest flatblue )
  • Clear and short questions & answer options
  • Mainly based on radio questions displayed page per page with auto-submission selecting the option
  • Few arrays with only 3 columns max.
  • Lateral transition of the page (header staying in place... only questions seem moving). Big impression of fluidity

I can't access this survey again (token controlled) but the next time I'll take it with a desktop PC and look inside :)

Benoît

EM Variables => bit.ly/1TKQyNu | EM Roadmap => bit.ly/1UTrOB4
Last Releases => 2.6x.x goo.gl/ztWfIV | 2.06/2.6.x => bit.ly/1Qv44A1
Demo Surveys => goo.gl/HuR6Xe (already included in /docs/demosurveys)

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
2 Jahre 10 Monate her #135733 von Bigred01
COM_KUNENA_MESSAGE_REPLIED_NEW
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.
    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;
	    ............

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
1 Jahr 8 Monate her #156926 von csknfrt
COM_KUNENA_MESSAGE_REPLIED_NEW
How I can add to the my survey? Would you mind adding example? *.lss , template etc.

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
1 Jahr 8 Monate her #156933 von Bigred01
COM_KUNENA_MESSAGE_REPLIED_NEW
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.

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
1 Jahr 8 Monate her #156949 von DenisChenu
COM_KUNENA_MESSAGE_REPLIED_NEW

Ben_V schrieb:

Bigred schrieb: 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:
  • Neutral & very clean template (closed to skeletonquest flatblue )
  • Clear and short questions & answer options
  • Mainly based on radio questions displayed page per page with auto-submission selecting the option
  • Few arrays with only 3 columns max.
  • Lateral transition of the page (header staying in place... only questions seem moving). Big impression of fluidity

I didn't work on THIS one, but something like that : demonstration.sondages.pro/374469?newtest=Y ?

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand (or search sondages pro).
An error happen ? Before make a new topic : remind the Debug mode .

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
2 Monate 2 Wochen her #178924 von workloopteam
COM_KUNENA_MESSAGE_REPLIED_NEW
Hi Denis,

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

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Mehr
2 Monate 2 Wochen her #178965 von DenisChenu
COM_KUNENA_MESSAGE_REPLIED_NEW
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 service on demand (or search sondages pro).
An error happen ? Before make a new topic : remind the Debug mode .
Folgende Benutzer bedankten sich: workloopteam

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Jetzt loslegen!

Melden Sie sich jetzt an, und erstellen Sie in wenigen Minuten Ihre erste Umfrage.

Account einrichten

Abonnieren Sie unseren Newsletter

Abonnieren Sie unseren Newsletter für alle Neuigkeiten rund um LimeSurvey
captcha