Problem/Motivation

Were are using a custom submit button on the node edit page which is configured the following:

$element['emp_save_edit_ajax'] = [
      '#type' => 'submit',
      '#value' => $config->get('button_value'),
      '#submit' => [
        '::submitForm',
        '::save',
      ],
      //'#attributes' => ['class' => 'emp_save_edit_submit_ajax'],
      '#attributes' => [
        'class' => [
          'container-emp_save_edit_submit_ajax',
          'button--primary',
        ],
      ],
      '#ajax' => [
        'callback' => '::emp_save_edit_form_submit_ajax',
        'progress' => [
          'type' => 'throbber',
        ],
      ],
      '#weight' => $config->get('button_weight'),
      '#gin_action_item' => TRUE,
    ];

Which produces this button html:

<input class="container-emp_save_edit_submit_ajax button--primary button js-form-submit form-submit" form="node-landingpage-content-edit-form" data-drupal-selector="edit-emp-save-edit-ajax" type="submit" id="edit-emp-save-edit-ajax" name="op" value="Save" data-once="drupal-ajax">

When clicking the button the a ajax request is triggered and the server side callback function`emp_save_edit_form_submit_ajax` is called - works.
With tag 3.0-rc14 (and later) the html of the button has changed and the ajax request (and also the server side callback function) is not triggered anymore
new html of button:

<input class="container-emp_save_edit_submit_ajax button--primary button js-form-submit form-submit" data-drupal-selector="gin-sticky-edit-emp-save-edit-ajax" id="gin-sticky-edit-emp-save-edit-ajax" form="node-app-storefront-content-edit-form" data-gin-sticky-form-selector="gin-sticky-edit-emp-save-edit-ajax" type="submit" name="op" value="Save">

I have boiled it down to this commit, with these changes things broke:
https://git.drupalcode.org/project/gin/-/commit/c2d182f5e0d50c8c953eb192...

I have no clue what is going and why things are not working anymore (for us).

May someone can explain

Best regards

CommentFileSizeAuthor
#14 gin-3499408-custom-ajax-button-reroll-3.x-14.patch2.01 KBaludescher

Issue fork gin-3499408

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

skrug created an issue. See original summary.

skrug’s picture

skrug
Primary language German
commented
Version: 8.x-3.0-rc14 » 4.0.2

Changed version from 8.x-3.0-rc14 to 4.0.2 because this also applies for this version but it all started with version 8.x-3.0-rc14.
More precisely with commit https://git.drupalcode.org/project/gin/-/commit/c2d182f5e0d50c8c953eb192...

In other themes ajax button are working as expected.

Other example which does not work:

function emp_save_edit_form_alter(array &$form, FormStateInterface $form_state, $form_id) {
  // Check if the form is a node edit form.
  if (str_starts_with($form['#form_id'], 'node_') && str_ends_with($form['#form_id'], 'edit_form')) {
    // Add a custom save button.
  $form['actions']['custom_save'] = [
      '#type' => 'submit',
      '#value' => t('Custom Save'),
      '#ajax' => [
        'callback' => '_emp_save_edit_custom_save_ajax_callback',
        'wrapper' => 'node-edit-form-wrapper',
        'effect' => 'fade',
      ],
      '#submit' => ['_emp_save_edit_custom_save_submit'],
      '#weight' => 10,
      '#gin_action_item' => TRUE,
  ];
  }
}
/**
 * AJAX callback for the custom save button.
 */
function _emp_save_edit_custom_save_ajax_callback(array &$form, FormStateInterface $form_state) {
  // Return the form to be re-rendered.
  return $form;
}
/**
 * Custom submit handler for the custom save button.
 */
function _emp_save_edit_custom_save_submit(array &$form, FormStateInterface $form_state) {
  // Custom logic for saving the node.
  // For example, you can save the node with custom logic or set a message.
  $node = $form_state->getFormObject()->getEntity();
  \Drupal::messenger()->addMessage(t('Node @title has been saved with custom logic.', ['@title' => $node->getTitle()]));
  $node->save();
}

volkerk made their first commit to this issue’s fork.

volkerk opened merge request !576

volkerk’s picture

volkerk commented
Status: Active » Needs review
saschaeggi’s picture

saschaeggi
he/him
commented
Status: Needs review » Needs work

This probably needs a rebase since we've merged #3503304: Sticky actions fail on Ajax

Thanks 🙇

miha.wagner’s picture

miha.wagner commented
Status: Needs work » Reviewed & tested by the community

Can confirm the patch provided via the MR fixes the ajax button issue. RTBTC +1.

skrug’s picture

skrug
Primary language German
commented

I can also confirm that fix provided in the branch fixes the issue. RTBTC + 1
Thanks everyone.

saschaeggi’s picture

saschaeggi
he/him
commented
Status: Reviewed & tested by the community » Fixed

Glad to see this fixed, thank you! 🥳👏🤝

saschaeggi’s picture

saschaeggi
he/him
commented

Included in the 4.0.4 release: https://www.drupal.org/project/gin/releases/4.0.4

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

kmani’s picture

kmani
Primary language English
commented

The same issue occurs in Gin 3.0 as well. I'm unable to add my custom AJAX button to the Gin sticky header — the AJAX behavior isn't being attached to the button, and clicking it results in a full page reload.

aludescher’s picture

aludescher commented
StatusFileSize
new gin-3499408-custom-ajax-button-reroll-3.x-14.patch2.01 KB

Here's the same fix rerolled for Gin 3.x.