karmaworld/templates/lightbox/add_course.html

   1 {% load url from future %}
   2 <script>
   3 $(function() {
   4
   5   function setupAjax(){
   6     // Assumes variable csrf_token is made available
   7     // by embedding document
   8     $.ajaxSetup({
   9           beforeSend: function(xhr, settings) {
  10               if (!(/^http:.*/.test(settings.url) || /^https:.*/.test(settings.url))) {
  11                   // Only send the token to relative URLs i.e. locally.
  12                   xhr.setRequestHeader("X-CSRFToken", '{{ csrf_token }}');
  13               }
  14           }
  15     });
  16   }
  17
  18   setupAjax();
  19
  20     $("#school").autocomplete({
  21         source: function(request, response){
  22             $.ajax({
  23                 url: "{% url 'json_school_list' %}",
  24                 data: {q: request.term},
  25                 success: function(data) {
  26                     console.log(data);
  27                     if (data['status'] === 'success') {
  28                         response($.map(data['schools'], function(item) {
  29                             return {
  30                                 value: item.name,
  31                                 real_value: item.id
  32                             };
  33                         }));
  34                     } else {
  35                       // FIXME: do something if school not found
  36                       $('#create_school_link').show();
  37                     }
  38                 },
  39                 dataType: "json",
  40                 type: 'POST'
  41             });
  42         },
  43         select: function(event, ui) {
  44             // set the school id as the value of the hidden field
  45             $('#id_school').val(ui.item.real_value);
  46             // set the School name as the textbox ield
  47             $('#school').val(ui.item.value);
  48           },
  49         minLength: 3
  50     });
  51 });
  52
  53 </script>
  54
  55 <section id="add-course" class="modal_content">
  56 <form action="">
  57   <div class="row">
  58     <div class="eight columns centered lightbox_modal" style="margin-top: 121px;">
  59       <div class="row">
  60         <div class="lightbox_header modal_header twelve columns">
  61           Add a course
  62         </div><!-- /modal_header -->
  63       </div>
  64
  65       <div class="row lightbox_row">
  66         <div class="seven columns centered">
  67           <label class="lightbox_label">
  68             School
  69           </label><!-- lightbox_label -->
  70           <div class="lightbox_field">
  71             <input id="school" class="lightbox_textfield" type="text" name="school"/>
  72             <input id="id_school" type='hidden'/>
  73           </div><!-- .lightbox_filed -->
  74         </div><!--  -->
  75       </div> <!-- .row .lightbox_row -->
  76
  77
  78       <div class="row lightbox_row">
  79         <div class="seven columns centered">
  80           <label class="lightbox_label">
  81             Title of Course:
  82           </label><!-- lightbox_label -->
  83           <div class="lightbox_field">
  84             <input id="id_title" class="lightbox_textfield" type="text" name="title" maxlength="255" />
  85           </div><!-- .lightbox_filed -->
  86         </div><!--  -->
  87       </div> <!-- .row .lightbox_row -->
  88
  89       <div class="row lightbox_row">
  90         <div class="seven columns centered">
  91           <label class="lightbox_label">
  92             Subject:
  93           </label><!-- lightbox_label -->
  94           <div class="lightbox_field">
  95             <input id="id_field" class="lightbox_textfield" type="text" name="field" maxlength="255" />
  96           </div><!-- .lightbox_filed -->
  97         </div><!--  -->
  98       </div> <!-- .row .lightbox_row -->
  99
 100       <div class="row lightbox_row">
 101         <div class="seven columns centered">
 102           <label class="lightbox_label">
 103             Instructor Name:
 104           </label><!-- lightbox_label -->
 105           <div class="lightbox_field">
 106             <input id="id_instructor_name" class="lightbox_textfield" type="text" name="instructor_name" maxlength="75" />
 107           </div><!-- .lightbox_filed -->
 108         </div><!--  -->
 109       </div> <!-- .row .lightbox_row -->
 110
 111       <div class="row lightbox_row">
 112         <div class="seven columns centered">
 113           <label class="lightbox_label">
 114             Instructor Email:
 115           </label><!-- lightbox_label -->
 116           <div class="lightbox_field">
 117             <input id="id_instructor_email" class="lightbox_textfield" type="text" name="instructor_email" maxlength="75" />
 118           </div><!-- .lightbox_filed -->
 119         </div><!--  -->
 120       </div> <!-- .row .lightbox_row -->
 121
 122       <div class="row lightbox_row">
 123         <div class="seven columns centered">
 124           <label class="lightbox_label">
 125             Description:
 126           </label><!-- lightbox_label -->
 127           <div class="lightbox_field">
 128             <textarea id="id_desc" class="lightbox_textfield lightbox_textarea" rows="4" cols="40" name="desc"></textarea>
 129           </div><!-- .lightbox_filed -->
 130         </div><!--  -->
 131       </div> <!-- .row .lightbox_row -->
 132
 133       <div class="row lightbox_row">
 134         <div class="seven columns centered">
 135           <label class="lightbox_label">
 136           </label><!-- lightbox_label -->
 137           <div class="lightbox_field">
 138             <a class="button" id="submit-lightbox-create-course" type="submit">CREATE COURSE</a>
 139           </div><!-- .lightbox_filed -->
 140         </div><!--  -->
 141       </div> <!-- .row .lightbox_row -->
 142
 143       <div class="lightbox_close"></div>
 144
 145     </div> <!-- .lightbox_modal -->
 146   </div> <!-- .row -->
 147
 148 </form>
 149 </section><!--add_course_content-->
 150