https://forikes-ejournal.com/lib/pkp/js/controllers/form/AjaxFormHandler.js

1/**
2 * @file js/controllers/form/AjaxFormHandler.js
3 *
4 * Copyright (c) 2013-2015 Simon Fraser University Library
5 * Copyright (c) 2000-2015 John Willinsky
6 * Distributed under the GNU GPL v2. For full terms see the file docs/COPYING.
7 *
8 * @class AjaxFormHandler
9 * @ingroup js_controllers_form
10 *
11 * @brief Form handler that submits the form to the server via AJAX and
12 *  either replaces the form if it is re-rendered by the server or
13 *  triggers the "formSubmitted" event after the server confirmed
14 *  form submission.
15 */
16(function($) {
17
18
19	/**
20	 * @constructor
21	 *
22	 * @extends $.pkp.controllers.form.FormHandler
23	 *
24	 * @param {jQueryObject} $form the wrapped HTML form element.
25	 * @param {Object} options options to configure the AJAX form handler.
26	 */
27	$.pkp.controllers.form.AjaxFormHandler = function($form, options) {
28		this.disableControlsOnSubmit = true;
29		options.submitHandler = this.submitForm;
30		this.parent($form, options);
31
32		this.bind('refreshForm', this.refreshFormHandler_);
33		this.publishEvent('containerReloadRequested');
34	};
35	$.pkp.classes.Helper.inherits(
36			$.pkp.controllers.form.AjaxFormHandler,
37			$.pkp.controllers.form.FormHandler);
38
39
40	//
41	// Public methods
42	//
43	/**
44	 * Internal callback called after form validation to handle form
45	 * submission.
46	 *
47	 * @param {Object} validator The validator plug-in.
48	 * @param {HTMLElement} formElement The wrapped HTML form.
49	 */
50	/*jslint unparam: true*/
51	$.pkp.controllers.form.AjaxFormHandler.prototype.submitForm =
52			function(validator, formElement) {
53
54		// This form implementation will post the form,
55		// and act depending on the returned JSON message.
56		var $form = this.getHtmlElement();
57
58		this.disableFormControls();
59
60		$.post($form.attr('action'), $form.serialize(),
61				this.callbackWrapper(this.handleResponse), 'json');
62	};
63	/*jslint unparam: false*/
64
65
66	/**
67	 * Callback to replace the element's content.
68	 *
69	 * @private
70	 *
71	 * @param {jQueryObject} sourceElement The containing element.
72	 * @param {Event} event The calling event.
73	 * @param {string} content The content to replace with.
74	 */
75	/*jslint unparam: true*/
76	$.pkp.controllers.form.AjaxFormHandler.prototype.refreshFormHandler_ =
77			function(sourceElement, event, content) {
78
79		if (content) {
80			// Get the form that we're updating
81			var $element = this.getHtmlElement();
82
83			// Replace the form content
84			$element.replaceWith(content);
85		}
86	};
87	/*jslint unparam: false*/
88
89
90	/**
91	 * Internal callback called after form validation to handle the
92	 * response to a form submission.
93	 *
94	 * You can override this handler if you want to do custom handling
95	 * of a form response.
96	 *
97	 * @param {HTMLElement} formElement The wrapped HTML form.
98	 * @param {Object} jsonData The data returned from the server.
99	 * @return {boolean} The response status.
100	 */
101	/*jslint unparam: true*/
102	$.pkp.controllers.form.AjaxFormHandler.prototype.handleResponse =
103			function(formElement, jsonData) {
104
105		var $form, formSubmittedEvent, processedJsonData;
106		processedJsonData = this.handleJson(jsonData);
107		if (processedJsonData !== false) {
108			if (processedJsonData.content === '') {
109				// Notify any nested formWidgets of form submitted event.
110				formSubmittedEvent = new $.Event('formSubmitted');
111				$(this.getHtmlElement()).find('.formWidget').trigger(formSubmittedEvent);
112
113				// Trigger the "form submitted" event.
114				this.trigger('formSubmitted');
115
116				// Fire off any other optional events.
117				this.publishChangeEvents();
118			} else {
119				if (/** @type {{reloadContainer: Object}} */
120						processedJsonData.reloadContainer !== undefined) {
121					this.trigger('dataChanged');
122					this.trigger('containerReloadRequested', [processedJsonData]);
123					return processedJsonData.status;
124				}
125
126				// Redisplay the form.
127				$form = this.getHtmlElement();
128				$form.replaceWith(processedJsonData.content);
129			}
130		}
131
132		$(this.getHtmlElement()).find('.pkp_helpers_progressIndicator').hide();
133		this.getHtmlElement().find(':submit').button();
134
135		// Trigger the notify user event, passing this
136		// html element as data.
137		this.trigger('notifyUser', [this.getHtmlElement()]);
138
139		return processedJsonData.status;
140	};
141	/*jslint unparam: false*/
142
143
144/** @param {jQuery} $ jQuery closure. */
145}(jQuery));