Score:0

How to add a secondary Ajax submit to a regular node form?

ธง cn

I'm trying to add an Ajax submit to a regular node edit form (Drupal 9). I'm using Field Groups so that there's a series of tabs, and I've added a pair of "buttons" (Right now they're just markup <div>s, but I could change them to real buttons if that's recommended) that users can use to move forward and back through the tabs with some Javascript.

The ask now is that each time the tab focus changes, the form is submitted via Ajax. All the examples I'm finding seem to be doing something other than what I'm after. I've seen examples using completely custom forms, loading forms, and altering fields, but nothing that just adds the ability to submit a a regular node form with Ajax.

Things I've tried:

  • Adding an #ajax subarray of various sorts to the buttons and/or the regular submit element. Nothing Ajaxy at all has happened in any of these experiments
  • Using Javascript to trigger a click event on the submit, without and without an #ajax subarray. All I get is a regular submit with page refresh
  • Bypassing all of that just calling $.post($('#form-id').attr('action'), $('#form-id').serialize()). There's some semblance of Ajax submit going on as my custom hook_form_alter gets hit, but the node isn't saved/updated. I think that's failing because there's no proper submit/op value associated with it, and I haven't been able to figure out how to add/set it.

Can someone point me in the right direction?

Score:1
ธง cn

ข้อแรกคือแนวทางเดียวที่ตรงไปตรงมา แบบฟอร์มการแก้ไขโหนดปกติมีองค์ประกอบของแบบฟอร์ม Ajax อยู่แล้ว คุณสามารถตรวจสอบ subarray "ajax" ของ drupal-settings-json ส่งไปยังเบราว์เซอร์

คุณควรเห็นการโทรกลับ Ajax ของคุณเองที่นี่เช่นกัน:

  "อาแจ็กซ์": {
    "แก้ไขฟิลด์บทความเพิ่มเติม": {
      "โทรกลับ": [
        "Drupal\Core\Field\Plugin\Field\FieldWidget\EntityReferenceAutocompleteWidget",
        "addMoreAjax"
      ]
      "wrapper": "field-article-add-more-wrapper",
      "ผล": "จาง",
      "เหตุการณ์": "mousedown",
      "ปุ่มกด": จริง,
      "ป้องกัน": "คลิก",
      "url": "\/node\/123\/edit?destination=\/admin\/content\u0026ajax_form=1",
      "dialogType": "อาแจ็กซ์",
      "ส่ง": {
        "_triggering_element_name": "field_article_add_more",
        "_triggering_element_value": "เพิ่มอีกรายการ"
      }
    },
    "แก้ไขฟิลด์ย่อหน้าเพิ่มเพิ่มเติมเพิ่มปุ่มข้อความ": {
      "โทรกลับ": [
        "Drupal\paragraphs\Plugin\Field\FieldWidget\InlineParagraphsWidget",
        "addMoreAjax"
      ]
      ...

ถ้าไม่เช่นนั้น คุณต้องดีบัก PHP ฝั่งเซิร์ฟเวอร์ ถ้าใช่ แสดงว่าเป็น Javascript ฝั่งไคลเอ็นต์

beltouche avatar
cn flag
มีแท็กสคริปต์ในแหล่งที่มาของหน้าที่มี data-drupal-selector="drupal-settings-json" เบราว์เซอร์เพิ่งแคชการทดลองอย่างเหนียวแน่นโดยที่ฉันพยายามเพิ่ม #ajax subarray ให้กับรายการโดยพลการ มิฉะนั้น จะไม่มีหลักฐานของ ajax ที่เกี่ยวข้องกับรูปแบบโหนดทั้งที่นั่น และเมื่อฉันวิเคราะห์ $form array w/ xdebug ใน hook_form_alter ของฉัน
beltouche avatar
cn flag
ตอนนี้ฉันมีคำถามสี่ข้อ: 1) ฉันกำลังมองหาในจุดที่ถูกต้องหรือไม่? 2) ฉันเพิ่งเพิ่ม #ajax subarray ไปที่ปุ่มส่งปกติหรือไม่ 3) โทรกลับคืออะไร? '::submitForm' เพียงพอหรือไม่ หรือฉันต้องเขียนฟังก์ชันแบบกำหนดเองที่เรียกใช้อาร์เรย์ของฟังก์ชัน '#submit' ทั้งหมด 4) ฉันจะเรียกใช้ Ajax แทนการส่งแบบปกติได้อย่างไร
4uk4 avatar
cn flag
ตามที่กล่าวไว้ จุดที่ 1 (#ajax) เป็นจุดที่ถูกต้อง เพิ่มวิดเจ็ตเติมข้อความอัตโนมัติอ้างอิงเอนทิตีลงในแบบฟอร์มโหนด แล้วคุณจะเห็นปุ่ม ajax เพิ่มเติมจากเอาต์พุต json ด้านบน
beltouche avatar
cn flag
ฉันยอมรับว่าจุดที่ 1 คือหนทางที่จะไป "ฉันกำลังมองหาในจุดที่ถูกต้องหรือไม่" อ้างถึงตำแหน่ง/วิธีที่ฉันพบ "drupal-settings-json" ที่คุณกล่าวถึง

โพสต์คำตอบ

คนส่วนใหญ่ไม่เข้าใจว่าการถามคำถามมากมายจะปลดล็อกการเรียนรู้และปรับปรุงความสัมพันธ์ระหว่างบุคคล ตัวอย่างเช่น ในการศึกษาของ Alison แม้ว่าผู้คนจะจำได้อย่างแม่นยำว่ามีคำถามกี่ข้อที่ถูกถามในการสนทนา แต่พวกเขาไม่เข้าใจความเชื่อมโยงระหว่างคำถามและความชอบ จากการศึกษาทั้ง 4 เรื่องที่ผู้เข้าร่วมมีส่วนร่วมในการสนทนาด้วยตนเองหรืออ่านบันทึกการสนทนาของผู้อื่น ผู้คนมักไม่ตระหนักว่าการถามคำถามจะมีอิทธิพลหรือมีอิทธิพลต่อระดับมิตรภาพระหว่างผู้สนทนา