Commits

Luke Plant committed 348d142

Much more convenient way of ajaxifying forms (using class="ajaxify")

Comments (0)

Files changed (6)

cciw/cciwmain/static/js/cciwutils.js

         return accept;
     };
 
-    var addFormOnchangeHandlers = function(form_id, mk_input_change_handler) {
+    var addFormOnchangeHandlers = function(form, mk_input_change_handler) {
         // Summary: Adds 'onchange' handlers to all inputs in a form
-        // form_id: id of the form in the DOM
+        // form: jQuery object containing the form
         // mk_input_change_handler: when called with one of the
         //   form elements, returns a handler to be connected to
         //   that element.
-        var form = $('#' + form_id);
-        if (form == null) {
-            return null;
-        }
         var inputs = form.find('input,textarea,select');
         inputs.each(function(i, elem) {
             if (submittableControl(elem)) {
         return handler;
     };
 
-    var standardformGetInputChangeHandler = function(form_id, control_name, control_id) {
+    var standardformGetInputChangeHandler = function(form, control_name, control_id) {
         // Summary: returns an event handler to be added to a control,
-        // form_id: id of the form the control belongs to
+        // form: jQuery object containing the form the control belongs to
         // control_name: the name of the control
         // control_id: id of the control
         var on_input_change = function(ev) {
             $.ajax({
                 type: "POST",
-                data: $('#' + form_id).serialize(),
+                data: form.serialize(),
                 url: "?format=json",
                 dataType: "json",
                 success: standardformGetValidatorCallback(control_name, control_id)
     };
 
     // Public interface:
-    pub.standardformAddOnchangeHandlers = function(form_id) {
-        addFormOnchangeHandlers(form_id, function(input) {
-            return standardformGetInputChangeHandler(form_id, input.name, input.id);
+    pub.standardformAddOnchangeHandlers = function(form) {
+        addFormOnchangeHandlers(form, function(input) {
+            return standardformGetInputChangeHandler(form, input.name, input.id);
         });
     };
 
                                         });
     };
 
+    $(document).ready(function() {
+        $('form.ajaxify').each(function(i, elem) {
+            pub.standardformAddOnchangeHandlers($(this));
+        });
+    });
+
     return pub;
 })(cciw || {}, jQuery);

templates/cciw/bookings/account_details.html

 {% extends 'cciw/bookings/standard.html' %}
 {% block content %}
 
-
-<script type="text/javascript">
-<!--
-
-(function($) {
-
-   $(document).ready(function() {
-       cciw.standardformAddOnchangeHandlers('id_accountdetails');
-
-   });
-})(jQuery);
-
-//-->
-</script>
-
 <p>Please enter your name and address:</p>
 
-<form id='id_accountdetails' action="" method="POST">
+<form id='id_accountdetails' action="" method="POST" class="ajaxify">
 {% csrf_token %}
 {{ form.as_p }}
 <div class="formrow">

templates/cciw/bookings/add_place.html

 
 {% else %}
 
-       cciw.standardformAddOnchangeHandlers('id_addplaceform');
-
        var placeData = [];
 
        var escape = function(t) {
 
 //-->
 </script>
-<form action="" method="POST" id="id_addplaceform" name="addplaceform">
+<form action="" method="POST" id="id_addplaceform" name="addplaceform" class="ajaxify">
 {% csrf_token %}
 
 {% if form.errors %}

templates/cciw/feedback.html

 {% extends "cciw/standard.html" %}
 {% load standardpage %}
 {% block content %}
-<script type="text/javascript">
-<!--
-
-(function($) {
-   $(document).ready(function() {
-       cciw.standardformAddOnchangeHandlers('contactform');
-
-   });
-})(jQuery);
-
-//-->
-</script>
 
 {% htmlchunk feedback_intro %}
 
 <div class="userError">Please check your input below:</div>
 {% endif %}
 
-<form action="" method="post" id="contactform">{% csrf_token %}
+<form action="" method="post" id="contactform" class="ajaxify">{% csrf_token %}
   {{ form.as_p }}
 
   <p><input type="submit" name="submit" value="Send" /></p>

templates/cciw/forums/edit_poll.html

 {% extends "cciw/standard.html" %}
 {% block content %}
-
-<script type="text/javascript">
-<!--
-
-(function($) {
-   $(document).ready(function() {
-       cciw.standardformAddOnchangeHandlers('editpollform');
-
-   });
-})(jQuery);
-
-//-->
-</script>
-
 {% if object %}
 <p>Edit the poll details below.  Please note, you can either:</p>
 <ul>
 	</div>
 {% endif %}
 
-<form action="" method="post" id="editpollform">{% csrf_token %}
+<form action="" method="post" id="editpollform" class="ajaxify">{% csrf_token %}
 
 {{ form.as_p }}
 

templates/cciw/members/preferences.html

 {% extends "cciw/standard.html" %}
 {% block content %}
 
-<script type="text/javascript">
-<!--
-
-(function($) {
-   $(document).ready(function() {
-       cciw.standardformAddOnchangeHandlers('preferencesform');
-
-   });
-})(jQuery);
-
-//-->
-</script>
-
 <h2>Preferences</h2>
 <p>Edit your preferences below.  Changes to your e-mail address
 will require confirmation by an e-mail.</p>
 {% endif %}
 
 
-<form method="post" action="" enctype="multipart/form-data" id="preferencesform">{% csrf_token %}
+<form method="post" action="" enctype="multipart/form-data" id="preferencesform" class="ajaxify">
+{% csrf_token %}
 
 {{ form.as_p }}
 
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.