Ajax submit/save without page refresh

More
3 years 7 months ago #116346 by Bigred01
Bigred01 created the topic: Ajax submit/save without page refresh
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.

Please Log in or Create an account to join the conversation.

More
2 years 4 months ago #135690 by Bigred01
Bigred01 replied the topic: Ajax submit/save without page refresh
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();
        });
    });
The following user(s) said Thank You: Ben_V

Please Log in or Create an account to join the conversation.

More
2 years 4 months ago #135712 by Ben_V
Ben_V replied the topic: Ajax submit/save without page refresh

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:
  • 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)

Please Log in or Create an account to join the conversation.

More
2 years 4 months ago #135733 by Bigred01
Bigred01 replied the topic: Ajax submit/save without page refresh
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;
	    ............

Please Log in or Create an account to join the conversation.

More
1 year 2 months ago #156926 by csknfrt
csknfrt replied the topic: Ajax submit/save without page refresh
How I can add to the my survey? Would you mind adding example? *.lss , template etc.

Please Log in or Create an account to join the conversation.

More
1 year 1 month ago #156933 by Bigred01
Bigred01 replied the topic: Ajax submit/save without page refresh
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.

Please Log in or Create an account to join the conversation.

More
1 year 1 month ago #156949 by DenisChenu
DenisChenu replied the topic: Ajax submit/save without page refresh

Ben_V wrote:

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:
  • 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 .

Please Log in or Create an account to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now
Join our Newsletter!