0

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?

1

The first point is the only straightforward way. A regular node edit form has already Ajax form elements. You can check the "ajax" subarray of drupal-settings-json delivered to the browser.

You should see your own Ajax callback here as well:

  "ajax": {
    "edit-field-article-add-more": {
      "callback": [
        "Drupal\\Core\\Field\\Plugin\\Field\\FieldWidget\\EntityReferenceAutocompleteWidget",
        "addMoreAjax"
      ],
      "wrapper": "field-article-add-more-wrapper",
      "effect": "fade",
      "event": "mousedown",
      "keypress": true,
      "prevent": "click",
      "url": "\/node\/123\/edit?destination=\/admin\/content\u0026ajax_form=1",
      "dialogType": "ajax",
      "submit": {
        "_triggering_element_name": "field_article_add_more",
        "_triggering_element_value": "Add another item"
      }
    },
    "edit-field-paragraph-add-more-add-more-button-text": {
      "callback": [
        "Drupal\\paragraphs\\Plugin\\Field\\FieldWidget\\InlineParagraphsWidget",
        "addMoreAjax"
      ],
      ...

If not, then you have to debug server-side PHP. If yes, then client-side Javascript.

4
  • There's script tag in the page source with data-drupal-selector="drupal-settings-json". Browser just tenaciously cached an experiment where I tried adding an #ajax subarray to an arbitrary item. Otherwise, there's no evidence of any ajax associated with the node form either there, nor when I analyse the $form array w/ xdebug in my hook_form_alter.
    – beltouche
    Jul 28 at 13:51
  • I now have four questions: 1) Am I looking in the right spot? 2) Do I just add an #ajax subarray to the regular submit button? 3) What's the callback? Is '::submitForm' sufficient or do I need to write a custom function that somehow invokes the whole '#submit' array of functions? 4) How do I trigger the Ajax instead of the regular submit?
    – beltouche
    Jul 28 at 13:52
  • As said, point 1 (#ajax) is the right spot. Add an entity reference autocomplete widget to the node form and you'll see the ajax add more button from the json output above.
    – 4k4
    Jul 28 at 13:57
  • I accept that point #1 is the way to go. The "Am I looking in the right spot?" was referring to where/how I found the "drupal-settings-json" you mentioned.
    – beltouche
    Jul 28 at 14:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.