Created
February 2, 2016 15:24
-
-
Save CaporalDead/81559c7cdb68e489876f to your computer and use it in GitHub Desktop.
Pour gérer les formulaires en ajax avec gestion des uploads et des confirm
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| export default class Form { | |
| constructor($form) { | |
| this.$form = $form; | |
| } | |
| /** | |
| * Ajoute le comportement "submit" au(x) formulaire(s) | |
| * | |
| * @param successHandler | |
| * @param failureHandler | |
| * @param doneHandler | |
| * @param progressHandler | |
| * | |
| * @returns {Form} | |
| */ | |
| submit(successHandler = null, failureHandler = null, doneHandler = null, progressHandler = null) { | |
| if (this.$form.length > 1) { | |
| this.$form.each(() => { | |
| this.submitFormHandler(successHandler, failureHandler, doneHandler, progressHandler); | |
| }); | |
| } else if (1 == this.$form.length) { | |
| this.submitFormHandler(successHandler, failureHandler, doneHandler, progressHandler); | |
| } | |
| return this; | |
| } | |
| /** | |
| * Ajoute le comportement "confirm" au(x) formulaire(s) | |
| * | |
| * @param options | |
| * @returns {Form} | |
| */ | |
| confirm(options = {}) { | |
| var $submits = this.$form.find('[type="submit"]'); | |
| if ($submits.length > 1) { | |
| $submits.each(() => { | |
| this.confirmFormHandler($(this), options); | |
| }); | |
| } else if (1 == $submits.length) { | |
| this.confirmFormHandler($submits, options); | |
| } | |
| return this; | |
| } | |
| /** | |
| * Ajoute le comportement "submit" à un élément donné | |
| * | |
| * @param sucessHandler | |
| * @param failureHandler | |
| * @param doneHandler | |
| * @param progressHandler | |
| * | |
| * @internal | |
| */ | |
| submitFormHandler(sucessHandler = null, failureHandler = null, doneHandler = null, progressHandler = null) { | |
| this.$form.submit((e) => { | |
| $.ajax({ | |
| url: this.$form.attr('action'), | |
| method: this.$form.attr('method'), | |
| data: new FormData(this.$form[0]), | |
| contentType: false, | |
| cache: false, | |
| processData: false, | |
| xhr: () => { | |
| var xhr = new window.XMLHttpRequest(); | |
| xhr.upload.addEventListener('progress', (e) => { | |
| if (null !== progressHandler) { | |
| progressHandler(e); | |
| } | |
| }, false); | |
| return xhr; | |
| } | |
| }).success((result) => { | |
| if (null !== sucessHandler) { | |
| sucessHandler(result); | |
| } | |
| }).error((result) => { | |
| if (null !== failureHandler) { | |
| failureHandler(result.status, this.$form, result.responseText, result.responseJSON); | |
| } | |
| }).done((result) => { | |
| if (null !== doneHandler) { | |
| doneHandler(result); | |
| } | |
| }); | |
| e.preventDefault(); | |
| }); | |
| } | |
| /** | |
| * Ajout le comportement "confirm" à un élément donné | |
| * | |
| * @param $submit | |
| * @param options | |
| * | |
| * @internal | |
| */ | |
| confirmFormHandler($submit, options = {}) { | |
| var options = $.extend({ | |
| title: 'Confirmation', | |
| message: 'Êtes-vous sûr de réaliser cette action ?', | |
| type: BootstrapDialog.TYPE_DANGER, | |
| draggable: true, | |
| btnCancelLabel: 'Annuler', | |
| btnOKLabel: 'Confirmer', | |
| btnOKClass: 'btn-danger', | |
| callback: (result) => { | |
| if (result) { | |
| $submit.closest('form').submit(); | |
| } | |
| return; | |
| } | |
| }, options); | |
| $submit.click((e) => { | |
| e.preventDefault(); | |
| BootstrapDialog.confirm(options); | |
| }); | |
| } | |
| /** | |
| * Ajoute des messages à l'élément ciblé du formulaire | |
| * | |
| * @param element | |
| * @param messages | |
| * | |
| * @returns {Form} | |
| */ | |
| addMessage(element, messages = []) { | |
| var $wrapper = this.$form.find(element).closest('div.form-group'); | |
| var $validationZone = $wrapper.find('div.messages-validation'); | |
| if (0 === $validationZone.length) { | |
| $wrapper.append('<div class="messages-validation"></div>'); | |
| $validationZone = $wrapper.find('div.messages-validation'); | |
| } | |
| $validationZone.html(''); | |
| $wrapper | |
| .removeClass('has-error') | |
| .removeClass('has-success') | |
| ; | |
| if (0 != messages.length) { | |
| $wrapper.addClass('has-error'); | |
| $(messages).each(function (index, message) { | |
| $validationZone.append('<span class="help-block">' + message + '</span>'); | |
| }); | |
| } | |
| return this; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment