diff --git a/cms/static/js/utils/drag_and_drop.js b/cms/static/js/utils/drag_and_drop.js index 69d62fcdf9..8a7ef8d3aa 100644 --- a/cms/static/js/utils/drag_and_drop.js +++ b/cms/static/js/utils/drag_and_drop.js @@ -260,6 +260,10 @@ define(["jquery", "jquery.ui", "underscore", "gettext", "js/views/feedback_notif }, expandElement: function (ele) { + // Verify all children of the element are rendered. + var ensureChildrenRendered = ele.data('ensureChildrenRendered'); + if (_.isFunction(ensureChildrenRendered)) { ensureChildrenRendered(); } + // Update classes. ele.removeClass(this.collapsedClass); ele.find('.expand-collapse').first().removeClass('expand').addClass('collapse'); }, @@ -354,7 +358,8 @@ define(["jquery", "jquery.ui", "underscore", "gettext", "js/views/feedback_notif handleClass: null, droppableClass: null, parentLocationSelector: null, - refresh: null + refresh: null, + ensureChildrenRendered: null }, options); if ($(element).data('droppable-class') !== options.droppableClass) { @@ -362,7 +367,8 @@ define(["jquery", "jquery.ui", "underscore", "gettext", "js/views/feedback_notif 'droppable-class': options.droppableClass, 'parent-location-selector': options.parentLocationSelector, 'child-selector': options.type, - 'refresh': options.refresh + 'refresh': options.refresh, + 'ensureChildrenRendered': options.ensureChildrenRendered }); draggable = new Draggabilly(element, { diff --git a/cms/static/js/views/course_outline.js b/cms/static/js/views/course_outline.js index d7a9aa9d67..d693bd5aee 100644 --- a/cms/static/js/views/course_outline.js +++ b/cms/static/js/views/course_outline.js @@ -192,7 +192,8 @@ define(["jquery", "underscore", "js/views/xblock_outline", "js/views/utils/view_ handleClass: '.section-drag-handle', droppableClass: 'ol.list-sections', parentLocationSelector: 'article.outline', - refresh: this.refreshWithCollapsedState.bind(this) + refresh: this.refreshWithCollapsedState.bind(this), + ensureChildrenRendered: this.ensureChildrenRendered.bind(this) }); } else if ($(element).hasClass("outline-subsection")) { @@ -201,7 +202,8 @@ define(["jquery", "underscore", "js/views/xblock_outline", "js/views/utils/view_ handleClass: '.subsection-drag-handle', droppableClass: 'ol.list-subsections', parentLocationSelector: 'li.outline-section', - refresh: this.refreshWithCollapsedState.bind(this) + refresh: this.refreshWithCollapsedState.bind(this), + ensureChildrenRendered: this.ensureChildrenRendered.bind(this) }); } else if ($(element).hasClass("outline-unit")) { @@ -210,7 +212,8 @@ define(["jquery", "underscore", "js/views/xblock_outline", "js/views/utils/view_ handleClass: '.unit-drag-handle', droppableClass: 'ol.list-units', parentLocationSelector: 'li.outline-subsection', - refresh: this.refreshWithCollapsedState.bind(this) + refresh: this.refreshWithCollapsedState.bind(this), + ensureChildrenRendered: this.ensureChildrenRendered.bind(this) }); } } diff --git a/cms/static/js/views/xblock_outline.js b/cms/static/js/views/xblock_outline.js index aef1d28fdb..8d92da1dc9 100644 --- a/cms/static/js/views/xblock_outline.js +++ b/cms/static/js/views/xblock_outline.js @@ -149,10 +149,17 @@ define(["jquery", "underscore", "gettext", "js/views/baseview", "js/views/utils/ } } // Ensure that the children have been rendered before expanding - if (this.shouldRenderChildren() && !this.renderedChildren) { + this.ensureChildrenRendered(); + BaseView.prototype.toggleExpandCollapse.call(this, event); + }, + + /** + * Verifies that the children are rendered (if they should be). + */ + ensureChildrenRendered: function() { + if (!this.renderedChildren && this.shouldRenderChildren()) { this.renderChildren(); } - BaseView.prototype.toggleExpandCollapse.call(this, event); }, /**