mirror of
https://github.com/inventree/InvenTree
synced 2024-08-30 18:33:04 +00:00
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:
parent
0b4f732160
commit
d44ad541eb
@ -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 {
|
||||
|
@ -212,6 +212,14 @@
|
||||
location: {{ location.id }}
|
||||
{% endif %}
|
||||
},
|
||||
callback: [
|
||||
{
|
||||
field: 'part',
|
||||
action: function(value) {
|
||||
console.log('value: ' + value);
|
||||
}
|
||||
},
|
||||
],
|
||||
secondary: [
|
||||
{
|
||||
field: 'part',
|
||||
|
Loading…
Reference in New Issue
Block a user