ฉันจะใช้การส่งแบบฟอร์ม AJAX ได้อย่างไร

งานของฉันคือส่งแบบฟอร์มการติดต่อผ่าน AJAXและแสดง "ขอบคุณสำหรับการส่ง!" ข้อความถูกโหลดในตำแหน่งที่ฟอร์มอยู่ ดังนั้นฉันต้อง ajaxify แบบฟอร์มการติดต่อที่มีอยู่

ฉันพบตัวอย่างวิธีการตรวจสอบความถูกต้องของเขตข้อมูลฟอร์มโดยใช้ AJAX ใน D8 แต่ฉันไม่สามารถหาตัวอย่างใด ๆ ที่จะใช้การส่งแบบฟอร์ม ajaxและโหลดเนื้อหาบางส่วนผ่าน AJAX แล้ว

ฉันจะใช้งานของฉันได้อย่างไร ฉันจะเปลี่ยนแบบฟอร์มการติดต่อเพื่อเพิ่มฟังก์ชันการทำงานที่จำเป็นได้อย่างไร

เมื่อทำงานกับ ajax ในรูปแบบที่คุณต้องคำนึงถึงสิ่งต่อไปนี้:

• ทราบว่าคุณกำลังสร้างฟอร์มใหม่ทั้งหมดหรือเพียงบางส่วนของมันและห่อแบบฟอร์มให้สอดคล้องกับองค์ประกอบdivที่มีแอตทริบิวต์ IDที่คุณจะใช้ในข้อกำหนด #ajax ขององค์ประกอบทริกเกอร์เป็น 'wrapper' ใช้แอตทริบิวต์ #prefix และ #suffix สำหรับสิ่งนี้ ( $form['#prefix'] = '<div id="myform-ajax-wrapper">'; $form['#suffix'] = '</div>';) นอกจากนี้โปรดทราบว่าหากคุณมีแม่แบบกำหนดเองสำหรับแบบฟอร์มของคุณเพื่อไม่แสดงคำนำหน้าและคำต่อท้ายในกรณีนี้ ( {{ form|without('#prefix', '#suffix') }}) มิฉะนั้นจะมีการแสดงผลสองครั้งโดยเทมเพลตของคุณและโดยชุดรูปแบบของฟอร์ม คุณไม่สามารถป้องกันสิ่งนี้ได้โดยการตั้งค่า #theme_wrappers เป็นอาร์เรย์ว่างเนื่องจากเทมเพลตฟอร์มมีองค์ประกอบ html ฟอร์มจริง

• ใน ajax submit handler ของคุณคืนแบบฟอร์มทั้งหมดหรือบางส่วนที่คุณได้รวบรวมไว้และต้องการสร้างใหม่ ( return $formหรือreturn $form['myelement']) คุณสามารถใช้คำสั่ง ajax เพิ่มเติมแทนการส่งคืนโครงสร้างของฟอร์ม แต่เป็นสิ่งขั้นสูง

• เก็บทุกค่าไว้ในที่จัดเก็บข้อมูลของแบบฟอร์มสถานะจนกว่าคุณจะส่งแบบฟอร์ม ทำสิ่งนี้ในตัวจัดการการส่ง ( $form_state->set('somevalue', $form_state->getValue('somevalue'))) และโทรหา$form_state->setRebuild()คุณเสมอหากคุณไม่ได้ทำการส่งแบบฟอร์มสุดท้าย ฉันชอบที่จะมีตัวจัดการการส่งที่กำหนดเอง แต่มีเหตุผลมากกว่าในตัวจัดการการส่งหลักก็โอเคเช่นกัน

• ใช้#nameแอตทริบิวต์บนปุ่มที่ใช้ในการส่งข้อมูลเสมอและหากคุณใช้ตัวจัดการการส่งแบบฟอร์มเดียวเท่านั้น$for_state->getTriggeringElement()['#name']ในการตรวจสอบว่าองค์ประกอบใดได้ส่งแบบฟอร์ม

• หากคุณใช้ 'trigger_as' ในคำนิยาม #ajax ในกรณีที่คุณต้องการส่งแบบฟอร์มที่มีองค์ประกอบที่เลือกเช่นให้ใช้คำนิยาม #ajax เดียวกันกับที่คุณทำบนปุ่มเสมอ จากประสบการณ์ของฉันมันเป็นสิ่งจำเป็น - แม้ว่าจะไม่ได้ระบุไว้ในเอกสาร

• การใช้#limit_validation_errorsอาจยุ่งยากมากและคิดออกว่าทำไมรูปแบบไม่ทำงานอาจใช้เวลาพอสมควรดังนั้นให้ใช้อย่างระมัดระวัง (เป็นการดีที่จะแยกข้อผิดพลาดของแบบฟอร์มเฉพาะในองค์ประกอบที่คุณสร้างขึ้นใหม่จริงเพื่อให้รหัสของคุณ ไม่มีผลต่อส่วนอื่น ๆ ของแบบฟอร์ม)

