Question

HTML

<div id="activities"></div>
<div id="activity-edit"></div>​

JavaScript

require([
    'dojo/ready', 'dojo/dom', 'dijit/registry', 'dojox/mobile/parser', 'dojox/mobile/deviceTheme', 'dojox/mobile/compat', 'dojox/mobile/Icon', 'dojox/mobile/ScrollableView', 'dojox/mobile/Heading', 'dojox/mobile/ToolBarButton', 'dojox/mobile'
],
function(ready, dom, registry, parser, deviceTheme, compat, Icon, ScrollableView, Heading, ToolBarButton, mobile) {
    ready(function() {
        var view_activities = new ScrollableView(null, 'activities');
        view_activities.selected = true;

        var heading = new Heading({
            label: 'Activities',
            fixed: 'top'
        });
        view_activities.addFixedBar(heading);

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

        var view_activity_edit = new ScrollableView(null, 'activity-edit');

        view_activities.startup();
    });

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

        heading = new Heading({
            id: 'heading-activity-edit',
            label: 'Activity',
            fixed: 'top'
        });
        view_activity_edit.addChild(heading);

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

        button = new ToolBarButton({
            label: 'Save',
            style: 'float:right;',
            moveTo: 'activities',
            transitionDir: -1,
            onClick: function(e) {
                click_activity_save(e, activityid, function() {
                    data.get_activities(request, handle_getActivities);
                });
            }
        });
        heading.addChild(button);

        view_activity_edit.startup();
    };

    parser.parse();
});​

Steps to recreate the behavior:

Click the “+” button, click “Cancel”, click the “+” button again, click “Cancel” again and the button no longer works.

If you replace addFixedBar with addChild, the button works as expected every time. I would do this, but I need the Heading to be fixed given that it is on a ScrollableView.

I understand that addFixedBar adds the widget to the domNode and not the containerNode, but I don’t understand why that affects the behavior of the button and only on the second pass. My guess is that it has something to do with the destroyDescendants call not actually removing the Heading when using addFixedBar. I tried destroying the Heading manually after calling destroyDescendants, but that didn’t work. The heading is undefined/null on the second pass whether I get the Heading by “dom” or “registry”.

Any help or explanation is appreciated.

EDIT

Here is the JSFiddle: http://jsfiddle.net/MPUvk/

Answer 1

The key is the startup() calls.

The view_activity_edit.startup() call will work only once (startup() sets an internal _started flag and does nothing when it is already set). The second time the view is created, startup() does nothing.

The different behaviors between addFixedBar and addChild are because addChild calls startup() internally, whereas addFixedBar does not.

So to fix, just add heading.startup() after the addFixedBar call, that should work.
Another possibility would be to reset view_activity_edit._started = false when you destroy the view.