Problems integrating jquery UI datepicker in ajax application

Question

Hello there,

I am working on a ajax based application and try to add the jquery datepicker (and its timepicker extension) to a few forms. They provide just the functionality I need. The basic problem I have now is to deal in an environment where the DOM is not complete or better triggered within the application (clicking the edit button or add button) to generate a form. So integrating the datepicker is no easy task (or?). I can not use the document ready function, because by the time onload is finished already, the forms containing the datepicker elements are not present after onload. So I thought I wrap the datepicker call into a function on trigger it via onclick, like this:

var dp=function(divname, btimeonly) {
    // --- if timeonly, use the datetimepicker ui extension otherwise the ui datepicker
    var tonly = (btimeonly) ? true : false;
    if (tonly) {
        return $('#' + divname).datetimepicker({
            timeFormat: 'hh:mm',
            timeOnly: true
        });
    } else {
        $.datepicker.setDefaults($.datepicker.regional['']);
        $('#' + divname).datepicker($.datepicker.regional['de']);
        return $('#' + divname).datepicker({ });
    }
};

the input field looks like this

<input type="text" id="newsdate" name="newsdate" maxlength="10" value="' . $data['newsdate'] . '" style="width:200px" onclick="dp(\'newsdate\', false);">

So the basic problem here, I need to click 2 times on the input field (or tab into that input field to activate the datepicker. I suspect because the event is not registered the first time.

I am stuck now, is there any way to trigger the datepicker with one click even in my ajax environment. The

showOn: 'button',
buttonImage: 'images/icon-calendar.gif',
buttonImageOnly: true,

is not possible to, of course not in the way I call the datepicker.

Can I load the picker in a different way and where should I do that? Or is it just wasted time using jquery in a ajax generated environment and I should use native javascript functions? I do not hope the last, because I like jquery and its functionality very much.Been using it so many times in another applications. So loading, the selectors and element id's (and their validity) in my ajax generated environment is the problem I would like to solve.

Any hints are very appreciated. I tried to read similar problems here on stackoverflow, but seem not to find a solution.

Thanks! Andreas

Answer 1

Well, after some more diggin' I found a solution myself that I can use. I am working with the php/xajax class, there is a method addScript() of the response object that allows to execute javascript. I can now wrap all jquery related code into a javascript function and the function gets executed once the response object gets executed.

So in php ...

...
$responseObj->addScript("finit()");
...

and the javascript function simply as ...

function finit() {
    $('#newsdate').click(function() {
        $(this).datepicker( {} )
    });
};

That does the trick. Just in case somebody gets stuck at the same point.

But anyway, would be intereastuing if there are other ways. So do not heditate to show it.