mirror of
https://github.com/inventree/InvenTree.git
synced 2025-04-30 20:46:47 +00:00
Better documentation for the modal form jQuery code
This commit is contained in:
parent
598ddaace9
commit
8d6a4415e5
@ -1,20 +1,35 @@
|
|||||||
function makeOption(id, title) {
|
function makeOption(id, title) {
|
||||||
|
/* Format an option for a select element
|
||||||
|
*/
|
||||||
return "<option value='" + id + "'>" + title + "</option>";
|
return "<option value='" + id + "'>" + title + "</option>";
|
||||||
}
|
}
|
||||||
|
|
||||||
function attachSelect(modal) {
|
|
||||||
|
|
||||||
// Attach to any 'select' inputs on the modal
|
function attachSelect(modal) {
|
||||||
// Provide search filtering of dropdown items
|
/* Attach 'select2' functionality to any drop-down list in the modal.
|
||||||
$(modal + ' .select').select2({
|
* Provides search filtering for dropdown items
|
||||||
|
*/
|
||||||
|
|
||||||
|
$(modal + ' .select').select2({
|
||||||
dropdownParent: $(modal),
|
dropdownParent: $(modal),
|
||||||
|
// dropdownAutoWidth parameter is required to work properly with modal forms
|
||||||
dropdownAutoWidth: true,
|
dropdownAutoWidth: true,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function afterForm(response, options) {
|
|
||||||
|
|
||||||
// Should we show alerts immediately or cache them?
|
function afterForm(response, options) {
|
||||||
|
/* afterForm is called after a form is successfully submitted,
|
||||||
|
* and the form is dismissed.
|
||||||
|
* Used for general purpose functionality after form submission:
|
||||||
|
*
|
||||||
|
* - Display a bootstrap alert (success / info / warning / danger)
|
||||||
|
* - Run a supplied success callback function
|
||||||
|
* - Redirect the browser to a different URL
|
||||||
|
* - Reload the page
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Should we show alerts immediately or cache them?
|
||||||
var cache = (options.follow && response.url) ||
|
var cache = (options.follow && response.url) ||
|
||||||
options.redirect ||
|
options.redirect ||
|
||||||
options.reload;
|
options.reload;
|
||||||
@ -49,24 +64,42 @@ function afterForm(response, options) {
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function modalSetTitle(modal, title='') {
|
function modalSetTitle(modal, title='') {
|
||||||
|
/* Update the title of a modal form
|
||||||
|
*/
|
||||||
$(modal + ' #modal-title').html(title);
|
$(modal + ' #modal-title').html(title);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function modalSetContent(modal, content='') {
|
function modalSetContent(modal, content='') {
|
||||||
|
/* Update the content panel of a modal form
|
||||||
|
*/
|
||||||
$(modal).find('.modal-form-content').html(content);
|
$(modal).find('.modal-form-content').html(content);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function modalSetButtonText(modal, submit_text, close_text) {
|
function modalSetButtonText(modal, submit_text, close_text) {
|
||||||
|
/* Set the button text for a modal form
|
||||||
|
*
|
||||||
|
* submit_text - text for the form submit button
|
||||||
|
* close_text - text for the form dismiss button
|
||||||
|
*/
|
||||||
$(modal).find("#modal-form-submit").html(submit_text);
|
$(modal).find("#modal-form-submit").html(submit_text);
|
||||||
$(modal).find("#modal-form-close").html(close_text);
|
$(modal).find("#modal-form-close").html(close_text);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function closeModal(modal='#modal-form') {
|
function closeModal(modal='#modal-form') {
|
||||||
|
/* Dismiss (hide) a modal form
|
||||||
|
*/
|
||||||
$(modal).modal('hide');
|
$(modal).modal('hide');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function modalSubmit(modal, callback) {
|
function modalSubmit(modal, callback) {
|
||||||
|
/* Perform the submission action for the modal form
|
||||||
|
*/
|
||||||
$(modal).off('click', '#modal-form-submit');
|
$(modal).off('click', '#modal-form-submit');
|
||||||
|
|
||||||
$(modal).on('click', '#modal-form-submit', function() {
|
$(modal).on('click', '#modal-form-submit', function() {
|
||||||
@ -76,6 +109,16 @@ function modalSubmit(modal, callback) {
|
|||||||
|
|
||||||
|
|
||||||
function openModal(options) {
|
function openModal(options) {
|
||||||
|
/* Open a modal form, and perform some action based on the provided options object:
|
||||||
|
*
|
||||||
|
* options can contain:
|
||||||
|
*
|
||||||
|
* modal - ID of the modal form element (default = '#modal-form')
|
||||||
|
* title - Custom title for the form
|
||||||
|
* content - Default content for the form panel
|
||||||
|
* submit_text - Label for the submit button (default = 'Submit')
|
||||||
|
* close_text - Label for the close button (default = 'Close')
|
||||||
|
*/
|
||||||
|
|
||||||
var modal = options.modal || '#modal-form';
|
var modal = options.modal || '#modal-form';
|
||||||
|
|
||||||
@ -118,6 +161,8 @@ function openModal(options) {
|
|||||||
|
|
||||||
|
|
||||||
function launchDeleteForm(url, options = {}) {
|
function launchDeleteForm(url, options = {}) {
|
||||||
|
/* Launch a modal form to delete an object
|
||||||
|
*/
|
||||||
|
|
||||||
var modal = options.modal || '#modal-delete';
|
var modal = options.modal || '#modal-delete';
|
||||||
|
|
||||||
@ -175,13 +220,23 @@ function launchDeleteForm(url, options = {}) {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function injectModalForm(modal, form_html) {
|
function injectModalForm(modal, form_html) {
|
||||||
// Inject the form data into the modal window
|
/* Inject form content into the modal.
|
||||||
|
* Updates the HTML of the form content, and then applies some other updates
|
||||||
|
*/
|
||||||
$(modal).find('.modal-form-content').html(form_html);
|
$(modal).find('.modal-form-content').html(form_html);
|
||||||
attachSelect(modal);
|
attachSelect(modal);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function handleModalForm(url, options) {
|
function handleModalForm(url, options) {
|
||||||
|
/* Update a modal form after data are received from the server.
|
||||||
|
* Manages POST requests until the form is successfully submitted.
|
||||||
|
*
|
||||||
|
* The server should respond with a JSON object containing a boolean value 'form_valid'
|
||||||
|
* Form submission repeats (after user interaction) until 'form_valid' = true
|
||||||
|
*/
|
||||||
|
|
||||||
var modal = options.modal || '#modal-form';
|
var modal = options.modal || '#modal-form';
|
||||||
|
|
||||||
@ -237,12 +292,16 @@ function handleModalForm(url, options) {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
|
||||||
* launchModalForm
|
|
||||||
* Opens a model window and fills it with a requested form
|
|
||||||
* If the form is loaded successfully, calls handleModalForm
|
|
||||||
*/
|
|
||||||
function launchModalForm(url, options = {}) {
|
function launchModalForm(url, options = {}) {
|
||||||
|
/* Launch a modal form, and request data from the server to fill the form
|
||||||
|
* If the form data is returned from the server, calls handleModalForm()
|
||||||
|
*
|
||||||
|
* A successful request will return a JSON object with, at minimum,
|
||||||
|
* an object called 'html_form'
|
||||||
|
*
|
||||||
|
* If the request is NOT successful, displays an appropriate error message.
|
||||||
|
*/
|
||||||
|
|
||||||
var modal = options.modal || '#modal-form';
|
var modal = options.modal || '#modal-form';
|
||||||
|
|
||||||
@ -289,4 +348,4 @@ function launchModalForm(url, options = {}) {
|
|||||||
|
|
||||||
// Send the AJAX request
|
// Send the AJAX request
|
||||||
$.ajax(ajax_data);
|
$.ajax(ajax_data);
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user