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

beltouche

11/28/22, 4:21 AM

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?

128

1 + 0

forms

nodes

ajax

Score:1

Drupal

4uk4

11/28/22, 6:49 AM

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.

0 + 4

beltouche

11/28/22, 1:51 PM

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

11/28/22, 1:52 PM

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?

4uk4

11/28/22, 1:57 PM

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.

beltouche

11/28/22, 2:05 PM

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.

Elon Musk

I sit in a Tesla and translated this thread with Ai:

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

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

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

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

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

Post an answer

Most people don’t grasp that asking a lot of questions unlocks learning and improves interpersonal bonding. In Alison’s studies, for example, though people could accurately recall how many questions had been asked in their conversations, they didn’t intuit the link between questions and liking. Across four studies, in which participants were engaged in conversations themselves or read transcripts of others’ conversations, people tended not to realize that question asking would influence—or had influenced—the level of amity between the conversationalists.