admin管理员组

文章数量:1279176

I am trying to have two Javascript functions that are being called as soon as a user selects a date from a p:calendar.

Unfortunately, the onchange event is only being processed if the user types a date manually in the text field and tabs forward. The onselect event is not being fired at all.

The xhtml is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".dtd">
<html xmlns=""
    xmlns:h=""
    xmlns:f=""
    xmlns:ui=""
    xmlns:p="">
<h:head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <h:outputScript library="js" name="custom.js" target="body" />
</h:head>
<h:body>
    <p:log />
    <h:form id="someForm">
        <p:panelGrid columns="2">
            <p:outputLabel for="myCalendar" value="Date: " />
            <p:calendar id="myCalendar" onchange="alertDateSelected()" onselect="alertSelectEvent()" showOn="button" />
        </p:panelGrid>
    </h:form>
</h:body>
</html>

The Javascript code for the onselect and onchange events:

function alertDateSelected() {
    PrimeFaces.info('Selected date from p:calendar');
}

function alertSelectEvent() {
    PrimeFaces.info('Clicked p:calendar date selection button');
}

Is there a possibility to hook to the onchange/onselect event on p:calendar; e.g. if the user selects a date from the calendar panel or via the "Today" button? If so, what am I doing incorrectly?

I am trying to have two Javascript functions that are being called as soon as a user selects a date from a p:calendar.

Unfortunately, the onchange event is only being processed if the user types a date manually in the text field and tabs forward. The onselect event is not being fired at all.

The xhtml is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/1999/xhtml"
    xmlns:h="http://java.sun./jsf/html"
    xmlns:f="http://java.sun./jsf/core"
    xmlns:ui="http://java.sun./jsf/facelets"
    xmlns:p="http://primefaces/ui">
<h:head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <h:outputScript library="js" name="custom.js" target="body" />
</h:head>
<h:body>
    <p:log />
    <h:form id="someForm">
        <p:panelGrid columns="2">
            <p:outputLabel for="myCalendar" value="Date: " />
            <p:calendar id="myCalendar" onchange="alertDateSelected()" onselect="alertSelectEvent()" showOn="button" />
        </p:panelGrid>
    </h:form>
</h:body>
</html>

The Javascript code for the onselect and onchange events:

function alertDateSelected() {
    PrimeFaces.info('Selected date from p:calendar');
}

function alertSelectEvent() {
    PrimeFaces.info('Clicked p:calendar date selection button');
}

Is there a possibility to hook to the onchange/onselect event on p:calendar; e.g. if the user selects a date from the calendar panel or via the "Today" button? If so, what am I doing incorrectly?

  • javascript
  • primefaces
Share Improve this question asked Feb 16, 2015 at 15:04 fatdevelopsfatdevelops 4352 gold badges6 silver badges18 bronze badges 2
  • Are you sure your javascript is in the proper location and hence being properly loaded? You should be looking in your javascript console for clues – kolossus Commented Feb 17, 2015 at 21:41
  • @kolossus Yes, I am sure. If you add <p:inputText id="myInput" onchange="alertDateSelected()"/>, the onchange event gets fired and you can see the expected output in the PrimeFaces log. After adding a breakpoint to the function, the reported behaviour is confirmed: script stops if you deal with a p:inputText but does not stop if you deal with a p:calendar. Please let me know how to get clues from the console if the event does not get fired. Where am I to look for hints on that? – fatdevelops Commented Feb 18, 2015 at 7:32
Add a ment  | 

4 Answers 4

Reset to default 3

Try it with ajax event lister. For example something like that:

        <p:calendar id="myCalendar">
            <p:ajax event="dateSelect" listener="alertDateSelected" global="false" />
        </p:calendar>

As of today, it's still not working in PrimeFaces 6.0.

The following approach uses the AJAX event instead. It calls the JavaScript method (PF('ordersTable').filter() in this case) when it starts and cancels it instantly via return false. This way it only executes the JavaScript code, but does not really send the AJAX request.

<p:calendar onchange="PF('ordersTable').filter()" onselect="PF('ordersTable').filter()">
    <!-- The JS onchange and onselect events don't work. We "misuse" an AJAX event instead. -->
    <p:ajax event="dateSelect" onstart="PF('ordersTable').filter();return false;" global="false" />
</p:calendar>

Use onSelect instead of onChanged.

<p:ajax event="dateSelect" onplete="clickButton('searchFormRegUser:searchButton')" />

The problem was that I kept onchange event defined inside p:calendar and also this one (it remained because I was trying out a few things and forgot to delete another one). When I deleted onchange from p:calendar, this worked. I know this is old, but maybe someone else has a similar problem, so I'm posting.

本文标签： javascriptpcalendar onselectonchange not firedStack Overflow

版权声明：本文标题：javascript - p:calendar onselectonchange not fired - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741255685a2366630.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。