Add javascript to change initial text related with position

Refactor nomcom forms.
See ietf-tools#913
 - Legacy-Id: 5154

Author: ejimenez

ietf/nomcom/forms.py

@@ -4,6 +4,7 @@
 from django.http import HttpResponseRedirect, HttpResponseForbidden
 from django.shortcuts import get_object_or_404
 from django.core.urlresolvers import reverse
+from django.template.loader import render_to_string
 
 from ietf.utils import unaccent
 from ietf.utils.mail import send_mail
@@ -28,6 +29,12 @@ def get_group_or_404(year):
 
 
 class BaseNomcomForm(forms.ModelForm):
+    def __unicode__(self):
+        return self.as_div()
+
+    def as_div(self):
+        return render_to_string('nomcom/nomcomform.html', {'form': self})
+
     def get_fieldsets(self):
         if not self.fieldsets:
             yield dict(name=None, fields=self)
@@ -274,3 +281,7 @@ def save(self, commit=True):
     class Meta:
         model = Nomination
         fields = ('position', 'candidate_name', 'candidate_email', 'candidate_phone')
+
+    class Media:
+        js = ("/js/jquery-1.5.1.min.js",
+              "/js/nomcom.js", )

ietf/nomcom/urls.py

@@ -10,6 +10,7 @@
     url(r'^(?P<year>\d{4})/questionnaire/(?P<name>[^/]+)/$', 'questionnaire_detail', name='nomcom_questionnaire_detail'),
     url(r'^(?P<year>\d{4})/comments/$', 'comments', name='nomcom_comments'),
     url(r'^(?P<year>\d{4})/nominate/$', 'nominate', name='nomcom_nominate'),
+    url(r'^ajax/position-text/(?P<position_id>\d+)/$', 'ajax_position_text', name='nomcom_ajax_position_text'),
     url(r'^(?P<year>\d{4})/edit-chair/$', EditChairFormPreview(EditChairForm), name='edit_chair'),
     url(r'^(?P<year>\d{4})/edit-members/$', EditMembersFormPreview(EditMembersForm), name='edit_members'),
     url(r'^(?P<year>\d{4})/edit-publickey/$', 'edit_publickey', name='edit_publickey'),

ietf/nomcom/views.py

@@ -1,11 +1,15 @@
+ # -*- coding: utf-8 -*-
 from django.shortcuts import render_to_response
 from django.template import RequestContext
-from django.http import HttpResponseForbidden
+from django.http import HttpResponseForbidden, HttpResponse
 from django.contrib.auth.decorators import login_required
 from django.template.loader import render_to_string
+from django.utils import simplejson
+
 
 from ietf.nomcom.utils import get_nomcom_by_year, HOME_TEMPLATE
 from ietf.nomcom.forms import EditPublicKeyForm, NominateForm
+from ietf.nomcom.models import Position
 
 
 def index(request, year):
@@ -103,3 +107,15 @@ def edit_publickey(request, year):
                               {'form': form,
                                'group': nomcom.group,
                                'message': message}, RequestContext(request))
+
+
+def ajax_position_text(request, position_id):
+    try:
+        position_text = Position.objects.get(id=position_id).initial_text
+    except Position.DoesNotExist:
+        position_text = ""
+
+    result = {'text': position_text}
+
+    json_result = simplejson.dumps(result)
+    return HttpResponse(json_result, mimetype='application/json')

ietf/templates/nomcom/nomcomform.html

