views:

709

answers:

1

I've got two date pickers in one form. They have different id's so this shouldn't be related to similar errors such as this one. http://stackoverflow.com/questions/1836697/jquery-apply-selector-to-every-field-in-a-dynamic-form

The error I'm getting in firebug is 'uncaught exception: Missing instance data for this datepicker'

Which is triggered when I select a day from the '#copyTo' datepicker which is the second datepicker on the form. The first datepicker works perfectly.

The form I have is

<form name="copy" action="copyEvents.php" method="post">
<input type="hidden" id="copyFromHid" name="copyFromHid"/>
<input type="hidden" id="copyToHid" name="copyToHid"/>
Copy From <input id="copyFrom" name="copyFrom"/>
Copy To <input type="text" id="copyTo" name="copyTo"/>
<input type="hidden" name="gid" id="gid"/>
<input type="submit" value="copy"/>
</form>

The jquery is

jQuery('input#copyFrom','div#copyFromHistory form').datepicker({ 
                                            altField: 'input#copyFromHid',
                                            altFormat: 'yy-mm-d',
                                            dateFormat: 'd MM yy', 
                                            firstDay: 1,
                                            beforeShowDay: function(date) { 
                                            return (date.getDay() == 1) ? [true, ""] : [false, ""]; }
                                            });
   jQuery('input#copyTo','div#copyFromHistory form').datepicker({ 
                                            altField: 'input#copyToHid',
                                            altFormat: 'yy-mm-d',
                                            dateFormat: 'd MM yy', 
                                            firstDay: 1,
                                            beforeShowDay: function(date) { 
                                            return (date.getDay() == 1) ? [true, ""] : [false, ""]; }
                                            });

Any suggestions as to why the first field would work, but not the second?

+1  A: 

Two things come to mind:

One is in your jQuery selectors:

jQuery('input#copyFrom','div#copyFromHistory form')
jQuery('input#copyTo','div#copyFromHistory form')

In both cases you pass the context/ownerDocument parameter to jQuery() but that is looking for DOM element or document... not a string.

And the second thing is:

Copy From <input id="copyFrom" name="copyFrom"/>
Copy To <input type="text" id="copyTo" name="copyTo"/>

Copy To has type="test" and Copy From does not (though the default input type is text... so probably not that)

I suspect you really want:

jQuery('input#copyFrom').datepicker(....)
jQuery('input#copyTo').datepicker(....)
Jonathan Fingland
Thanks Jonathan, unfortunately, that didn't solve the issue. However, you brought up something interesting with your comment about context/ownerDocument. I was under the impression that this was a more efficient method for jQuery to find elements in the dom, by passing the containing element, and then the element being searched for. Is that not correct?
pedalpete
@pedalpete: The context parameter works as you describe... but expects a DOM element, not a string. For example: `jQuery('input#copyFrom', document.forms[0])` which would look for the copyFrom input in the first form element. When your selector is using the id (e.g. #copyFrom or #copyTo) then it isn't necessary to use the context. That selector is equivalent to `document.getElementById('copyFrom')`. Also note: (Quote) "Internally, selector context is implemented with the .find() method, so $('span', this) is equivalent to $(this).find('span')." ( http://api.jquery.com/jQuery/#jQuery1 )
Jonathan Fingland