Score:0

Need help with AJAX calls within Drupal.behaviors

in flag

I'm having some issues getting the following code to work correctly:

(function($) {
'use strict';
Drupal.behaviors.mybehavior = {
    attach: function(context, settings) {

        // Click on a placeholder image, this should open a form and then
        // replace the image with a video resource (gated content)
        $(document).once('abc').on('click', '.image_class', function() {
            var fid = 123 // Get form entity ID from data attribute
            var vid = 456 // Get resource entity ID from data attribute

            // This AJAX call loads a form and returns a OpenModalDialogCommand
            // containing the form.
            Drupal.ajax({
                url: '/load/a/form/' + fid
            }).execute().done(function() {
                var id = // Get Marketo form ID
                // Load form from Marketo
                MktoForms2.loadForm('cname', '123-123-123', fid, function(form) {
                    form.onSuccess(function(e) {
                        form.getFormElem().hide();

                        // If form is submitted successfully, load the video
                        // resource and place it on the page with an HTMLCommand
                        Drupal.ajax({
                            url: '/load/a/video/' + vid
                        }).execute().done(function() {
                            // Basic CSS/cleanup work here
                        });
                        return false;
                    });
                });
            })
        });
    }
}
})(jQuery);

The whole process works correctly but it duplicates previous AJAX calls at each step.

For instance, when I click the initial selector .image_class the AJAX call that loads a form works great.

Once I complete the form successfully, the second AJAX call fires but this seems to also trigger the first AJAX call again effectively putting the form that was just completed and removed back on the page, re-opening the dialog.

Everything's triggering correctly, I just can't figure out how to get this process to work without re-triggering all the previous AJAX calls.

Thanks!

leymannx avatar
ne flag
The parameters are missing from the start `(function ($, Drupal, once) {` and the end `})(jQuery, Drupal, once);`. Also make sure you add them as dependencies in your library definition. Make it look more like the samples in the docs: https://www.drupal.org/docs/drupal-apis/javascript-api/javascript-api-overview
mangohost

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.