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     $("#str_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                                 label: item.name,
  33                             };
  34                         }));
  35                     } else {
  36                       // FIXME: do something if school not found
  37                       $('#create_school_link').show();
  38                     }
  39                 },
  40                 dataType: "json",
  41                 type: 'POST'
  42             });
  43         },
  44         select: function(event, ui) {
  45             console.log("select func");
  46             console.log("id");
  47             console.log(ui.item.value);
  48             console.log("name");
  49             console.log(ui.item.label);
  50             // set the school id as the value of the hidden field
  51             $('#id_school').val(ui.item.real_value);
  52             // set the School name as the textbox field
  53             //$('#str_school').val(ui.item.label);
  54           },
  55         minLength: 3
  56     });
  57 });
  58
  59 </script>
  60
  61 <section id="add-course" class="modal_content">
  62 <form method="POST" action="{% url 'api_course_post' %}">
  63   {% csrf_token %}
  64   <div class="row">
  65     <div class="eight columns centered lightbox_modal" style="margin-top: 121px;">
  66       <div class="row">
  67         <div class="lightbox_header modal_header twelve columns">
  68           Add a course
  69         </div><!-- /modal_header -->
  70       </div>
  71
  72       <div class="row lightbox_row">
  73         <div class="seven columns centered">
  74           <label class="lightbox_label">
  75             School
  76           </label><!-- lightbox_label -->
  77           <div class="lightbox_field">
  78             <input id="str_school" class="lightbox_textfield" type="text" name="str_school"/>
  79             <input id="id_school" name="school" type='hidden'/>
  80           </div><!-- .lightbox_filed -->
  81         </div><!--  -->
  82       </div> <!-- .row .lightbox_row -->
  83
  84
  85       <div class="row lightbox_row">
  86         <div class="seven columns centered">
  87           <label class="lightbox_label">
  88             Title of Course:
  89           </label><!-- lightbox_label -->
  90           <div class="lightbox_field">
  91             <input id="id_name" class="lightbox_textfield" type="text" name="name" maxlength="255" />
  92           </div><!-- .lightbox_filed -->
  93         </div><!--  -->
  94       </div> <!-- .row .lightbox_row -->
  95
  96       <div class="row lightbox_row">
  97         <div class="seven columns centered">
  98           <label class="lightbox_label">
  99             Instructor Name:
 100           </label><!-- lightbox_label -->
 101           <div class="lightbox_field">
 102             <input id="id_instructor_name" class="lightbox_textfield" type="text" name="instructor_name" maxlength="75" />
 103           </div><!-- .lightbox_filed -->
 104         </div><!--  -->
 105       </div> <!-- .row .lightbox_row -->
 106
 107       <div class="row lightbox_row">
 108         <div class="seven columns centered">
 109           <label class="lightbox_label">
 110             Instructor Email:
 111           </label><!-- lightbox_label -->
 112           <div class="lightbox_field">
 113             <input id="id_instructor_email" class="lightbox_textfield" type="text" name="instructor_email" maxlength="75" />
 114           </div><!-- .lightbox_filed -->
 115         </div><!--  -->
 116       </div> <!-- .row .lightbox_row -->
 117
 118       <div class="row lightbox_row">
 119         <div class="seven columns centered">
 120           <label class="lightbox_label">
 121             Description:
 122           </label><!-- lightbox_label -->
 123           <div class="lightbox_field">
 124             <textarea id="id_desc" class="lightbox_textfield lightbox_textarea" rows="4" cols="40" name="desc"></textarea>
 125           </div><!-- .lightbox_filed -->
 126         </div><!--  -->
 127       </div> <!-- .row .lightbox_row -->
 128
 129       <div class="row lightbox_row">
 130         <div class="seven columns centered">
 131           <label class="lightbox_label">
 132           </label><!-- lightbox_label -->
 133           <div class="lightbox_field">
 134             <button class="lightbox-button" id="submit-lightbox-create-course" type="submit">CREATE COURSE</a>
 135           </div><!-- .lightbox_filed -->
 136         </div><!--  -->
 137       </div> <!-- .row .lightbox_row -->
 138
 139       <div class="lightbox_close"></div>
 140
 141     </div> <!-- .lightbox_modal -->
 142   </div> <!-- .row -->
 143
 144 </form>
 145 </section><!--add_course_content-->
 146