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();
});
});
