Add "callback" functionality for modal forms when a given field is changed

- Attach callback function
- Add a function to retrieve a field by name
This commit is contained in:
Oliver Walters 2020-08-26 22:35:36 +10:00
parent 0b4f732160
commit d44ad541eb
2 changed files with 53 additions and 0 deletions

View File

@ -397,6 +397,13 @@ function injectModalForm(modal, form_html) {
}
function getFieldByName(modal, name) {
/* Find the field (with the given name) within the modal */
return $(modal).find(`#id_${name}`);
}
function insertNewItemButton(modal, options) {
/* Insert a button into a modal form, after a field label.
* Looks for a <label> tag inside the form with the attribute "for='id_<field>'"
@ -476,6 +483,39 @@ function attachSecondaries(modal, secondaries) {
}
function attachFieldCallback(modal, callback) {
/* Attach a 'callback' function to a given field in the modal form.
* When the value of that field is changed, the callback function is performed.
*
* options:
* - field: The name of the field to attach to
* - action: A function to perform
*/
// Find the field input in the form
var field = getFieldByName(modal, callback.field);
field.change(function() {
if (callback.action) {
// Run the callback function with the new value of the field!
callback.action(field.val(), field);
} else {
console.log(`Value changed for field ${callback.field} - ${field.val()}`);
}
});
}
function attachCallbacks(modal, callbacks) {
/* Attach a provided list of callback functions */
for (var i = 0; i < callbacks.length; i++) {
attachFieldCallback(modal, callbacks[i]);
}
}
function handleModalForm(url, options) {
/* Update a modal form after data are received from the server.
* Manages POST requests until the form is successfully submitted.
@ -575,6 +615,7 @@ function launchModalForm(url, options = {}) {
* no_post - If true, only display form data, hide submit button, and disallow POST
* after_render - Callback function to run after form is rendered
* secondary - List of secondary modals to attach
* callback - List of callback functions to attach to inputs
*/
var modal = options.modal || '#modal-form';
@ -615,6 +656,10 @@ function launchModalForm(url, options = {}) {
attachSecondaries(modal, options.secondary);
}
if (options.callback) {
attachCallbacks(modal, options.callback);
}
if (options.no_post) {
modalShowSubmitButton(modal, false);
} else {

View File

@ -212,6 +212,14 @@
location: {{ location.id }}
{% endif %}
},
callback: [
{
field: 'part',
action: function(value) {
console.log('value: ' + value);
}
},
],
secondary: [
{
field: 'part',