Saturday 17 December 2011

AJAX tips and tricks in Drupal 7

I've been very inspired by Earl Miles' advanced code examples:
http://www.angrydonuts.com/drupal-7-advanced-ajax-tips-and-tricks
Very good stuff !
What I would like to achieve:
When a user clicks on the ajax link, I don't want the ajax stuff to be triggered right away.
I want to process several tasks before:
- remove some html tags
- remove drupal throbber
- create my own throbber and place it in a very specific div...
- then trigger the ajax stuff
I tried to write some js based on Earl's example where he creates a custom event and triggers it later in the code.
My code works correctly except for the ajax stuff. :)
Nothing is triggered (no POST in the firebug console)
I can't figure out what is wrong in my code:
        // Click on CTA button
        Drupal.behaviors.CTAclickbutton = {
  attach: function (context, settings) {

    /**
     * Use a class to bind custom behavior to a link. As it happens, the behavior
     * if this link is nearly exactly the same as with "use-ajax". But instead
     * we are ensuring that the throbber is active.
     */
       
    $('.ctabutton-use-ajax:not(.ajax-processed)').addClass('ajax-processed').each(function () {
      var element_settings = {};

      // Remove drupal throbber.
      element_settings.progress = {};
     
      // For anchor tags, these will go to the target of the anchor rather
      // than the usual location.
      if ($(this).attr('href')) {
        element_settings.url = $(this).attr('href');
        element_settings.event = 'DelayedClick';
      }
     
      var base = $(this).attr('id');
      var ajax = new Drupal.ajax(base, this, element_settings);
     
      $(this).click(function () {
    $('#slidesHolder').remove();
$(ajax.element).trigger('DelayedClick');

return false;

  });
     
  Drupal.ajax[base] = ajax;
    });


  }
         };

No comments:

Post a Comment