if is possible, how to 'cache' the survey?

[dack94]

Are you requesting a feature, reporting a bug or asking a question?

question

What is the current behavior?

i've a survey with more or less 200 questions. there is a lot of html and it took several seconds in order to be loaded...

my question is... is there a way to 'cache' the survey ?

the user can go through this page (that contains the survey) multiple times...and it will be a pain from the user point of view. I take a look to the property lazyRowsRendering and set it to true (via survey.lazyRowsRendering cause survey.settings is undefined in my case....tell me if i'm doing something wrong) but it seems that it doesn't work :(

seen on source code that lazyRowsRendering is "This feature is experimantal".

Thanks.

What is the expected behavior?

How would you reproduce the current behavior (if this is a bug)?

Provide the test code and the tested page URL (if applicable)

Tested page URL:

Test code

your_code_here

Specify your

• browser: Chrome
• browser version: 80.0.3987.132
• surveyjs platform (angular or react or jquery or knockout or vue): jquery
• surveyjs version: 1.8.28

[tsv2013]

The lazyRowsRendering option is used to postpone rendering of survey elements currently are not visible in the viewport. Such elements become visible as user scrolls them into view port. This should reduce the initial loading time of a survey loading.

Here is the demo on our site with ~1000 questions - https://surveyjs.io/Examples/Library?id=survey-lazy&platform=jQuery&theme=modern

Could you share a minimal working sample illustrating your issue?

[dack94]

i'm on version 1.8.28 but the thing is that if i try to set survey.settings.lazyRowsRendering = true; js goes through an error cause survey.settings is undefined...

tried on this plunker to use https://embed.plnkr.co/wrzNfGBUgoEiFIaWHNCo/

Survey.settings.lazyRowsRendering = true;

but not able...seems that the object 'settings' doesn't exists... do you have any idea ?

Survey.Survey.cssType = "bootstrap";
Survey.defaultBootstrapCss.navigationButton = "btn btn-green";

Survey.JsonObject.metaData.addProperty("dropdown", {name: "dateFormat", default: "mm/dd/yy", choices: ["mm/dd/yy", "yy-mm-dd", "d M, y", "d MM, y", "DD, d MM, yy", "'day' d 'of' MM 'in the year' yy"]});

Survey.settings.lazyRowsRendering = true;

window.survey = new Survey.Model({
    pages: [
        { name:"page1", questions: [
            {name:"date", type:"text", inputType:"date", title: "Your favorite date:", dateFormat: "mm/dd/yy", isRequired: true},
            {name:"date2", type:"text", inputType:"date", title: "Your favorite date:", dateFormat: "mm/dd/yy", isRequired: true},
            {name:"date3", type:"text", inputType:"date", title: "Your favorite date:", dateFormat: "mm/dd/yy", isRequired: true},
            {name:"date4", type:"text", inputType:"date", title: "Your favorite date:", dateFormat: "mm/dd/yy", isRequired: true},
            {name:"date5", type:"text", inputType:"date", title: "Your favorite date:", dateFormat: "mm/dd/yy", isRequired: true},
            {name:"date6", type:"text", inputType:"date", title: "Your favorite date:", dateFormat: "mm/dd/yy", isRequired: true},
            {name:"date7", type:"text", inputType:"date", title: "Your favorite date:", dateFormat: "mm/dd/yy", isRequired: true},
            {name:"date8", type:"text", inputType:"date", title: "Your favorite date:", dateFormat: "mm/dd/yy", isRequired: true},
            {name:"date9", type:"text", inputType:"date", title: "Your favorite date:", dateFormat: "mm/dd/yy", isRequired: true},
            {name:"date45", type:"text", inputType:"date", title: "Your favorite date:", dateFormat: "mm/dd/yy", isRequired: true},
            {name:"date55", type:"text", inputType:"date", title: "Your favorite date:", dateFormat: "mm/dd/yy", isRequired: true},
            {name:"date66", type:"text", inputType:"date", title: "Your favorite date:", dateFormat: "mm/dd/yy", isRequired: true},
            {name:"date123", type:"text", inputType:"date", title: "Your favorite date:", dateFormat: "mm/dd/yy", isRequired: true},
            {name:"date321", type:"text", inputType:"date", title: "Your favorite date:", dateFormat: "mm/dd/yy", isRequired: true},
            {name:"date159", type:"text", inputType:"date", title: "Your favorite date:", dateFormat: "mm/dd/yy", isRequired: true},
            {name:"date951", type:"text", inputType:"date", title: "Your favorite date:", dateFormat: "mm/dd/yy", isRequired: true},
            {name:"date45", type:"text", inputType:"date", title: "Your favorite date:", dateFormat: "mm/dd/yy", isRequired: true}
            ,{name:"date66", type:"text", inputType:"date", title: "Your favorite date:", dateFormat: "mm/dd/yy", isRequired: true}
            ,{name:"date75", type:"text", inputType:"date", title: "Your favorite date:", dateFormat: "mm/dd/yy", isRequired: true}
            ,{name:"date17", type:"text", inputType:"date", title: "Your favorite date:", dateFormat: "mm/dd/yy", isRequired: true},
            {name:"date16", type:"text", inputType:"date", title: "Your favorite date:", dateFormat: "mm/dd/yy", isRequired: true}
            ,{name:"date111", type:"text", inputType:"date", title: "Your favorite date:", dateFormat: "mm/dd/yy", isRequired: true}
            ,{name:"date15", type:"text", inputType:"date", title: "Your favorite date:", dateFormat: "mm/dd/yy", isRequired: true}
            ,{name:"date14", type:"text", inputType:"date", title: "Your favorite date:", dateFormat: "mm/dd/yy", isRequired: true},
            {name:"date13", type:"text", inputType:"date", title: "Your favorite date:", dateFormat: "mm/dd/yy", isRequired: true},
            {name:"date12", type:"text", inputType:"date", title: "Your favorite date:", dateFormat: "mm/dd/yy", isRequired: true},
            {name:"date11", type:"text", inputType:"date", title: "Your favorite date:", dateFormat: "mm/dd/yy", isRequired: true}
        ]}
    ]
});
survey.onComplete.add(function(result) {
    document.querySelector('#surveyResult').innerHTML = "result: " + JSON.stringify(result.data);
});

var widget = {
    name: "datepicker",
    htmlTemplate: "<input class='widget-datepicker' type='text' style='width: 100%;'>",
    isFit: function(question) {
        return question.getType() === 'text' && question.inputType === 'date';
    },
    afterRender: function(question, el) {
        var $el;

        $el = $(el);

        var widget = $el.datepicker({
            dateFormat: question.dateFormat,
            onSelect: function(dateText) {
                question.value = dateText;
            }
        });
        question.valueChangedCallback = function() {
            widget.datepicker('setDate', new Date(question.value));
        }
        question.valueChangedCallback();
        question.value = new Date();
    },
    willUnmount: function(question, el) {

        $(el).datepicker("destroy");

    }
}

Survey.CustomWidgetCollection.Instance.addCustomWidget(widget);

survey.render("surveyElement");

window.surveyForceUpdate = function() {
    document.getElementById("surveyElement").innerHTML = "";

    survey.render();

}

[tsv2013]

Your plunker is using the very old version of SurveyJS Library - 0.12

Here is the updated plunker - https://plnkr.co/edit/0k8ZSSGxXg8vZbP2 It works ok for me.

[dack94]

ahhhh yep..got it...but...in the example that you provided , there isn't a real lazyloading...right ? all the questions are shown at the same moment