How do I add 'beforesend' code to an ajax call

By TonyFricker on 26 Jun 2020 at 13:22 UTC

I have an ajax form which works well. It uses the ajax below to make the submit button update the form:

          '#ajax'       =>
            [
            'callback' => '::ajax_callback',
            'wrapper' => 'my-container',
            ],

How do I add 'beforesend' functionality to this definition if for example, I want to update the background color of the submit button before the ajax call is sent?

Thanks.

Comments

In the Drupal 8 Ajax API

slewazimuth commented 26 June 2020 at 14:19

In the Drupal 8 Ajax API there is a BeforeCommand https://api.drupal.org/api/drupal/core!core.api.php/group/ajax/8.9.x

How do I add 'beforesend'

Jaypan commented 26 June 2020 at 16:44

How do I add 'beforesend' functionality to this definition if for example, I want to update the background color of the submit button before the ajax call is sent?

If you do it on before send, you're going to have to do filtering for that specific ajax event.

I'd add a JS handler to the form that changes the color of the button on submit.

Adding JS handler

TonyFricker commented 27 June 2020 at 12:43

Thanks for such quick replies. Such a help.

Jaypan, I have created many websites but only a few that are Drupal.

In order to make things consistent across the site I am working on at the moment I tried within my custom theme adding an event handler to .button/click as all buttons on the site are class .button.

This applies consistent styling to all buttons when they are clicked but the buttons within the Ajax form do not get picked up by the handler. I also tried setting up an identical handler for submit and it also did not trigger when the form was submitted.

Could you tell me, would you expect a JS handler in the theme to work? I thought of there as I am applying CSS changes it made me think it should be part of the theme.

Is there anything you could suggest? Do you need further information?

Thanks so much for your help

In the wrong place

TonyFricker commented 27 June 2020 at 12:54

Sorry, I did not specifically say so was worried it was not clear. What I am trying to say is, does the event handler not pick up the click and submit events as I have put it in the wrong place? I would prefer within the theme as I am trying to do theming tasks but did not know if that was why it was not working.

One other thing I forgot to mention is there are multiple submit buttons doing different form updates/changes. The submit handling of the form works out what the triggering element was and then amends the form as required and works well but I wondered if multiple submit buttons could be causing a problem. Perhaps not likely but worth a mention.

Thanks

Try .mousedown() instead of

Jaypan commented 27 June 2020 at 13:55

Try .mousedown() instead of .click(). Ajax buttons use a different handler, and you may be hitting a conflict.

Thanks

TonyFricker commented 27 June 2020 at 16:03

That's great. Mousedown is picked up for all the buttons of the required class. I think I have always used on click before and would not have thought of that. Really appreciate your help. I will use that solution.

This has got me thinking. I don't know what parameters I can use within the ajax definition that I sent at the start of this. Should I need it for anything else, do you know if there is a way to set beforesend? Also, what else is available? I cannot find anything in the documentation although I could believe it is there.

Thanks very much again