AJAX Subform เป็น Form Element ที่ joget เตรียมไว้ให้สามารถใช้ ajax ดึงข้อมูลฟอร์มที่มีมาแสดงได้แบบไม่จำเป็นต้องโหลดทั้งหน้าใหม่ เหมือนระบบที่เราเขียนด้วยตัวเอง
การใช้งานทำได้ง่ายๆ โดยการ
-
- ในหน้า Form Builder ลาก AJAX Subform มาจากด้านซ้ายมือ
- คลิก Edit ไอค่อน
- กรอกข้อมูล
- ID
- id ของ ajax subform เช่น ajaxSubform
- Form
- เลือกฟอร์มที่ต้องการนำมาแทรกไว้ในหน้านี้
- คลิก Next >
- ติ๊ก
- Reload Subform when Parent Field value change?
- ติ๊กเพื่อจะให้ ajax ทำงานโหลด ฟอร์มใหม่เมื่อ input ที่ผูกไว้ เปลี่ยนค่า
- ผูกฟอร์มทั้งสองไว้ด้วยกัน
- Parent Field to keep Subform ID
- id input ในฟอร์มหลัก ที่จะใช้ลิงค์ให้ sub form ถูกดึงมาแทนที่โดยใช้ ajax
- Subform Field to keep Parent ID
- เป็น input ที่อยู่ใน subform ถ้าไม่มี การ load subform มาจาก server ก็ยังทำงานได้ตามปกติ
ทีนี้มาศึกษาการทำงานกันดูบ้าง
-
-
- joGet จะแทรกไฟล์ /jw/plugin/org.joget.plugin.enterprise.AjaxSubForm/js/jquery.ajaxsubform.js เพิ่มเข้ามาจากปกติ
- จะถูกเรียกใช้โดย javascript ที่เพิ่มเข้ามา เช่น
ajaxSubForm 1234567891011121314151617181920212223242526<script type=
"text/javascript"
>
$(document).ready(
function
() {
$(
"#ajaxSubform_ajaxsubform_928"
).ajaxSubForm({
contextPath:
"/jw"
,
id:
"ajaxSubform"
,
label:
""
,
formDefId:
"sendEmail"
,
readOnly:
""
,
readOnlyLabel:
""
,
noframe:
""
,
ajax:
"true"
,
parentSubFormId:
"field1"
,
prefix:
""
,
hideEmpty:
""
,
appId:
"prototypes"
,
appVersion:
"1"
,
processId:
""
,
nonce:
"%EF%BF%BD%00%3B%7D%28%EF%BF%BD%EF%BF%BD%EF%BF%BD"
,
collapsible:
""
,
collapsibleLabelExpanded:
"Hide Details"
,
collapsibleLabelCollapsed:
"View Details"
,
collapsibleExpanded:
"true"
,
collapsibleNoLoad:
""
});
});
</script>
-
เมื่อไล่ดู code แล้วมันคือ plugin ที่ extended มาจาก jQuery ajax ตามปกติ ส่ง request ไปยัง /jw/web/json/plugin/org.joget.plugin.enterprise.AjaxSubForm/service โดยส่ง formDefId มีค่าเป็น form id ของ subform, parentSubFormId คือ field ในฟอร์มหลักที่ใช้ผูกกับซับฟอร์ม และจะคืนค่ากลับมาเป็น html ของฟอร์ม ในอนาคตคงได้ใช้เรียก ajax ไปโดยไม่ต้องสร้าง subform ก่อน
อ่านเพิ่มเติม