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,12 +322,11 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.
-        
+            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;
-            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) {
@@ -339,8 +338,9 b' define(["widgets/js/manager",'
 
                 // Remember the view by id.
                 that.child_views[child_view.id] = child_view;
-                old_callback(child_view);
-             }, function(error) { console.error(error); });
+                    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,8 +187,6 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)
@@ -204,18 +203,23 b' define(['
                     });
                 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(view.$el)
+                .append(dummy)
                     .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) {