subform – PlusMagi's Blog By Pitt Phunsanit

joGet: AJAX Subform reload

ตัวอย่างการสร้าง ajax subform ในเรื่อง joGet: AJAX Subform มีโจทย์มาว่า input ที่ผูกกับซับฟอร์มถูกเปลี่ยนค่าจาก javascript ก็คิดว่าค่าใน subform จะเปลี่ยนตามไปด้วย แต่มันกลับไม่เปลี่ยนตาม เพราะ input ค่าเปลี่ยนก็จะทำให้มันโหลดข้อมูลมาใหม่ได้ไม่ยาก แต่มันไม่ทำงาน ลองศึกษาไฟล์ /jw/plugin/org.joget.plugin.enterprise.AjaxSubForm/js/jquery.ajaxsubform.js ดูก็พบว่ามันมีการสั่ง .off เอา event เก่าออกไปก่อน ทำให้แค่เปลี่ยนค่าเฉยๆ มันจะไม่ทำงาน

การสั่ง reload / refresh ajax subform โดยใช้ javascript ทำได้โดย

<button class="btn btn-info" id="refreshBtn" type="button">Reload form</button>
<script>
$(document).ready(function() {

$('#refreshBtn').on('click', function() {

let field1 = FormUtil.getField('field1');
field1.val('72817b0c-ac1430db-671b8000-37df4c8d');
field1.trigger('change');

});

});
</script>

แบบนี้เมื่อนเปลี่ยนค่า field1 subform จะถูกเปลี่ยนค่าตามไปด้วยแล้ว ลองดัดแปลงให้เหมาะกับงานดูนะครับ

joGet: AJAX Subform

AJAX Subform เป็น Form Element ที่ joget เตรียมไว้ให้สามารถใช้ ajax ดึงข้อมูลฟอร์มที่มีมาแสดงได้แบบไม่จำเป็นต้องโหลดทั้งหน้าใหม่ เหมือนระบบที่เราเขียนด้วยตัวเอง

การใช้งานทำได้ง่ายๆ โดยการ

1. ในหน้า Form Builder ลาก AJAX Subform มาจากด้านซ้ายมือ
2. คลิก Edit ไอค่อน
3. กรอกข้อมูล
  
  ID
  
  id ของ ajax subform เช่น ajaxSubform
  
  Form
  
  เลือกฟอร์มที่ต้องการนำมาแทรกไว้ในหน้านี้
4. คลิก Next >
5. ติ๊ก
  
  Reload Subform when Parent Field value change?
  
  ติ๊กเพื่อจะให้ ajax ทำงานโหลด ฟอร์มใหม่เมื่อ input ที่ผูกไว้ เปลี่ยนค่า
6. ผูกฟอร์มทั้งสองไว้ด้วยกัน
  
  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 ก่อน

อ่านเพิ่มเติม

- joGet: AJAX Subform reoad

PlusMagi's Blog By Pitt Phunsanit

Tag Archive subform

joGet: AJAX Subform reload

joGet: AJAX Subform