Fix view rendering order.

IPython/html/static/widgets/js/manager.js

@@ -66,7 +66,7 b' define(['
                     dummy.replaceWith(view.$el);
                 }
                 view.trigger('displayed');
-            }, function(error) { console.error(error); });
+            }, console.error);
         }
     };
 
@@ -200,7 +200,7 b' define(['
         //      model_name: 'WidgetModel', 
         //      widget_class: 'IPython.html.widgets.widget_int.IntSlider'})
         //      .then(function(model) { console.log('Create success!', model); },
-        //      function(error) { console.error(error); });
+        //      console.error);
         //
         // Parameters
         // ----------

IPython/html/static/widgets/js/widget.js

@@ -322,25 +322,25 b' define(["widgets/js/manager",'
             //
             // -given a model and (optionally) a view name if the view name is 
             // not given, it defaults to the model's default view attribute.
-        
-            // TODO: this is hacky, and makes the view depend on this cell attribute and widget manager behavior
-            // it would be great to have the widget manager add the cell metadata
-            // to the subview without having to add it here.
-            var that = this;
-            var old_callback = options.callback || function(view) {};
-            options = $.extend({ parent: this }, options || {});
-            
-            this.model.widget_manager.create_view(child_model, options).then(function(child_view) {
-                // Associate the view id with the model id.
-                if (that.child_model_views[child_model.id] === undefined) {
-                    that.child_model_views[child_model.id] = [];
-                }
-                that.child_model_views[child_model.id].push(child_view.id);
+            return new Promise(function(resolve, reject) {
+                // TODO: this is hacky, and makes the view depend on this cell attribute and widget manager behavior
+                // it would be great to have the widget manager add the cell metadata
+                // to the subview without having to add it here.
+                var that = this;
+                options = $.extend({ parent: this }, options || {});
+                
+                this.model.widget_manager.create_view(child_model, options).then(function(child_view) {
+                    // Associate the view id with the model id.
+                    if (that.child_model_views[child_model.id] === undefined) {
+                        that.child_model_views[child_model.id] = [];
+                    }
+                    that.child_model_views[child_model.id].push(child_view.id);
 
-                // Remember the view by id.
-                that.child_views[child_view.id] = child_view;
-                old_callback(child_view);
-             }, function(error) { console.error(error); });
+                    // Remember the view by id.
+                    that.child_views[child_view.id] = child_view;
+                    resolve(child_view);
+                 }, reject);
+            });
         },
 
         pop_child_view: function(child_model) {

IPython/html/static/widgets/js/widget_box.js

@@ -75,14 +75,16 b' define(['
         add_child_model: function(model) {
             // Called when a model is added to the children list.
             var that = this;
-            this.create_child_view(model, {callback: function(view) {
-                that.$box.append(view.$el);
+            var dummy = $('<div/>');
+            that.$box.append(dummy);
+            this.create_child_view(model).then(function(view) {
+                dummy.replaceWith(view.$el);
 
                 // Trigger the displayed event of the child view.
                 that.after_displayed(function() {
                     view.trigger('displayed');
                 });
-            }});
+            }, console.error);
         },
     });
 

IPython/html/static/widgets/js/widget_selectioncontainer.js

@@ -114,9 +114,10 b' define(['
             accordion_group.container_index = container_index;
             this.model_containers[model.id] = accordion_group;
             
-            this.create_child_view(model, {callback: function(view) {
-                accordion_inner.append(view.$el);
-
+            var dummy = $('<div/>');
+            accordion_inner.append(dummy);
+            this.create_child_view(model).then(function(view) {
+                dummy.replaceWith(view.$el);
                 that.update();
                 that.update_titles();
 
@@ -124,7 +125,7 b' define(['
                 that.after_displayed(function() {
                     view.trigger('displayed');
                 });
-            }});
+            }, console.error);
         },
     });
     
@@ -186,36 +187,39 b' define(['
                 .css('list-style-type', 'none')
                 .appendTo(this.$tabs);
             
-            this.create_child_view(model, {callback: function(view) {
-                view.parent_tab = tab;
 
-                var tab_text = $('<a />')
-                    .attr('href', '#' + uuid)
-                    .attr('data-toggle', 'tab') 
-                    .text('Page ' + index)
-                    .appendTo(tab)
-                    .click(function (e) {
-                
-                        // Calling model.set will trigger all of the other views of the 
-                        // model to update.
-                        that.model.set("selected_index", index, {updated_view: that});
-                        that.touch();
-                        that.select_page(index);
-                    });
-                tab.tab_text_index = that.containers.push(tab_text) - 1;
+            var tab_text = $('<a />')
+                .attr('href', '#' + uuid)
+                .attr('data-toggle', 'tab') 
+                .text('Page ' + index)
+                .appendTo(tab)
+                .click(function (e) {
+            
+                    // Calling model.set will trigger all of the other views of the 
+                    // model to update.
+                    that.model.set("selected_index", index, {updated_view: that});
+                    that.touch();
+                    that.select_page(index);
+                });
+            tab.tab_text_index = that.containers.push(tab_text) - 1;
+
+            var dummy = $('<div />');
+            var contents_div = $('<div />', {id: uuid})
+                .addClass('tab-pane')
+                .addClass('fade')
+                .append(dummy)
+                .appendTo(that.$tab_contents);
 
-                var contents_div = $('<div />', {id: uuid})
-                    .addClass('tab-pane')
-                    .addClass('fade')
-                    .append(view.$el)
-                    .appendTo(that.$tab_contents);
+            this.create_child_view(model).then(function(view) {
+                dummy.replaceWith(view.$el);
+                view.parent_tab = tab;
                 view.parent_container = contents_div;
 
                 // Trigger the displayed event of the child view.
                 that.after_displayed(function() {
                     view.trigger('displayed');
                 });
-            }});
+            }, console.error);
         },
 
         update: function(options) {