dashboard: reworked modal creation with ajax

circle/dashboard/static/dashboard/dashboard.js

@@ -4,26 +4,7 @@ $(function () {
       type: 'GET',
       url: '/dashboard/vm/create/', 
       success: function(data) { 
-        // TODO this is still ugly
-        var html = '<div class="modal fade" id="vm-create-modal" tabindex="-1" role="dialog">' +
-                    '<div class="modal-dialog">' +
-                      '<div class="modal-content">' +
-                        '<div class="modal-header">' +
-                          '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
-                          '<h4 class="modal-title">Create VM</h4>' +
-                        '</div>' +
-                        '<div class="modal-body"> ' +
-                          data +
-                        '</div>' +
-                      /*'<div class="modal-footer">' +
-                          '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>' +
-                          '<button type="button" class="btn btn-primary">Save changes</button>' +
-                        '</div>' + */
-                      '</div><!-- /.modal-content -->' +
-                     '</div><!-- /.modal-dialog -->' +
-                    '</div>';
-
-        $('body').append(html);
+        $('body').append(data);
         vmCreateLoaded();
         $('#vm-create-modal').modal('show');
         $('#vm-create-modal').on('hidden.bs.modal', function() {

circle/dashboard/templates/dashboard/modal-wrapper.html

+<div class="modal fade" id="vm-create-modal" tabindex="-1" role="dialog"> 
+  <div class="modal-dialog"> 
+    <div class="modal-content"> 
+      <div class="modal-header"> 
+        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
+        <h4 class="modal-title">{{ box_title }}</h4> 
+      </div> 
+      <div class="modal-body">  
+        {% include template %}
+      </div> 
+      <!--<div class="modal-footer"> 
+        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
+        <button type="button" class="btn btn-primary">Save changes</button> 
+      </div>-->
+    </div><!-- /.modal-content --> 
+  </div><!-- /.modal-dialog --> 
+</div>

circle/dashboard/views.py

@@ -94,17 +94,16 @@ class VmCreate(TemplateView):
 
     def get_template_names(self):
         if self.request.is_ajax():
-            return ['dashboard/vm-create.html']
+            return ['dashboard/modal-wrapper.html']
         else:
-            return ['dashboard/ajax-wrapper.html']
+            return ['dashboard/nojs-wrapper.html']
 
     def get(self, request, *args, **kwargs):
         context = self.get_context_data(**kwargs)
-        if not request.is_ajax():
-            context.update({
-                'template': 'dashboard/vm-create.html',
-                'box_title': 'Create a VM'
-            })
+        context.update({
+            'template': 'dashboard/vm-create.html',
+            'box_title': 'Create a VM'
+        })
         return self.render_to_response(context)
 
     def get_context_data(self, **kwargs):