By SlashCrew on

I want to use the data- attribute in some of my tags ( http://html5doctor.com/html5-custom-data-attributes/ ), and I have been searching for a way to include it.

Ex:
I am adding js to my form. I use hook_form_alter and the #attached property.

$path = drupal_get_path('module', 'mymodule');
$form['#attached']['js'][] = array('data' => $path . '/js/custom_values.js','type' => 'file');

How do I add a data- attribute to the tag generated? I want to use it for arguments to the js script.

⋅ Categories: Drupal 7.x

Comments

jaypan’s picture

jaypan
Location Victoria, BC
commented

I believe you want this:

'#data-' => 'my data'

Contact me to contract me for D7 -> D10/11 migrations.

SlashCrew’s picture

SlashCrew commented

$form['#attached']['js'][] = array('data' => $path . '/js/custom_values.js','type' => 'file', '#data-arg' => 'my data');

Does not work, unfortunately, that would have been a nice solution thou :-)

jaypan’s picture

jaypan
Location Victoria, BC
commented

That's because you are trying to attach an attribute to a script - attributes are part of html elements, not scripts. Are you trying to add a new attribute to the form tag itself? If so, try this:

$form['#data-arg'] = 'my data';

Or it may be this:

$form['#attributes']['data-arg'] = 'my data';

Contact me to contract me for D7 -> D10/11 migrations.

SlashCrew’s picture

SlashCrew commented

Every HTML element may have any number of custom data attributes specified, with any value.

http://dev.w3.org/html5/spec/Overview.html#custom-data-attribute

The script tag is an html element, so it is valid HTML5 to add the data- attribute.
But I have been doing a bit more digging, and it seems Drupal 7 does not support this functionality yet.

Checked out your blog btw. I learned a thing or two. Excellent stuff :-)

jaypan’s picture

jaypan
Location Victoria, BC
commented

Glad to hear!

Anyways, you can do this, you are just doing it in the wrong spot. You left out the bit of information that you were trying to alter the <script> tag - so I wasn't able to help you until now.

You can override tags in hook_process_html_tag(&$vars). You can add your attributes in the #attributes key of the array, and it should be rendered as part of the element.

Contact me to contract me for D7 -> D10/11 migrations.

SlashCrew’s picture

SlashCrew commented

This would be cool.. But it does not seem to be the way it works today

$form['#attached']['js'][] = array('data' => $path . '/js/custom_values.js','type' => 'file', 'data-city' => 'Hong Kong');

would give

<script src="http://domain.com/sites/all/modules/mymodule/js/custom_values.js?m07a8u" data-city="Hong Kong"></script>

Probably you should name the data attribute to data-[module name]-city in this case, so there is not conflict between modules.

alejo d’s picture

alejo d
Mr
Primary language English
Location Buenos Aires
commented

At 

hook_form_alter(&$form, &$form_state, $form_id)

You have a 'submitted' key so u can record this

if(isset($form['submitted'])){
   foreach($form['submitted'] as $k => $v){
			
      // Example how to change managed_file
      if ($v['#type'] == 'managed_file') {
        $form['submitted'][$k]['#pre_render'][] = 'myfunction_file_pre_render';
      }
   }
}

The function to alter element

function myfunction_file_pre_render($element){

  $file_validations = $element['#webform_component']['extra']['filtering']['types'];
  $add_extensions = explode(',', strtolower($element['#webform_component']['extra']['filtering']['addextensions']));

  foreach ($add_extensions as $key => $value) {
    $add_extensions[$key] =  trim($value);
  }

  $file_validate_extensions = implode(',', array_unique(array_merge($file_validations, $add_extensions)));
 
  //We add attr data to input file upload
  $dataConfig= array(
    'filters' => array(
        'max_file_size' => $element['#webform_component']['extra']['filtering']['size'],
        'mime_types' => array(
          'title' => $element['#title'],
          'extensions' => $file_validate_extensions
        )
      )
  );

  $element['upload']['#attributes']['data-config'] = json_encode($dataConfig);
  return $element;
}

So at this function you have all elements to change.

Cheers,
Allcoders.

leo96’s picture

leo96 commented

Try this Module
Form Options Attribute module