0

Using jQuery, I need to programmatically click / select Form items (radios, select lists, checkboxes, etc). This field item has an '#ajax' action / callback defined using Form API.

The following code from a similar question works for submit buttons (Programatically trigger a click on an AJAX enabled form submit button):

jQuery('#edit-submit').mousedown()

However, this does not work for radio buttons. I have also tried creating a copy of the element and making my own AJAX call using the following code from another similar question (Use Drupal7 AJAX goodness programmatically):

          base = 'edit-my-radio-button';
          element = '<input type="radio" id="'+base+'" name="cat-selector" value="garfield" class="form-radio ajax-processed">';
          element_settings = Drupal.ajax[base].element_settings;
          myAjax = new Drupal.ajax(base, element, element_settings);
          myAjax.eventResponse(element, 'click');

The AJAX call is made, but the screen does not update as if the user clicked it. How can I programmatically select a radio button or select list using jQuery and cause Drupal to execute the AJAX call?

Please note: I have purposely kept this question as open ended as possible. My hope is that there is a more general way to do this for all form element types and that future answers regarding these can be considered relevant so that we have a single resource for this problem.

1

In order to select radio buttons using jQuery I came up with the following solution:

base = 'edit-my-radio-button';
id = '#'+base;
$(id).click();
Drupal.ajax[base].eventResponse($(id), 'click');

After some digging around in misc/ajax.js, I found that Drupal AJAX stores the result of new Drupal.ajax(base, element, element_settings) in the Drupal.ajax[] JavaScript Array. This led me to realize that I did not need to create a fake element or an element_settings object as the Use Drupal7 AJAX goodness programmatically answer suggested. While that simplified my code, and eventResponse() created a successful AJAX request, the AJAX commands being returned still did not execute.

On a hunch, I decided to use .click() followed by .eventResponse() because I noticed that false was being printed on the console.

After looking at the .eventResponse() code, I am not 100% sure where it is looking for the element to be currently selected. After stepping through the function calls, I believe jquery.form.js is checking to see if the item is selected, but since this file is minified by default, I have not gone through it yet. If anyone else can shed light on this or be willing to step through the function calls, that would be great!

FYI: If I run these commands manually in the console, .eventResponse() still returns false, so don't be alarmed when you see that.

0

@MD3 Did you try to explicitly check the radio button before clicking it?

$(id).attr('checked', true);

I've had the same problem as you and doing that solved it.

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.