Very strange issue when colorbox on page with jquery datepicker [#1227406]

Hi,

I came through on this somewhat by accident over the development of our website. We use the Drupal jQuery Datepicker library (part of Drupal core) and found that doing the following:
click on an image
navigate through the Colorbox
month in Datepicker has moved

caused the Datepicker month to move over by a consistent increment. I am attaching the images as to what happens before colorbox and after colorbox. It seems like it adds a bunch of empty divs though I am unsure on where/how that might be coming in.

Comment	File	Size	Author
	After colorbox (opening an image or going back/forth), the alignment for month changes.	16.2 KB	BTMash
	Before the colorbox, the alignment for the month by datepicker is fine.	16.25 KB	BTMash

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

BTMash CreditAttribution: BTMash commented 23 July 2011 at 08:17

Title:

Very strange issue with jquery datepicker

» Very strange issue when colorbox on page with jquery datepicker

Changing the title to be a bit more specific and not imply the issue might just be with datepicker.

Comment #2

BTMash CreditAttribution: BTMash commented 23 July 2011 at 23:20

I was able to work around this with the following code in a js file:

  // This needs to get bound due to strange behavior between colorbox and datepicker if the datepicker is going to show up on a page.
  $(document).bind('cbox_complete', function() {
    $('.ui-datepicker-title').children().each(function() {
      if ($(this).html() == '') {
        $(this).remove();
      }
    })
  });

Comment #3

frjo CreditAttribution: frjo commented 24 July 2011 at 11:06

Are you in some way displaying the datepicker inside an Colorbox?

Do you have a link to an example page with this problem?

Comment #4

BTMash CreditAttribution: BTMash commented 24 July 2011 at 20:01

The datepicker isn't inside a colorbox. The colorbox is on a page that has the datepicker

I'd actually applied the fix on my website but I'll try and find a way to show the behavior (the corrected behavior is at http://redcat.dev.calarts.edu/event/state-independence). Basically, what is happening is that a bunch of empty divs get added each time one of the cbox-load / cbox-complete action occurs.

Comment #5

BTMash CreditAttribution: BTMash commented 27 July 2011 at 20:08

Ok, I've reverted the code on my site; you can see it in action without the fix at http://amodi.calarts.edu/d7.redcat.org/exhibition/jesse-jones. The colorbox images are at the bottom; clicking on them or hitting left/right should trigger the datepicker issue (the datepicker is in the top right area of the web page)

Comment #6

frjo CreditAttribution: frjo commented 27 July 2011 at 23:35

When I tested it now in Safari and Firefox I could not see the problem. Did you put the fix back again maybe?

Comment #7

BTMash CreditAttribution: BTMash commented 28 July 2011 at 00:02

Gah, you're right. Removed the fix from the site.

Comment #8

frjo CreditAttribution: frjo commented 29 July 2011 at 06:16

Category:	support	» bug
Status:	Closed (works as designed)	» Active

I think the problem lies in your "redcat_customizations.js" script line 33. The "redcat_customizations_update_month" function will run every time Drupal loads the behaviors.

The colorbox.js script attach all behaviors to the colorbox after it is complete. This is so ajax functions etc. will work inside a colorbox just as they do on a normal Drupal page.

Here are the documentation for JavaScript behaviors in Drupal http://drupal.org/node/171213#behaviors. I think using the built in jQuery Once plugin to make sure the code is run only once will fix your problem.

Comment #8.0

frjo CreditAttribution: frjo commented 29 July 2011 at 06:16

Issue summary:

View changes

Changing to be more specific.

Comment #9

BTMash CreditAttribution: BTMash commented 28 July 2011 at 15:32

Category:	bug	» support
Status:	Active	» Closed (works as designed)

Hmm, you are right! I am still not sure on why the calendar date did not change itself back and recreate the datepicker each time but that was indeed the fix. I used the jquery.once functionality, placed it on the block and things now seem to work. Thank you :)