diff --git a/IPython/html/static/notebook/js/outputarea.js b/IPython/html/static/notebook/js/outputarea.js
index ae56b94..0471988 100644
--- a/IPython/html/static/notebook/js/outputarea.js
+++ b/IPython/html/static/notebook/js/outputarea.js
@@ -400,6 +400,9 @@ define([
this._append_javascript_error(err, subarea);
this.element.append(toinsert);
}
+
+ // Notify others of changes.
+ this.element.trigger('changed');
};
@@ -832,6 +835,10 @@ define([
// them to fire if the image is never added to the page.
this.element.find('img').off('load');
this.element.html("");
+
+ // Notify others of changes.
+ this.element.trigger('changed');
+
this.outputs = [];
this.trusted = true;
this.unscroll_area();
diff --git a/IPython/html/static/widgets/js/widget_output.js b/IPython/html/static/widgets/js/widget_output.js
index 1a77b68..15a158a 100644
--- a/IPython/html/static/widgets/js/widget_output.js
+++ b/IPython/html/static/widgets/js/widget_output.js
@@ -21,6 +21,21 @@ define([
prompt_area: false,
events: this.model.widget_manager.notebook.events,
keyboard_manager: this.model.widget_manager.keyboard_manager });
+
+ // Make output area reactive.
+ var that = this;
+ this.output_area.element.on('changed', function() {
+ that.model.set('contents', that.output_area.element.html());
+ });
+ this.model.on('change:contents', function(){
+ var html = this.model.get('contents');
+ if (this.output_area.element.html() != html) {
+ this.output_area.element.html(html);
+ }
+ }, this);
+
+ // Set initial contents.
+ this.output_area.element.html(this.model.get('contents'));
},
_handle_route_msg: function(content) {