Show missing dependency warning through JS to avoid refresh flickering

static/css/mentoring.css

@@ -13,6 +13,10 @@
     background-color: #FEEFB3;
 }
 
+.mentoring .missing-dependency.warning {
+    display: none;
+}
+
 .mentoring .bold {
     font-weight: bold;
 }

static/js/mentoring.js

@@ -6,6 +6,15 @@ function MentoringBlock(runtime, element) {
         $('.indicator', element).html(progressTemplate(data));
     }
 
+    function renderDependency() {
+        var warning_dom = $('.missing-dependency', element),
+            data = warning_dom.data();
+
+        if (data.missing === 'True') {
+            warning_dom.show();
+        }
+    }
+
     function callIfExists(obj, fn) {
         if (typeof obj !== 'undefined' && typeof obj[fn] == 'function') {
             return obj[fn].apply(obj, Array.prototype.slice.call(arguments, 2));
@@ -59,7 +68,9 @@ function MentoringBlock(runtime, element) {
     }
 
     function initXBlock() {
-        $(element).find('.submit').bind('click', function() {
+        var submit_dom = $(element).find('.submit');
+
+        submit_dom.bind('click', function() {
             var data = {};
             var children = getChildren(element);
             for (var i = 0; i < children.length; i++) {
@@ -72,7 +83,11 @@ function MentoringBlock(runtime, element) {
             $.post(handlerUrl, JSON.stringify(data)).success(handleSubmitResults);
         });
 
-        renderProgress();
+        if (submit_dom.length) {
+            renderProgress();
+        }
+
+        renderDependency();
     }
 
     function handleRefreshResults(results) {

templates/html/mentoring.html

 <div class="mentoring">
-  {% if missing_dependency_url %}
-  <div class="warning">
+  <div class="missing-dependency warning" data-missing="{{ self.has_missing_dependency }}">
     You need to complete <a href="{{ missing_dependency_url }}">the following step</a> before
     attempting this step.
   </div>
-  {% endif %}
   {% for name, c in named_children %}
   {{c.body_html|safe}}
   {% endfor %}