View doesn't hide when skipping ScrollableView in Dojo.mobile

StackOverflow https://stackoverflow.com/questions/13499169

  •  01-12-2021
  •  | 
  •  

Question

Creating a mobile Dojo application and ran into the following issue. I've searched here and elsewhere and have not seen anyone else having the issue. I'm new to Dojo, so it may just be that I'm doing something wrong.

Here's the programmatic behavior: In the first panel (div "one"), click the "+" button; Div "two" is skipped and div "three" is transitioned into view; Click "Cancel" and div "two" is skipped again and div "one" transitions back into view. This is all as it should be.

Here's the problem: When div "one" is transitioned back into view, a browser scrollbar appears and div "three" is still visible when you scroll to the bottom. This only happens once. Click "+" again, then "Cancel" again and div "three" is hidden as it should be and no scrollbar appears. In the HTML, if you switch divs "two" and "three", the improper behavior does not occur. Unfortunately, that cannot be my solution, as the app will need to transition in any given order.

In Chrome's development tools, if you watch the HTML elements, you'll notice that div "three"'s "visibility" property doesn't return to "hidden" until you have clicked "Cancel" the second time.

My guess is that it has something to do with the way I'm programmatically creating the views. Any help on this would be appreciated.

HTML (test.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.1/dojo/dojo.js" data-dojo-config="async: true"></script>
    <script type="text/javascript" src="script/test.js"></script>
</head>
<body>
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
</body>
</html>

JavaScript (test.js)

require([
'dojo/ready',                       'dijit/registry',               'dojox/mobile/parser',
'dojox/mobile/deviceTheme',         'dojox/mobile/compat',          'dojox/mobile/Icon',
'dojox/mobile/ScrollableView',      'dojox/mobile/Heading',         'dojox/mobile/ListItem',
'dojox/mobile/EdgeToEdgeList',      'dojox/mobile/ToolBarButton',   'dojox/mobile'
],
function(ready, registry, parser, deviceTheme, compat, Icon, ScrollableView, Heading, ListItem, EdgeToEdgeList, ToolBarButton, mobile){
ready(function(){
    var view_activity_edit = new ScrollableView(null, 'three');
    var view_activity_view = new ScrollableView(null, 'two');

    var view_activities = new ScrollableView(null, 'one');
        view_activities.selected = true;

        var heading = new Heading({
            label: 'Activities'
        });
        view_activities.addChild(heading);

            var button = new ToolBarButton({
                icon: 'mblDomButtonWhitePlus',
                style: 'float:right;',
                moveTo: 'three',
                onClick: function(e){
                    click_activity_edit(e,0);
                }
            });
            heading.addChild(button);


        var list_activity = new EdgeToEdgeList({
            id: 'activity-list'
        });
        view_activities.addChild(list_activity);

        view_activities.startup();
});

this.click_activity_edit = function(e, activityid) {
    var view_activity_edit = registry.byId('three');
        view_activity_edit.destroyDescendants(false);

        var heading = new Heading({
            label: 'Activity'
        });
        view_activity_edit.addChild(heading);

            var button = new ToolBarButton({
                label: 'Cancel',
                moveTo: 'one',
                transitionDir: -1,
                arrow: 'left'
            });
            heading.addChild(button);

    view_activity_edit.startup();
};

parser.parse();
});
Was it helpful?

Solution

This is something to do with the way the views are rendered. If you call startup() on your 2nd-view after you've added the extra toolbar button to the 3rd-view.

Add this:

registry.byId('two').startup();

to the end of your click_activity_edit() function and it'll work. See the jsFiddle, I've created for your code.

I would like to explain why this is but I'm not 100% sure. I may add an explanation once I've had time to think it through; or perhaps someone with a more thorough understanding of the inner workings of scrollviews will give a detailed answer.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top