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!