| English | ||
|---|---|---|
In this article, we showcase the ability to add new selection into existing select box without the need to leave / reload partially filled form. | ||
| Warning | ||
| ||
We have introduced a new plugin that allows you to easily add new dropdown selections without leaving the existing form. This plugin simplifies the process, removing the need for any JavaScript code or manual configuration. To get started, simply follow the instructions available in the plugin documentation, which provides a step-by-step guide on how to use the plugin and integrate it into your system. We recommend using this new plugin for the best experience. The manual JavaScript method is no longer required, and we encourage you to leverage this new, easier approach for all your dropdown selection needs. |
Figure 1: A Order Form Partially Filled Up
We can click on "Add New Customer" to bring up a pop up dialog.
Figure 2: Add New Customer within Order Form
Upon submitting the new customer form, the parent form will then refreshes its dropdown selection using Dynamic Cascading Drop-Down List.
This is the script used to realize this use case.
| Code Block | ||||
|---|---|---|---|---|
| ||||
<a id="addNewCustomer" href="addCustomer?embed=true">Add New Customer</a>
<iframe id="popupForm" src="popupForm" width="100%" height="100%" style="width: 100%; height: 100%; border: none; display: none;"></iframe>
<script>
var inputDialog;
$(function(){
$("#addNewCustomer").click(function(e){
e.preventDefault();
$("#popupForm").attr("src", "addCustomer?embed=true");
inputDialog = $( "#popupForm" ).dialog({
autoOpen: false,
height: 300,
width: 800,
buttons: {
}
});
inputDialog.dialog("open");
$("#popupForm").css("width", "");
});
});
function closePopup(){
inputDialog.dialog("close");
//force refresh the selectbox
FormUtil.getField("customer_type").trigger("change");
}
</script> |
You may refer to the app design by importing it into your Joget server.
...