From 7ce547f0a540574d0868bb7be2eecb60385d6a5e Mon Sep 17 00:00:00 2001
From: cahrens <christina@edx.org>
Date: Wed, 20 Aug 2014 13:48:01 -0400
Subject: [PATCH] Fix for "ui-sortable" existing in HTML within HTML module.

---
 cms/static/js/views/container.js              | 24 ++++++++++++-------
 .../js/mock/mock-container-xblock.underscore  |  6 ++---
 2 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/cms/static/js/views/container.js b/cms/static/js/views/container.js
index 60f38afaf4..0dfcae22aa 100644
--- a/cms/static/js/views/container.js
+++ b/cms/static/js/views/container.js
@@ -1,22 +1,23 @@
 define(["jquery", "underscore", "js/views/xblock", "js/utils/module", "gettext", "js/views/feedback_notification",
     "jquery.ui"], // The container view uses sortable, which is provided by jquery.ui.
     function ($, _, XBlockView, ModuleUtils, gettext, NotificationView) {
-        var reorderableClass = '.reorderable-container',
-            sortableInitializedClass = '.ui-sortable',
-            studioXBlockWrapperClass = '.studio-xblock-wrapper';
+        var studioXBlockWrapperClass = '.studio-xblock-wrapper';
 
         var ContainerView = XBlockView.extend({
+            // Store the request token of the first xblock on the page (which we know was rendered by Studio when
+            // the page was generated). Use that request token to filter out user-defined HTML in any
+            // child xblocks within the page.
+            requestToken: "",
 
             xblockReady: function () {
                 XBlockView.prototype.xblockReady.call(this);
-                var reorderableContainer = this.$(reorderableClass),
-                    alreadySortable = this.$(sortableInitializedClass),
-                    newParent,
-                    oldParent,
-                    self = this;
+                var reorderableClass, reorderableContainer,
+                    newParent, oldParent, self = this;
 
-                alreadySortable.sortable("destroy");
+                this.requestToken = this.$('div.xblock').first().data('request-token');
+                reorderableClass = this.makeRequestSpecificSelector('.reorderable-container');
 
+                reorderableContainer = this.$(reorderableClass);
                 reorderableContainer.sortable({
                     handle: '.drag-handle',
 
@@ -123,7 +124,12 @@ define(["jquery", "underscore", "js/views/xblock", "js/utils/module", "gettext",
             },
 
             refresh: function() {
+                var sortableInitializedClass = this.makeRequestSpecificSelector('.reorderable-container.ui-sortable');
                 this.$(sortableInitializedClass).sortable('refresh');
+            },
+
+            makeRequestSpecificSelector: function(selector) {
+                return 'div.xblock[data-request-token="' + this.requestToken + '"] > ' + selector;
             }
         });
 
diff --git a/cms/templates/js/mock/mock-container-xblock.underscore b/cms/templates/js/mock/mock-container-xblock.underscore
index 79f032759a..ac2f3cbb65 100644
--- a/cms/templates/js/mock/mock-container-xblock.underscore
+++ b/cms/templates/js/mock/mock-container-xblock.underscore
@@ -10,7 +10,7 @@
     </div>
 </header>
 <article class="xblock-render">
-    <div class="xblock" data-locator="locator-container"
+    <div class="xblock" data-locator="locator-container" data-request-token="page-render-token"
          data-init="MockXBlock" data-runtime-class="StudioRuntime" data-runtime-version="1">
         <ol class="reorderable-container">
             <li class="studio-xblock-wrapper is-draggable" data-locator="locator-group-A">
@@ -35,7 +35,7 @@
                     </header>
 
                     <article class="xblock-render">
-                        <div class="xblock">
+                        <div class="xblock" data-request-token="page-render-token">
                             <ol class="reorderable-container">
                                 <li class="studio-xblock-wrapper is-draggable" data-locator="locator-component-A1">
                                     <section class="wrapper-xblock level-element"
@@ -144,7 +144,7 @@
                     </header>
 
                     <article class="xblock-render">
-                        <div class="xblock">
+                        <div class="xblock" data-request-token="page-render-token">
                             <ol class="reorderable-container">
                                 <li class="studio-xblock-wrapper is-draggable" data-locator="locator-component-B1">
                                     <section class="wrapper-xblock level-element"