0

I've tried to add a loading animation to the website in case if the user clicks on buttons or input submit buttons. It work, except on those buttons which using AJAX. For some reason those buttons are processed, but my event listener looks like it was detached... Anybody know the reason or how can I fix it?

Code for the loading (it will create an overlay with a spinner and text):

(function ($, Drupal) {
  Drupal.behaviors.myModuleLoading = {
    attach: function attach(context) {
      $('button, .btn, input[type=submit]').not('.close').once('loading').on('click', function (event) {
        // Create the loading DOM.
        var background = $('<div>', document);
        background.addClass('loading-background');
        var logo = $('<div>', document);
        logo.addClass('loading-container').append(
          $('<div>', document).addClass('loading-container-inner').append(
            $('<div>', document).addClass('loading-icon')
              .append($('<div>', document)).append($('<div>', document))
              .append($('<div>', document)).append($('<div>', document))
              .append($('<div>', document)).append($('<div>', document))
              .append($('<div>', document)).append($('<div>', document))
          ).append(
            $('<div>', document).addClass('loading-text').text('Processing...')
          )
        );

        // Add to the body the created DOM.
        $('body').append(background).append(logo);
      });

      // Remove any remaining loading if user close a modal.
      $('.close').on('click', function () {
        $('.loading-background, .loading-container').remove();
      });

      // If it was an AJAX call this will be called.
      $('.loading-background, .loading-container').remove();
    }
  };
}(jQuery, Drupal));

Keep in mind, it works on those buttons, which doesn't use AJAX at all. With those buttons which using AJAX, it doesn't work from the beginning, but the loading-processed class is visible, which is added by the once('loading') code. I guessing there's a magic somewhere in Drupal which prevents to call other event listeners? (In chrome there's a way to stop the script and debugging if a click event happened, in AJAX buttons it doesn't stop, in normal buttons it stops, both are input[type=submit] type buttons.)

0

I'm not sure, based on your code, how you are adding buttons to your form(s)/pages, however, I would venture to guess the AJAX controlled buttons are not working because they are calling the built-in loading/submit callbacks within the Drupal 7 AJAX API (example.)

You may find the following example useful:

/**
* Implementation of hook_menu().
*/
function myModule_ajax_menu() {
  $items['get/ajax/Simple Drupal AJAX load with jQuery and delivery callback'] = array(
  'page callback' => 'myModule_ajax_get_ajax', // Render HTML
  'type' => MENU_CALLBACK,
  'page arguments' => array(2),
  'access arguments' => array('access content'),
  'delivery callback' => 'myModule_ajax_callback',  // Magic goes here
 );
 return $items;
}
  • The buttons are rendered on the page by the PHP/Drupal at load time. I don't think this is the problem. You should be able to add a new JS event listener to a button which exist on the DOM, I don't think the 'callback' itself is the problem, I don't even interested in the callback. I think than more likely the problem is how the Drupal handles these buttons. Maybe there's a stopPropagation() which blocks my script to run. – golddragon007 May 7 at 7:13
  • In other words my problem is, the added event listener is not triggered when it should be. – golddragon007 May 7 at 7:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.