add a script to automatically refresh a form (#24)

README.md

@@ -38,6 +38,32 @@ For each kind of action (link or form), you have to add a data-toggle="ajax" to
     </a>
 If the link contains the data-form property, it will submit the form using the properties of the link.
 
+### Auto-refresh a form
+
+You can automatically send an ajax request to update your form when an input/select change, just add the data attribute "data-refreshonchange":
+
+```html
+    <select name="category" data-refreshonchange="true">
+        <option value="transport">Transport</option>
+        <option value="structure">Stucture</option>
+    </select>
+```
+
+Then in your controller's action:
+```php
+ if ($request->query->get('novalidate', false) === false) {
+    if ($form->isValid()) {
+        // form is valid
+    } else {
+        // avoid to display errors when novalidate
+        $form = $formFactory->createForm();
+        $form->setData($user);
+    }
+}
+```
+
+For some reason, you would not refresh some parts of your form (for example an input type="file"). Then, add the data attribute 'data-ignoreonchange="$some_unique_id"'.
+
 Extra features
 ---
 

Resources/config/assetic_injector.json

@@ -3,7 +3,10 @@
     {
         "javascripts":
         {
-            "foot": "@TroopersAjaxBundle/Resources/public/js/ajax.js",
+            "foot": [
+                "@TroopersAjaxBundle/Resources/public/js/ajax.js",
+                "@TroopersAjaxBundle/Resources/public/js/ajax-updateOnChange.js"
+            ],
             "bootstrap-extra": "@TroopersAjaxBundle/Resources/public/js/ajax-modal.js"
         },
         "stylesheets":

Resources/public/js/ajax-updateOnChange.js

@@ -0,0 +1,36 @@
+// For every change on inputs and select with attr data-refreshOnChange
+$(document).on(
+    'change',
+    'select[data-refreshOnChange="true"], ' +
+    'input:checkbox[data-refreshOnChange="true"], ' +
+    'input:radio[data-refreshOnChange="true"]',
+    function(event) {
+        var form = $(this).parents('form');
+        var formdata = (window.FormData) ? new FormData(form[0]) : null;
+        var data = (formdata !== null) ? formdata : form.serialize();
+        var ignoredChanges = {};
+        $(form).find('[data-ignoreonchange]').each(function (idx, elem) {
+            var $elem = $(elem);
+            ignoredChanges[$elem.attr('data-ignoreonchange')] = $elem;
+        });
+        $.ajax({
+            url         : form.attr('action') + (form.attr('action').split('?')[1] ? '&' : '?') + 'novalidate',
+            data        : data,
+            type        : $(form).attr('method'),
+            contentType : false,
+            dataType    : 'json',
+            processData : false,
+        }).done(function(response){
+            if (typeof response === 'object' && response.hasOwnProperty("html")) {
+                form.html(response.html);
+            } else {
+                form.html(response);
+            }
+            $.each(ignoredChanges, function(index, elem){
+                $('[data-ignoreonchange="' + index + '"]').replaceWith(elem);
+            });
+        }).fail(function(response) {
+            console.log(response);
+        });
+    }
+);