Extra handler breaks Datepicker field

Question

Problem

I have a form which a user can create data with and some of the fields are date fields which use jQuery datepicker.

The form is long and in order to help the user out, I have a series of help messages which appear when the relevant form input is focused.

When a form element is given focus, the form's ID is grabbed and attached as a class to the help div, which reveals the correct help message.

Example: jsfiddle - caveat in a moment

This works in the jsfiddle, however in Drupal it breaks. On click the calender opens but rather than selecting a link it hits the local hyperlink "#" below it and changes the url to http://mywebsite.com/form/#

The problem appears to be related to how the Drupal date jQuery module deals with Datepicker. I've narrowed it down to something to do with $(this).attr('id'), it doesn't like the that selector but I'm unsure as to why.

Full Script

  Drupal.behaviors.jobhelpAddClass = {
    attach: function (context, settings) {

      var jobHelp = $('#jobhelp').children();

      $('input, select').focus(function() {
        $(jobHelp).attr('id', $(this).attr('id'));
      });
    }
  };

I've tried with document ready instead of Drupal behaviours and it still breaks. I've also tried getting focus to call a function (with the same code), however neither works.

Answer 1

Looks like the problem is with the CSS rather than the id part. The typical id would be something like this: edit-field-date-und-0-value-datepicker-popup-0 and this id is dynamically generated and not grandee that it would stay same (i.e. you may get edit-field-date-und-0-value-datepicker-popup-1 if you have the same field twice in the same form).

You can use name instead of id. Here is the working fork of your jsfiddle with name: http://jsfiddle.net/vijaycs85/C4sh9/