custom ajax button not working anymore

Created on 13 January 2025, 4 months ago

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

🐛 Bug report
Status

Active

Component

Code

Created by

🇩🇪Germany skrug Bamberg

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @skrug
  • 🇩🇪Germany skrug Bamberg

    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();
    }
    
  • First commit to issue fork.
  • Pipeline finished with Failed
    3 months ago
    Total: 281s
    #420756
  • Pipeline finished with Success
    3 months ago
    Total: 174s
    #420761
  • 🇨🇭Switzerland saschaeggi Zurich

    This probably needs a rebase since we've merged 🐛 Sticky actions fail on Ajax Active

    Thanks 🙇

  • Pipeline finished with Success
    3 months ago
    Total: 174s
    #421849
  • 🇸🇮Slovenia miha.wagner

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

  • 🇩🇪Germany skrug Bamberg

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

  • 🇨🇭Switzerland saschaeggi Zurich

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

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

Production build 0.71.5 2024