Search code examples
javascriptwindows-8windows-8.1winjs

onloadingstatechanged does not fire when navigating back from another page


I have a page in my winjs app, and on the ready function I assign a function to the onloadingstatechanged event of a list view in the page. Then I check when that is compelte and so on and so forth as usual.

        var buttonsListView = document.querySelector(".buttons-container .itemslist").winControl;

        buttonsListView.onloadingstatechanged = function (args) {
            if (args.srcElement === buttonsListView.element && buttonsListView.loadingState === "complete") {

                //MY CODE HERE

                buttonsListView.onloadingstatechanged = null;
            }
        }.bind(this);

Here is the HTML:

            <div class="buttons-container">
                <div class="buttonTemplate" data-win-control="WinJS.Binding.Template">
                    <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{icon:'', type:'button'}" data-win-bind="winControl.label: buttonName; winControl.icon: icon"></button>
                </div>
                <div class="itemslist win-selectionstylefilled" data-win-control="WinJS.UI.ListView" data-win-options="{
                        layout: {type: WinJS.UI.GridLayout},
                        selectionMode: 'none',
                        itemTemplate: select('.buttons-container .buttonTemplate'),
                        itemDataSource: null,
                        oniteminvoked: RapportPage.buttonNavigate
                    }">
                </div>
            </div>

My problem is that if I navigate to another page and then press the back button, the ready event gets fired but the onloadingstatechanged does never happen.


Solution

  • I found the problem.

    Referring to the listview by class .itemslist it does not work. Something works differently in the listview when you are coming back from another page as opposed as to when you navigete to the page directly.

    So I just assigned an ID to the ListView div and then load the dom object like this instead:

    var buttonsListView = document.querySelector("#buttonList").winControl;