• ใช้ปุ่มเพื่อส่งแบบฟอร์มเสมอและหากคุณต้องการมีอะไรที่แฟนซีเช่นเลือกเป็นองค์ประกอบที่กระตุ้นให้ใช้ตัวเลือก 'trigger_as' ของการกำหนดค่า #ajax และซ่อนปุ่มจริงด้วยคลาส 'js-hide' สำหรับ UI ที่ดี

• ในคำจำกัดความของฟอร์มรับค่าเริ่มต้นจากที่เก็บข้อมูลของรัฐฟอร์มหากมีอยู่หรือกำหนดให้กับที่เก็บข้อมูลหากไม่มี มิฉะนั้นแบบฟอร์มจะทำงานไม่ถูกต้อง

• อย่าใช้ $ นี่หรืออะไรอย่างอื่นที่คุณไม่สามารถเข้าถึงได้จากภายนอกมิฉะนั้นมันจะทำลายอาแจ็กซ์ ใช้ตัวจัดการ ajax แบบสแตติกเสมอ

• ในที่สุดเมื่อกรอกแบบฟอร์มการขึ้นอยู่กับความจริงที่ว่าคุณ (ไม่) $form_state->setRebuild(FALSE)มีรูปแบบที่กำหนดเองจัดการส่งอาแจ็กซ์ที่ปิดการใช้งานรูปแบบการสร้างโดยการโทร

• คุณสามารถใช้ :: โทรแบบย่อได้ในองค์ประกอบ ajax submit ( $element['#ajax']['callback'] = '::ajaxFormRebuild';และ$element['#submit'] = [['::ajaxFormSubmitHandler'];)

• ajax callback นั้นใช้เพื่อส่งคืนฟอร์มที่สร้างใหม่หรือคำสั่ง ajax เท่านั้น ไม่ส่งคืนแบบฟอร์มที่ถูกเปลี่ยนแปลง (เช่นอย่าเปลี่ยนแบบฟอร์มในการติดต่อกลับ)

หากต้องการเพิ่มในรายการตรวจสอบนี้หากคุณแสดงแบบฟอร์มในหน้าต่าง modal มีความเป็นไปได้ที่ข้อความแสดงข้อผิดพลาดจะไม่ปรากฏ ดังที่อีวานจารอสกล่าวว่าคุณต้องตรวจสอบให้แน่ใจว่าแบบฟอร์มนั้นมีเสื้อคลุม:

$form['#prefix'] = '<div id="my-form-wrapper-id">';
$form['#suffix'] = '</div>';

คุณจะต้องเพิ่มองค์ประกอบต่อไปนี้ที่ส่งแบบฟอร์ม ในกรณีส่วนใหญ่มันจะเป็นปุ่มส่งของคุณ:

$form['submit'] = [
    '#type' => 'submit',
    '#value' => $this->t('Save Changes'),
    '#attributes' => [
        'class' => [
            'btn',
            'btn-md',
            'btn-primary',
            'use-ajax-submit'
        ]
    ],
    '#ajax' => [
        'wrapper' => 'my-form-wrapper-id',
    ]
];

ฉันใช้โมดูลContact ajax รายละเอียดเพิ่มเติมเกี่ยวกับมัน (จากหน้าโครงการ):

ติดต่อ Ajax ใช้การส่ง ajax สำหรับแบบฟอร์มการติดต่อใน Drupal 8

มันทำงานอย่างไร

หลังจากเปิดใช้งานโมดูลแล้วแบบฟอร์มการติดต่อแต่ละอันจะแสดงช่องทำเครื่องหมาย "Use ajax" เมื่อเปิดใช้งานช่องทำเครื่องหมายนี้แบบฟอร์มติดต่อจะแสดงตัวเลือกอื่น "ประเภทการยืนยัน" พร้อมตัวเลือกเหล่านี้:

• โหลดแบบฟอร์ม: จะส่งแบบฟอร์มโดยไม่โหลดหน้าซ้ำ
• โหลดจากข้อความที่กำหนดเอง: โหลดข้อความที่กำหนดเอง
• โหลดจากโหนด: โหลดโหนดหลังจากส่งแบบฟอร์ม

โมดูลนี้สามารถช่วยคุณได้หาก:

• คุณต้องกำหนดข้อความยืนยันเอง
• คุณต้องส่งแบบฟอร์มการติดต่อโดยไม่ต้องโหลดหน้าซ้ำ
• คุณต้องการโหลดข้อความที่กำหนดเองหรือโหนดอื่นหลังจากส่งแบบฟอร์ม