locked
App mysteriously unloads

    Question

  • I am developing an app to deliver surveys/questionnaires. Once the user has successfully logged in, s/he goes to a page (survyeslist.html) which displays a table listing the available surveys with a button alongside each to start a survey.  The document has this click handler in surveyslist.js:

        function handleClick (eventInfo) {
    
                    
    
            if(eventInfo.srcElement.id != "distributorEmail"){
    
                var actionToTake = eventInfo.srcElement.textContent;
    
                surveyId = eventInfo.srcElement.value;
    
                switch (actionToTake) {
    
                    case "Start Survey":
    
                        startSurvey(surveyId);
    
                        break;
    
                    case "Review/edit":
    
                        editing = true;
    
                        startSurvey(surveyId);
    
                        break;
    
                }
    
            }
    
                
    
        }

    That calls the startSurvey function which downloads the questions for that survey from the server and saves them in LocalState as a json file. The returned json is also converted to a javascript array named ‘questions’ and the startSurvey function eventually passes the array to the next page by calling the goToNextPage function:

        function goToNextPage(dbName, questions, dboptions, dbscales) {         document.getElementById("progressIndicator").style.display = "none";         WinJS.Navigation.navigate("/pages/survey/survey.html", { dbName: dbName, questions: questions, dboptions: dboptions,

    dbscales: dbscales, distributionName: distributionName, distributorEmail: distributorEmail, surveyId: surveyId, editing:editing });     }


    That next page (survey.html) contains a div for displaying the question text and a div for displaying the possible answers (which may be a textarea, radios, checkboxes etc.). survey.js writes the appropriate text into the div for the question text and then constructs the appropriate HTML for the div which contains the question options and then places the generated HTML into that div with:

    WinJS.Utilities.setInnerHTMLUnsafe(target, optionContent);

    where ‘target’ is the div to display the answer options and optionContent is the generated HTML.

    When survey.html is first displayed with the first question, it always displays fine, regardless of whether it consists of radio buttons, checkboxes or whatever. When I then click a button (‘btnContinue’) to proceed to the second question, the intention is that the same functions should be called again using the data for the next question. In other words, I don’t want to go to another page; I just want to rewrite those divs. However, the app just unloads, despite the fact that clicking that button just calls the same routines as were called to display the first question.

    If I step through the code, I find that, once it’s done all the stuff for creating the section with the answer options, the page displays just fine up until the point where it exits the handler for the click on btnContinue. At that point it goes back into the handleClick function of surveyslist.js (the javascript for the page which first handled the user’s selection of a survey). From there it drops into the beforeUnloadHandler of base.js. After that the app is unloaded.

    At first I thought it was objecting because maybe I was inserting invalid HTML, but that’s not the case. Even if I just insert the innerText ‘hello’, the behaviour is the same. The fact that it goes back into the click handler of the page (surveyslist.html) where I started from makes me think I’ve probably misunderstood how to navigate from one page to the next, though I can see that the unload function of that page (surveyslist.html) is called as expected.

    Any help you gurus can provide?

    Thursday, January 31, 2013 6:14 PM

Answers

  • Hi munder,

    From your description, it seems you're using WinJS.Navigation.navigate to reload page when you switch between different survay questions in your windows store app page, correct?

    If that's the case, I'd suggest you consider another approach. Because WinJS.Navigation.navigate will complete reload the current page (unload the curent page UI and load new page's DOM UI and perform some necessary page level processing such as intialize all WinJS controls in page html). For your case, you can try using data binding to populate the HTML UI for each survay question. You can define an html container (such a <div> element) which contains various sub elements to display the data of a single survay question. Each element can use "data-win-bind" attribute to specify data binding parameters. Then, you can call WinJS.Binding.processAll to bind the container element with a certain JSON object (your survay data object) so that those elements will be populated with proper data from the survay JSON object.

    #Quickstart: binding data and styles (Windows Store apps using JavaScript and HTML) (Windows)
    http://msdn.microsoft.com/en-us/library/windows/apps/hh700358.aspx

    #WinJS.Binding.processAll function (Windows)
    http://msdn.microsoft.com/en-us/library/windows/apps/br229846.aspx

    And at the initialize time ("ready" event) of your survay page, you can just call data binding to populate the survay question UI with the first survay question object. Whenever user switch question (move next or previous), you just retrieve the next or previous survay object and call the "WinJS.Binding.processAll" again to repopulate the container element.


    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by Song Tian Friday, February 08, 2013 2:24 AM
    Monday, February 04, 2013 7:14 AM
    Moderator

All replies

  • UPDATE:

    As I couldn't figure out why the code ended up inside the click handler of the previous document (surveyslist.html), I added "document.removeEventListener("click", handleClick);" to the unload function of that page. So now the code doesn't end up there. What happens is that the click handler for btnContinue calls a bunch of functions to create and update the HTML required to display the answer options. Stepping through the code and looking at the app, I can see that it really does do what is expected - in this case all relevant radios with their labels are displayed - until it finally exits the click handler for btnContinue, whereupon it drops straight into beforeUnloadHandler in base.js and thereafter produces a blank screen.

    Thursday, January 31, 2013 9:05 PM
  • UPDATE 2:

    In survey.html (the page in which I was modifying html on the fly), I had <form> tags enclosing the divs where both the question text and the answer options were displayed. I've removed those and it now all works. I don't see, though, why I shouldn't be able to change the content of divs on the fly if they are within a form. I'd be grateful for any pointers from anyone who knows. Thanks.

    Thursday, January 31, 2013 9:14 PM
  • Hi munder,

    From your description, it seems you're using WinJS.Navigation.navigate to reload page when you switch between different survay questions in your windows store app page, correct?

    If that's the case, I'd suggest you consider another approach. Because WinJS.Navigation.navigate will complete reload the current page (unload the curent page UI and load new page's DOM UI and perform some necessary page level processing such as intialize all WinJS controls in page html). For your case, you can try using data binding to populate the HTML UI for each survay question. You can define an html container (such a <div> element) which contains various sub elements to display the data of a single survay question. Each element can use "data-win-bind" attribute to specify data binding parameters. Then, you can call WinJS.Binding.processAll to bind the container element with a certain JSON object (your survay data object) so that those elements will be populated with proper data from the survay JSON object.

    #Quickstart: binding data and styles (Windows Store apps using JavaScript and HTML) (Windows)
    http://msdn.microsoft.com/en-us/library/windows/apps/hh700358.aspx

    #WinJS.Binding.processAll function (Windows)
    http://msdn.microsoft.com/en-us/library/windows/apps/br229846.aspx

    And at the initialize time ("ready" event) of your survay page, you can just call data binding to populate the survay question UI with the first survay question object. Whenever user switch question (move next or previous), you just retrieve the next or previous survay object and call the "WinJS.Binding.processAll" again to repopulate the container element.


    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by Song Tian Friday, February 08, 2013 2:24 AM
    Monday, February 04, 2013 7:14 AM
    Moderator