Datepicker won't function inside colorbox

Here the scenario:

I want to apply a datepicker on a input field in a form.

When clicking a link a colorbox will open containing the form.

Somehow the datepicker doesn't work, so I searched the internet.

I was 开发者_C百科confused by this post datepicker inside a thickbox where the following statement was made: JavaScript/jQuery is not working inside of ColorBox.

It confused me because other people seem to have worked it out.

I'll show the code of the colorbox call:

        <script type="text/javascript">
        $(document).ready(function() {
                $(".customer").colorbox(
                {
                  transition:'fade',
                    width:'750',
                    speed:'500',
                    height:'400',
                    iframe:true
                });
        });
        </script>

The colorbox opens successfully although my error console says there is a } missing after the first }); occurrence.

The code for the datepicker:

<script type="text/javascript">$(document).ready(function() {
    $('.datepick').datepicker({
    changeYear:true,
    yearRange:'c-65:c+0',
    changeMonth:true
    });
    $('.datepick').datepicker($.datepicker.regional['nl']);});</script>

This code does work somewhere else on my website where it is not located in a colorbox.

What I have tried:

1. I tried to give the class datepick a z-index of 10000 or higher since colorbox has a z-index of 9999 by default.
2. I tried the oncomplete function() on the colorbox, but couldn't get the colorbox work when applied.
3. I tried setting iframe to false in combination with the previous two options.

My question(s):

1. Is it possible to have a datepicker working inside a colorbox?
2. Is my code about the colorbox correct?
3. How to fix it?!

UPDATE

Solution: I made a stupid mistake :P...

Yet I found the answers on my first question, which may be of some value.

1. Yes it is possible to have a datepicker working inside a colorbox without using the onComplete:function().

Does your loaded iframe contain the datepicker instantiation code?

My assumption is this:

• you have an anchor with a class="customer"
• this anchor has an href, which points the the page you want to show in the colorbox
• this page loads in an iframe (due to iframe:true)
• and this page doesn't have your datepicker instantiation code

The easiest thing to do is to move the datepicker code to the onready function of the customer page.

As noted in ColorBox documentation:

This is often due to trying to access an element before it has been loaded into the document and can be resolved by moving the JavaScript into ColorBox's onComplete callback.

Example (using jQuery Forms plugin):

$('#login_window').colorbox({
    ...
    onComplete:function(){
        $('form#login').ajaxForm();
}});

You can adapt the example to load the datepicker.

I got the same issue. I used an id as selector, but colorbox duplicate the whole html content and the id's too. So if I use $('#myid').doSomething() I got an error, because "myid" was duplicated. Thats the issus.

Use a better selector like $('#colorbox .myidasclass').doSomething() to solve the issue. The same problem is with class selector without the '#colorbox' as additional selector.