By Jeffrey04 on

I need to apply some Javascript code to the user profile page and hence I need some of the custom fields in user profile to be given specific class names. However, I don't find it possible with the profile module. I would like to know whether I can extend the profile module to include new field types or there is a simpler solution to this problem?

⋅ Categories: Drupal 5.x

Comments

alan d.’s picture

alan d. commented

The fields are all give id's, so this appears to be a cleaner way of hooking the form fields.

e.g.

  $('#edit-profile-test').myCustomFunction();

Looking at the profile module, (just a 10 second scan), I can not see a simple clean way of adding a class.

Alan Davison
www.caignwebs.com.au
Alan Davison
Jeffrey04’s picture

Jeffrey04 commented

thanks for the information. Anyway I am going to use YUI with Drupal, the dollar sign function seems to be a prototype/jQuery function right? I would probably going to change my javascript code a bit to allow it to collect field id as well.

alan d.’s picture

alan d. commented

I'd suggest looking at some reference sites for jquery. It's a very powerful library and is core to the javascript routines used in Drupal. It has a number of selectors, either id, class or pretty much anything else. (Xpath based)

It makes javascript real easy.

Alan Davison
www.caignwebs.com.au
Alan Davison
Jeffrey04’s picture

Jeffrey04 commented

YUI has similar features as well, it is just that I want to use my current javascript app directly without modifying the existing code (yes, I'm lazy)....

Jeffrey04’s picture

Jeffrey04 commented

I have just found out this http://drupal.org/node/101092

Can I do something similar? like create a template for the new profile fields to override the default template? Then modify the field a bit to include the desired class name?

alan d.’s picture

alan d. commented

You can assign classes to the fields based on their id, either individually or as a group:

// this hooks into the document onload() event
$(document).ready(function() {
  // find the element by id and add the class
  $('#edit-profile-test').addClass('my-class-name');
  // find all of the input elements in the form with id 'edit-profile'
  $('#edit-profile input').addClass('my-class-name');
});

Supa easy

Alan Davison
www.caignwebs.com.au
Alan Davison
Jeffrey04’s picture

Jeffrey04 commented

the problem with this is I would have to do it manually whenever I have a new field that needs to call the javascript. It can be done with YUI as well

var some_element = YAHOO.util.Dom.get('edit-profile-test');
YAHOO.util.Dom.addClass(some_element, 'my-class-name');

maintenance will be a big problem here, imagine if you constantly have to add new fields or delete existing fields......

alan d.’s picture

alan d. commented

This can be partially automated by hooking into HOOK_form_alter. In the example below I have a profile category "Personal Info" and a single field "profile_test".

<?php
/**
* Implementation of hook_form().
*/
function climb_form_alter($form_id, &$form) {
  if ($form_id == 'user_edit' && isset($form['Personal Info'])) {
    $fields_to_modify = array('profile_test');
    // via jscript and directly via class FAPI attribute
    $js = '';
    foreach($fields_to_modify as $field) {
      $js_field_name = str_replace('_', '-', $field);
      $js .= "  YAHOO.util.Dom.addClass(YAHOO.util.Dom.get('edit-{$js_field_name}'), 'my-class-name');\n";
      $form['Personal Info'][$field]['#attributes'] = array('class' => 'my-class-name-via-fapi');
    }
    drupal_add_js($js, 'inline');
  }
}
?>

which produces this js in the header:

<script type="text/javascript">
  YAHOO.util.Dom.addClass(YAHOO.util.Dom.get('edit-profile-test'), 'my-class-name');

</script>

If you use a strict naming convention, then this can be checked to decide if the class(es) should be added.

Eg:

<?php
  foreach($form['Personal Info'] as $key => $elem) {
    // matches "prefix_key_XXXXXX"
    if (strpos($key, 'prefix_key_') !== FALSE) {
      $form['Personal Info'][$key]['#attributes']['class'] = 'my-class-name-via-fapi';
    }
  }
?>
Alan Davison
www.caignwebs.com.au
Alan Davison
Jeffrey04’s picture

Jeffrey04 commented

thanks