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 ที่เพิ่มเข้ามา เช่น
<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 ก่อน
อ่านเพิ่มเติม