jQuery datepicker not opening up on focus

Question

Heres my scenario: I have an index page with 2 radio buttons on it and a span area for results. When one of the radio buttons are clicked, the span fills up with an ajax generated page that has an input box as so :

<input size='25' class='datepicker' value='Click to enter deposit date' READONLY type='text'    id='depositDate' name='depositDate'>

At the bottom of this page there is an 'Add Record' button which fires off javascript validation. The validation is so:

var inpDepDate  = $.trim($("#depositDate").val());
if(inpPayDate=='Click to enter pay date') // Validate pay date
{
    alert('Invalid pay date; re-enter');

    document.getElementById('payDate').focus();
    document.getElementById('payDate').select();

    return false;
}

Also in my javascript file is :

$(function(){
    $( "#depositDate" ).live('focus', function() {
        $(this).datepicker({
            changeMonth: true,
            changeYear: true,
            minDate: "+1D",
            showOtherMonths: true,
            selectOtherMonths: true}).focus();
    });
});

The problem is when the validation fails, the text does get highlighted and selected but it does not open automatically.

Ive tried a number of things, actually a ton of things from this site, and no luck. And it seems to never recognize the live event. But if I click on the text box after its failed the validation (and the text is highlighted), the calendar opens just fine. Im fairly new at jQuery and ui.

score 1 · Answer 1 · answered Apr 18 '13 at 17:48

1

You don't need to reinstantiate the datepicker if you've already called it on #depositDate in the past. (Or on payDate)

Try this:

if(inpPayDate=='Click to enter pay date') // Validate pay date
{
    alert('Invalid pay date; re-enter');

    $("#payDate").datepicker("show");
    return false;
}

answered Apr 18 '13 at 17:48

Colin DeClue

2,194
3
26
47

I tried adding the "show" line but now I get an error on the jquery file "settings" is null or not an object. – Juan Apr 18 '13 at 18:39
I think the problem is its losing it between the ajax call and the failing of validation when it tries to re-show it. – Juan Apr 18 '13 at 18:41
Have you not yet called .datepicker on the payDate or whatever? Before the validation, if you click it, do you get a datepicker? – Colin DeClue Apr 18 '13 at 18:44
Yes they work fine until the validation fails and I try to put focus back on it and open up automatically. At that point the text is highlighted but the calendar doesn't open. It does if I click on it because of the live click code. – Juan Apr 18 '13 at 19:03
Ill be damned....What I did was, because the live.click function was working, in my validation I put $("#depositDate").click(); and it works. I know this is just a bandaid and Id certainly like to figure this out still. – Juan Apr 18 '13 at 19:16
When do you call `.datepicker()` on the elements? If you're doing it inside of a .click, that's not right. You call `.datepicker` once, and it lives on the element. Pleas see [here](http://jqueryui.com/datepicker/) – Colin DeClue Apr 18 '13 at 19:19
I dont ever call .datepicker. I think because of the line class="datepicker" on the text box, thats what does it cause soon as the page loads I click in the text box and the calendar opens up. – Juan Apr 18 '13 at 19:31
What does your live.click function look like? Is that calling .datepicker? – Colin DeClue Apr 18 '13 at 19:36
I show it up above (from my javascript file). It actually has "click" where focus is. – Juan Apr 18 '13 at 19:40
Okay, please look at the link I provided on how to properly use datepicker. You should call it just once on domready, and then not have to call it again or attach to any click events or anything. – Colin DeClue Apr 18 '13 at 19:41
Ok I set it up the same as in the code on the link you posted (on my ajax page). In my validation when it fails, how does the calendar get told to open back up? – Juan Apr 18 '13 at 20:00
Oh I mis-spoke. I do call .datepicker for each field (depositDate and payDate) in my javascript file which is included in the index page... – Juan Apr 18 '13 at 20:27

jQuery datepicker not opening up on focus

1 Answers1