jQuery datepicker popup twice

I am using IE7 (have to), Java Server Faces 1.2, latest version of jQuery datepicker for dynamically generated data rows situtation. Also need support user manully enter dates. Datepicker works fine if not manully enter dates. The strange behave is when user type dates manully, then you move mouse to any part of the window, click, the orignal calendar closes (good), but then it pops out again (bad). Seems the focus() thing play some kind role for this, since if I write a simple datepicker without the last focuse, things are fine, but in order for handle dynamically AJAX generated rows, I have to using that focus().

If I manully type dates, then push Enter key, things are fine. Also, Firefox works fine but we required to support IE7.

The code as below (you can ignore backbean related stuff). Any help is greatly appreciated.

<script type="text/javascript">
var jq = jQuery.noConflict();
jq(document).ready(function() {
    jq("[id$=fmv]").live('click', function() {
        jq(this).datepicker( {
            showOn : 'focus',
            duration : 10,
            changeMonth : true,
            changeYear : true,
            dateFormat : 'mm/dd/yy',
            yearRange : '-1:+1',
            showButtonPanel : true,
            closeText : 'Close',
            showWeek : true,
        }).focus();
    });
});
</script>

Input:

    <h:inputText id="fmv"
                     size="10"
                     maxlength="10"
                     style="background-image:url      ('../../../jquery/images/calendar1.png');
                       background-repeat:no-repeat;background-position:right;"
                       title="#{msgs['choose.date.lbl']}"
                       value="#{pItem.dateOfStudy}"
                       validator="#{pItem.validate}"
                       onkeyup="submit();"
                       onchange="submit();"
                       name="fmv"         
                       valueChangeListener="#{pItem.dateChangeListener}"> 
                <f:convertDateTime pattern="MM/dd/yyyy" timeZone="America/New_York" dateStyle="short" type="date"/>
            </ice:inputText>

I tried to make a very simple xhtml see blow. The generated html file is big due to our project includes. Then I just cut the jquery script and inputtext html part and put it into a html file, the problem can not be recreated. Odd. xhtml file:

     <ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jstl/core"
xmlns:fn="http://java.sun.com/jsp/jstl/functions">

<script type="text/javascript">
var jq = jQuery.noConflict();
jq(document).ready(function() {
    jq("[id$=fmv]").live('click', function() {
        jq(this).datepicker( {
            showOn : 'focus',
            duration : 10,
            changeMonth : true,
            changeYear : true,
            dateFormat : 'mm/dd/yy',
            yearRange : '-1:+1',
            showButtonPanel : true,
            closeText : 'Close',
            showWeek : true
        }).focus();
    });
});
</script>



<h:inputText id="fmv" size="10" maxlength="10"
    style="background-image:url('../../../jquery/i开发者_如何学JAVAmages/calendar1.png');
                       background-repeat:no-repeat;background-position:right;"
    title="#{msgs['choose.date.lbl']}" value="#{pItem.dateOfStudy}"
    validator="#{pItem.validate}" partialSubmit="true" onkeyup="submit();"
    onchange="submit();" name="fmv"
    valueChangeListener="#{pItem.dateChangeListener}">
    <f:convertDateTime pattern="MM/dd/yyyy" timeZone="America/New_York"
        dateStyle="short" type="date" />
</h:inputText>

     </ui:composition>

Skip the on click just leave it on focus. This means when the input is focused.

<script type="text/javascript">
    var jq = jQuery.noConflict();
    jq(document).ready(function() {
        jq("[id$=fmv]").datepicker({
            showOn : 'focus',
            duration : 10,
            changeMonth : true,
            changeYear : true,
            dateFormat : 'mm/dd/yy',
            yearRange : '-1:+1',
            showButtonPanel : true,
            closeText : 'Close',
            showWeek : true
        });
    });
</script>

Example with separate function:

function addCalendar(obj)
{
    var jq = jQuery.noConflict();
    jq(document).ready(function() {
        jq(obj).datepicker({
            showOn : 'focus',
            duration : 10,
            changeMonth : true,
            changeYear : true,
            dateFormat : 'mm/dd/yy',
            yearRange : '-1:+1',
            showButtonPanel : true,
            closeText : 'Close',
            showWeek : true
        });
    });
}

I think this will help you.