The Drupal forms #states functionality is broken by this theme.

When using this theme it is no longer possible to use the #states function to pragmatically make elements visible and invisible. The same code works when switching between other themes and fails silently when using bootstrap.

Comments

markhalliwell’s picture

Status: Active » Closed (fixed)

Stop duplicating issues #2136839: FAPI states.js broken

They DO work, here is a screencast proving it:
https://www.monosnap.com/file/xJ8JMdP8dQXcNlfYfj6Nc0ps8Bjs5c

prestondocks’s picture

Status: Closed (fixed) » Needs review
prestondocks’s picture

Status: Needs review » Active

https://www.monosnap.com/file/txcvKF9hFc1afBRMkkHKwk2cpGhDeA

If you can post code from a custom module showing that #states works with bootstrap 3 then I will accept that, but my video clearly shows that it does not, but that it does work with other themes.

If it helps here is my code.

$form['computer'] = array(
'#title'=>'Do you own a computer',
'#type'=>'radios',
'#options'=>array('yes'=>'Yes','no'=>'No'),
'#required'=>TRUE,
);

$form['age_range'] = array(
'#type'=>'select',
'#title'=>'Age Range',
'#options'=>$age_ranges,
'#ajax'=>array(
'event'=>'change',
'callback'=>'childcare_observations_ajax_set_eyfs_category_list',
'wrapper'=>'eyfs_category_wrapper',
//'method'=>'replace',
'effect'=>'fade',
)
);

$form['eyfs_category_wrapper'] = array(
'#title'=>'Select sub categories',
'#type'=>'fieldset',
'#collapsible'=>TRUE,
'#collapsed'=>FALSE,
'#attributes'=>array('class'=>array('eyfs_category_wrapper')),
'#states'=>array(
'visible'=>array(
':input[name="computer"]'=>array('value'=>'yes'),
),
),

);
$form['eyfs_category_wrapper']['eyfs_category'] = array(
'#type'=>'select',
'#title'=>'EYFS Category',
'#options'=>array(),
'#prefix'=>'

',
'#suffix'=>'

',
'#attributes'=>array('class'=>array('form-control')),
);

return $form;
}

function childcare_observations_ajax_set_eyfs_category_list(&$form,&$form_state){

if($form_state['values']['age_range'] == 'default'){

$options = array('0'=>'Select a category');
$form['eyfs_category_wrapper'] = array(
'#title'=>'Select sub categories',
'#type'=>'fieldset',
'#collapsible'=>TRUE,
'#collapsed'=>FALSE,
'#states'=>array(
'visible'=>array(
':input[name="computer"]'=>array('value'=>'yes'),
),
),

);

$form['eyfs_category_wrapper']['eyfs_category'] = array(
'#type'=>'select',
'#title'=>'EYFS Category',
'#options'=>$options,
'#prefix'=>'

',
'#suffix'=>'

',
'#attributes'=>array('class'=>array('form-control')),
);

return $form['eyfs_category_wrapper'];
}
$tid = $form_state['values']['age_range'];
$eyfs_category_options = array();
$children = taxonomy_get_children($tid);
foreach($children as $child){
$eyfs_category_options[$child->tid] = $child->name;
}

$form['eyfs_category_wrapper'] = array(
'#title'=>'Select sub categories',
'#type'=>'fieldset',
'#collapsible'=>TRUE,
'#collapsed'=>FALSE,
'#states'=>array(
'visible'=>array(
':input[name="computer"]'=>array('value'=>'yes'),
),
),

);

$form['eyfs_category_wrapper']['eyfs_category'] = array(
'#type'=>'select',
'#title'=>'EYFS Category',
'#options'=>$eyfs_category_options,
'#prefix'=>'

',
'#suffix'=>'

',
'#attributes'=>array('class'=>array('form-control')),
);
return $form['eyfs_category_wrapper']['eyfs_category'];
}

markhalliwell’s picture

You're using the dev snapshot that isn't up to date. d.o's packaging infra isn't working right, please either pull the LATEST code from https://drupal.org/project/bootstrap/git-instructions

or you can download the snapshot from the repo:
http://drupalcode.org/project/bootstrap.git/snapshot/refs/heads/7.x-3.x....

markhalliwell’s picture

Status: Active » Closed (fixed)
prestondocks’s picture

Many Thanks.
It's working now by using the latest 7.x-3 from git