@@ -0,0 +1,36 @@
+<div class="baseform">
+
+  {% for fieldset in form.get_fieldsets %}
+    {% if fieldset.name %}
+      <div class="fieldset">
+      <h2>{{ fieldset.name }}</h2>
+    {% endif %}
+
+    {% for field in fieldset.fields %}
+      <div id="baseform-fieldname-{{ field.html_name }}"
+          class="{% if field.errors %}fieldError {% endif %}field BaseFormStringWidget{% if field.field.column_style %} {{ field.field.column_style }}{% endif %}">
+        <label for="id_{{ field.html_name }}">{{ field.label }}
+        {% if field.field.required %}
+          <span class="fieldRequired" title="Required">*</span>
+        {% endif %}
+        </label>
+        <div class="fieldWidget">
+        <div id="{{ field.html_name }}_help" class="formHelp"> {{ field.help_text }}</div>
+        {{ field }}
+        {{ field.errors }}
+        </div>
+        <div class="endfield"></div>
+      </div>
+    {% endfor %}
+
+    {% if fieldset.name %}
+      </div>
+    {% endif %}
+  {% endfor %}
+
+  <div class="submitrow">
+    <input type="submit" value="Save" name="save" />
+  </div>
+
+</div>
+

ietf/templates/nomcom/nominate.html

@@ -2,51 +2,29 @@
 
 {% block subtitle %} - Nominate{% endblock %}
 
+{% block pagehead %}
+{{ form.media }}
+{% endblock %}
+
 {% block nomcom_content %}
+<div class="js-info">
+Your browser has Javascript disabled. Please enable javascript and reload the page.
+<script type="text/javascript">
+(function ($) {
+   $(".js-info").hide();
+})(jQuery);
+</script>
+</div>
+
+
 {% if message %}
 <div class="info-message-{{ message.0 }}">{{ message.1 }}</div>
 {% endif %}
 
 {% if form.errors %}<div class="info-message-error">Please correct the following errors</div>{% endif %}
 
-<form action="" method="post">{% csrf_token %}
-
-    <div class="baseform">
-
-      {% for fieldset in form.get_fieldsets %}
-        {% if fieldset.name %}
-          <div class="fieldset">
-          <h2>{{ fieldset.name }}</h2>
-        {% endif %}
-
-        {% for field in fieldset.fields %}
-          <div id="baseform-fieldname-{{ field.html_name }}"
-              class="{% if field.errors %}fieldError {% endif %}field BaseFormStringWidget{% if field.field.column_style %} {{ field.field.column_style }}{% endif %}">
-            <label for="id_{{ field.html_name }}">{{ field.label }}
-            {% if field.field.required %}
-              <span class="fieldRequired" title="Required">*</span>
-            {% endif %}
-            </label>
-            <div class="fieldWidget">
-            <div id="{{ field.html_name }}_help" class="formHelp"> {{ field.help_text }}</div>
-            {{ field }}
-            {{ field.errors }}
-            </div>
-            <div class="endfield"></div>
-          </div>
-        {% endfor %}
-
-        {% if fieldset.name %}
-          </div>
-        {% endif %}
-      {% endfor %}
-
-      <div class="submitrow">
-        <input type="submit" value="Save" name="save" />
-      </div>
-
-    </div>
+<form id="nominateform" action="" method="post">{% csrf_token %}
+  {{ form }}
 </form>
 
-
-{% endblock %}
+{% endblock %}

static/css/base2.css

@@ -275,4 +275,10 @@ span.fieldRequired {
     color: red;
 }
 
-
+/* js styles */
+.js-info {
+    background-color: #FFDD88;
+    border: 1px dashed red;
+    font-size: 1.2em;
+    padding: 1em 2em;
+}

static/js/nomcom.js

@@ -0,0 +1,36 @@
+/*jslint vars: false, browser: true */
+/*global jQuery */
+
+(function ($) {
+    "use strict";
+    $.fn.nominateForm = function () {
+        return this.each(function () {
+            var $position = $("#id_position"),
+                $comments = $("#id_comments"),
+                baseurl = "/nomcom/ajax/position-text/";
+
+            $comments.change(function () {
+                $.ajax({
+                    url: baseurl + $position.val() + '/',
+                    type: 'GET',
+                    cache: false,
+                    async: true,
+                    dataType: 'json',
+                    success: function (response) {
+                        $comments.text(response.text);
+                    }
+                });
+            });
+
+            $position.change(function () {
+                $comments.trigger("change");
+            });
+
+        });
+    };
+
+    $(document).ready(function () {
+        $("#nominateform").nominateForm();
+    });
+
+}(jQuery));