#ajax doesn't work if element CSS ID attribute set [#1268886]

Note: I had this problem with 'select' and 'textfield' form '#type' elements so I'm not sure if it applies to all.

In creating a ajax-enabled form element I have something like the following:

<?php
$element = array(
  '#type' => 'textfield',
  '#default_value' => '',
  '#attributes' => array('id' => 'textfield_css_id'),
  '#ajax' => array(
    'wrapper' => 'ajax_update_css_id',
    'callback' => 'MYMODULE_some_ajax_callback
  ),
);

The rest of my functions/callbacks are already in and working.

The ajax functionality works when the "#attribute => array('id' => 'SOMENAME')' is commented out.

The ajax functionality fails to work when the line remains.

I'm not sure if there is another thread on this but I wanted to point it.

Comment	File	Size	Author
#6	drupal_duplicate-ids-ajax-processed_1268886-6-D7.patch	712 bytes	scottalan
#6

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

rfay

English

Palisade, CO, USA

CreditAttribution: rfay commented 5 September 2011 at 12:51

Version:

7.7

» 7.x-dev

I confirm this. The JS code that sets up triggers seems to be dependent on the ID created by drupal_html_id().

Comment #2

alx_benjamin CreditAttribution: alx_benjamin commented 18 May 2015 at 17:00

Issue summary:

View changes

Can confirm the same.

Comment #3

alx_benjamin CreditAttribution: alx_benjamin commented 18 May 2015 at 17:20

To work around this I'd add a class to the ajax element and later get its id through the class:

$form['form-name'] = array(
    '#type' => 'select',
    '#options' => $options,
    '#default_value' => $default,
    '#attributes' => array(
      'class' => array('my-class'),
    ),
    '#ajax' => array(
      'callback' => 'mymodule_some_ajax',
      'wrapper' => 'my_wrapper'
    ),
  );

(function ($) {
  Drupal.behaviors.msftaudit_audit_formxx = {
    attach: function (context, settings) {
      
      var element_id = $('.my-class').attr('id');
      
      Drupal.ajax[element_id].options.beforeSubmit = function(form_values, element, options){
	//Do what you need to do and then
	//return TRUE;
	//or
	return FALSE;
      }     
    }
  };
}(jQuery));