Survey-library: Browser Back button no working to go to previous question.

Created on 6 Nov 2017 · 13Comments · Source: surveyjs/survey-library

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

Ask A question

What is the current behavior?

Browser Back not working to go to previous step

What is the expected behavior?

Wanna use browser back button to go to previous question

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:
browser version:
surveyjs platform (angular or react or jquery or knockout or vue):
surveyjs version:

question

Source

AhsanShafique

Most helpful comment

@robinwkurtz @AhsanShafique Here is the code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Window localition hash - jQuery</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://surveyjs.azureedge.net/0.95.0/survey.jquery.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css">
</head>
<body>
    <form>
    <div id="surveyElement"></div>
<script>
    Survey.Survey.cssType = "bootstrap";
    Survey.defaultBootstrapCss.navigationButton = "btn btn-green";

    var survey = new Survey.Model({
        pages: [
            { elements: [{type:"text", name: "question1"}, {type:"text", name: "question2"}]},
            { elements: [{type:"text", name: "question3"}, {type:"text", name: "question4"}, {type:"text", name: "question5"}]},
            { elements: [{type:"text", name: "question6"}, {type:"text", name: "question7"}, {type:"text", name: "question8"}, {type:"text", name: "question9"}]},
            { elements: [{type:"text", name: "question10"}, {type:"text", name: "question11"}, {type:"text", name: "question12"}]},
            { elements: [{type:"text", name: "question13"}, {type:"text", name: "question14"}]}
        ]
    });
    survey.onCurrentPageChanged.add(function(survey, options){
        window.location.hash = "page" + (survey.currentPageNo + 1);
    });
    function gotoPageByHash(hash) {
        if(!hash || hash.indexOf("#page") != 0) return;
        hash = hash.replace("#page", "");
        var index = Number.parseInt(hash);
        if(index > 0) {
            index --;
            survey.currentPageNo = index;
        }
    }
    gotoPageByHash(window.location.hash);
    window.onhashchange = function () {
        gotoPageByHash(window.location.hash);
    }    
    $("#surveyElement").Survey({ 
        model: survey 
    });
</script>
</body>
</html>

andrewtelnov on 15 Nov 2017

❤2

All 13 comments

@AhsanShafique I guess you are talking about next/prev buttons and back button. You can implement this functionality by yourself by using survey.onCurrentPageChanged event. The implementation is depended from the platform you are using.

Thank you,
Andrew

andrewtelnov on 6 Nov 2017

Hi Andrew,
I am taking about browser back button. is there any possibilities that browser back button works like previous button and same as for browser next button

Please find attachment for further reference.

2017-11-07_0943

AhsanShafique on 7 Nov 2017

@AhsanShafique I have understood you in the first message.
As I told, you have to implement it by yourself, based on your SPA logic and framework you are using: angular, react... We can't control it on widget level.
Please take a look at this example: https://surveyjs.io/Examples/Library/?id=survey-customnavigation
You have to hide the build-in navigation and render your own.
You have to change the url hash, by adding for example, #pageNo-0 (#pageNo-1)... on pressing your next, prev buttons and set the survey page accordingly.

Thank you,
Andrew

andrewtelnov on 7 Nov 2017

Hey @andrewtelnov, is there any documentation on the url hash?

I'm not able to change my current page based on the name or number (#pageNo-0 (#pageNo-1))

Thanks!

robinwkurtz on 13 Nov 2017

@robinwkurtz This functionality isn't implemented inside the SurveyJS package. Because it strongly depends on the certain application implementation. Thus there is no documentation describing the format of the page hash. As @andrewtelnov mentioned earlier, you can implement custom navigation on your own way: via subscribing "hash changed" event, or application routing event.

tsv2013 on 14 Nov 2017

Hello @tsv2013, thanks for you reply! 'Application routing event' is what I am looking for. That let me to #574 which mentions goToQuestion.. This might be my win.

I simply wanted to allow users to refresh without losing their place in the survey.

Thanks!

robinwkurtz on 14 Nov 2017

@robinwkurtz What JavaScript library/platform do yo use?
Actually all you need from surveyjs are:
survey.currentPageNo (from 0 to pageCount -1) and survey.onCurrentPageChanged event.

Thank you,
Andrew

andrewtelnov on 14 Nov 2017

@robinwkurtz I have modified the example in issue you have mentioned:
https://plnkr.co/edit/rBG9rV?p=preview
It uses onCurrentPageChanged event as well now.

Thank you,
Andrew

andrewtelnov on 14 Nov 2017

Hello @andrewtelnov, thanks for your help on this!

I'm currently using jQuery.

Having a hard time getting the gotoQuestion to fire 'onAfterRenderQuestion' due to my current page number being overwritten by 'onCurrentPageChange'.

survey.onCurrentPageChanged.add(function(survey, options){
    localStorage.setItem('survey', JSON.stringify({ currentPageNo: survey.currentPageNo }));
});

survey.onAfterRenderQuestion.add(function(survey, options){
    var localSurvey = JSON.parse(localStorage.getItem('survey'));
    gotoQuestion(localSurvey['currentPageNo']);
});

I think I am going about this problem wrong! Any advice/thoughts?

Thanks

robinwkurtz on 14 Nov 2017

@robinwkurtz @AhsanShafique Here is the code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Window localition hash - jQuery</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://surveyjs.azureedge.net/0.95.0/survey.jquery.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css">
</head>
<body>
    <form>
    <div id="surveyElement"></div>
<script>
    Survey.Survey.cssType = "bootstrap";
    Survey.defaultBootstrapCss.navigationButton = "btn btn-green";

    var survey = new Survey.Model({
        pages: [
            { elements: [{type:"text", name: "question1"}, {type:"text", name: "question2"}]},
            { elements: [{type:"text", name: "question3"}, {type:"text", name: "question4"}, {type:"text", name: "question5"}]},
            { elements: [{type:"text", name: "question6"}, {type:"text", name: "question7"}, {type:"text", name: "question8"}, {type:"text", name: "question9"}]},
            { elements: [{type:"text", name: "question10"}, {type:"text", name: "question11"}, {type:"text", name: "question12"}]},
            { elements: [{type:"text", name: "question13"}, {type:"text", name: "question14"}]}
        ]
    });
    survey.onCurrentPageChanged.add(function(survey, options){
        window.location.hash = "page" + (survey.currentPageNo + 1);
    });
    function gotoPageByHash(hash) {
        if(!hash || hash.indexOf("#page") != 0) return;
        hash = hash.replace("#page", "");
        var index = Number.parseInt(hash);
        if(index > 0) {
            index --;
            survey.currentPageNo = index;
        }
    }
    gotoPageByHash(window.location.hash);
    window.onhashchange = function () {
        gotoPageByHash(window.location.hash);
    }    
    $("#surveyElement").Survey({ 
        model: survey 
    });
</script>
</body>
</html>

andrewtelnov on 15 Nov 2017

❤2

Thank you @andrewtelnov.
1 more thing i would like to ask, is there any option that we can post every single question of server when user click on next and server return the next questions against the answer of previous question.

AhsanShafique on 16 Nov 2017

@AhsanShafique You may post the result on every page next, survey.sendResultOnPageNext = true;
but if you have to load the part of the survey, you would have to code this functionalty by yourself.

Thank you,
Andrew

andrewtelnov on 16 Nov 2017

Thanks @andrewtelnov !

robinwkurtz on 17 Nov 2017

Was this page helpful?

0 / 5 - 0 ratings