3

I'm working on ajaxifying a form which uses Hierarchical Select widget. I need to update a text field based on the value of HS and a couple of other fields. I want to use Drupal forms Ajax API. I followed the http://drupal.org/node/752056. Now the form is updated when user fills in the text fields. But I can't cope with HS.

I was told http://drupal.org/node/1630186 HS doesn't support regular Drupal #ajax mechanism. I can easily attach the handler to HS update event. So all I need now is to manually trigger Drupal Ajax machinery from my own handler. How it's best to be done?

I see there is a global Drupal.ajax object but can't figure out how to make use of it.

6

There is a really simple work around for this. You can add a button or a hidden input field with an ajax callback and trigger this callback by jQuery.

So declare your button:

$form['my_button'] = array(
   '#type' => 'button',
   '#ajax' => array(
     'callback' => 'my_callback',
     'event' => 'hs_changed',
   ),
   // hide the button and set a unique id:
   '#prefix' => "<div style='display:none' id='my_ajax_button'>",
   '#suffix' => "</div>"
);

In your javascript you can then easily trigger the event with jQuery.trigger:

jQuery("#my_ajax_button input").trigger('hs_changed');

This will trigger your ajax callback.

http://api.jquery.com/trigger/

http://api.drupal.org/api/drupal/developer!topics!forms_api_reference.html/7#ajax

  • Wow, looks like it works :) Still trying to work out the details. I already have a couple of text field elements with #ajax attached. Can I reuse any of these? I tried to pass 'event' => array('click', 'hs_changed'). It doesn't work. The element stops reacting on clicks and triggered hs_changed events. – Dmitry Vyal Jun 18 '12 at 13:13
  • I don't know but I assume it isn't possible to attach two different ajax handlers for one element :( – jantimon Jun 18 '12 at 13:23
  • 1
    Oh wait I guess I got you wrong. You can trigger the default click event. Try jQuery(".another-button").mouseup() – jantimon Jun 18 '12 at 13:25
  • Yeah! It's 'blur' in my case though, and can easily be found out by inspectiong Drupal.ajax object. By the way, I couldn't attach the handler to custom form element. Don't know why. Maybe because I'm altering an entity creation form, not building one from scratch. – Dmitry Vyal Jun 18 '12 at 13:38
  • Just to save someones time - Ghommey's answer is great, but for some reason, for me jQuery(".another-button").mouseup() part didn't work. However, jQuery(".another-button").mousedown() works. – Ivan Čurdinjaković Nov 9 '12 at 11:45
2

To piggy back on the answer above (I can't comment without 50 reputation...), you can attach a click handler with jQuery and trigger the namespaced event.

$form['my_button'] = array(
   '#type' => 'button',
   '#ajax' => array(
     'callback' => 'my_callback',
     'event' => 'hs_changed',
   )
);

And create a click handler with custom trigger.

(function($) {
  Drupal.behaviors.buttonSubmit = {
    attach: function(context, settings) {
      $('button', context).on('click', function(e) {
        $(this).trigger('hs_changed'); // Fires the AJAX submit
        // Add other button effects or changes below.
      });
    }
  };
})(jQuery);

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.