BLD-543: Fix bug with reordering in Studio.

common/lib/xmodule/xmodule/css/lti/lti.scss

@@ -30,6 +30,5 @@ div.lti {
         height: 800px;
         display: block;
         border: 0px;
-        overflow-x: hidden;
     }
 }

common/lib/xmodule/xmodule/lti_module.py

@@ -180,12 +180,6 @@ class LTIModule(LTIFields, XModule):
         Otherwise error message from LTI provider is generated.
     """
 
-    js = {
-        'js': [
-            resource_string(__name__, 'js/src/lti/01_lti.js'),
-            resource_string(__name__, 'js/src/lti/02_main.js')
-        ]
-    }
     css = {'scss': [resource_string(__name__, 'css/lti/lti.scss')]}
     js_module_name = "LTI"
 
@@ -253,12 +247,11 @@ class LTIModule(LTIFields, XModule):
             client_secret,
         )
 
-    def get_html(self):
+    def get_context(self):
         """
-        Renders parameters to template.
+        Returns a context.
         """
-
-        context = {
+        return {
             'input_fields': self.get_input_fields(),
 
             # These parameters do not participate in OAuth signing.
@@ -267,10 +260,37 @@ class LTIModule(LTIFields, XModule):
             'element_class': self.category,
             'open_in_a_new_page': self.open_in_a_new_page,
             'display_name': self.display_name,
-            'ajax_url': self.system.ajax_url,
+            'form_url': self.get_form_path(),
         }
 
-        return self.system.render_template('lti.html', context)
+
+    def get_form_path(self):
+        return  self.runtime.handler_url(self, 'preview_handler').rstrip('/?')
+
+    def get_html(self):
+        """
+        Renders parameters to template.
+        """
+        return self.system.render_template('lti.html', self.get_context())
+
+    def get_form(self):
+        """
+        Renders parameters to form template.
+        """
+        return self.system.render_template('lti_form.html', self.get_context())
+
+    @XBlock.handler
+    def preview_handler(self, request, dispatch):
+        """
+        Ajax handler.
+
+        Args:
+            dispatch: string request slug
+
+        Returns:
+            json string
+        """
+        return Response(self.get_form(), content_type='text/html')
 
     def handle_ajax(self, dispatch, __):
         """
@@ -614,3 +634,4 @@ class LTIDescriptor(LTIFields, MetadataOnlyEditingDescriptor, EmptyDataRawDescri
     """
     module_class = LTIModule
     grade_handler = module_attr('grade_handler')
+    preview_handler = module_attr('preview_handler')

lms/templates/lti.html

@@ -4,40 +4,15 @@
 <div
     id="${element_id}"
     class="${element_class}"
-    data-open_in_a_new_page="${json.dumps(open_in_a_new_page)}"
-    data-ajax_url="${ajax_url}"
 >
 
-    ## This form will be hidden.
-    ## If open_in_a_new_page is false then, once available on the client, the
-    ## LTI module JavaScript will trigger a "submit" on the form, and the
-    ## result will be rendered to the below iFrame.
-    ## If open_in_a_new_page is true, then link will be shown, and by clicking
-    ## on it, LTI will pop up in new window.
-    <form
-        action="${launch_url}"
-        name="ltiLaunchForm-${element_id}"
-        class="ltiLaunchForm"
-        method="post"
-        target=${"_blank" if open_in_a_new_page else "ltiLaunchFrame-{0}".format(element_id)}
-        encType="application/x-www-form-urlencoded"
-    >
-
-        % for param_name, param_value in input_fields.items():
-            <input name="${param_name}" value="${param_value}" />
-        %endfor
-
-        <input type="submit" value="Press to Launch" />
-    </form>
-
-
 % if launch_url and launch_url !=  'http://www.example.com':
     % if open_in_a_new_page:
         <div class="wrapper-lti-link">
             <h3 class="title">
                 ${display_name} (${_('External resource')})
             </h3>
-            <p class="lti-link external"><a href="#" class='link_lti_new_window'>
+            <p class="lti-link external"><a target="_blank" class='link_lti_new_window' href="${form_url}" class=''>
                 ${_('View resource in a new window')}
                  <i class="icon-external-link"></i>
             </a></p>
@@ -45,9 +20,8 @@
     % else:
         ## The result of the form submit will be rendered here.
         <iframe
-            name="ltiLaunchFrame-${element_id}"
             class="ltiLaunchFrame"
-            src=""
+            src="${form_url}"
         ></iframe>
     % endif
 % else:

lms/templates/lti_form.html

+<%! import json %>
+<%! from django.utils.translation import ugettext as _ %>
+<!DOCTYPE HTML>
+<html>
+    <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+        <title>LTI</title>
+    </head>
+    <body>
+    ## This form will be hidden.
+    ## If open_in_a_new_page is false then, once available on the client, the
+    ## LTI module JavaScript will trigger a "submit" on the form, and the
+    ## result will be rendered to the below iFrame.
+    ## If open_in_a_new_page is true, then link will be shown, and by clicking
+    ## on it, LTI will pop up in new window.
+        <form
+            id="lti-${element_id}"
+            action="${launch_url}"
+            method="post"
+            encType="application/x-www-form-urlencoded"
+            style="display:none;"
+        >
+
+            % for param_name, param_value in input_fields.items():
+                <input name="${param_name}" value="${param_value}" />
+            %endfor
+
+            <input type="submit" value="Press to Launch" />
+        </form>
+        <script type="text/javascript">
+            (function(d) {
+                var element = d.getElementById("lti-${element_id}");
+                if (element) {
+                    element.submit();
+                }
+            }(document));
+        </script>
+    </body>
+</html>