Calendar onDateSelect not fired when changing date

UI Components for JSF
Post Reply
User avatar
doughnut
Posts: 27
Joined: 30 Sep 2014, 16:18

17 Oct 2014, 09:38

G'day all,

in my GUI I would like to include two Calendars for date-picking that shall fire a backing bean method once a date has been changed.
There is a showcase example for this under http://www.primefaces.org/showcase/ui/i ... ndar.xhtml
(calendar with id="event" and a <p:ajax...> tag).

I wanted to proceed as in the showcase example, so in the .xhtml

Code: Select all

<ui:define name="content">
    <h:form id="mainForm">
        <p:tabView id="mainTabview">
            <p:tab id="tab1" title="#{msg['tabview.title.tagesansicht']}">
                <div align="center">
                    <p:calendar id="startDatePicker"
                         value="#{bean.defaultStartDateForDayBasedView}" pattern="dd.MM.yyyy">                
                        <p:ajax event="dateSelect" listener="#{bean.onDateSelect}"/>
        </p:calendar>
....
....
and in the bean:

Code: Select all

public void onDateSelect(SelectEvent event) {
        FacesContext facesContext = FacesContext.getCurrentInstance();
        SimpleDateFormat format = new SimpleDateFormat("dd.MM.yyyy");
        facesContext.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Date Selected", format.format(event.getObject())));
    }
Problem is: method does not get fired (tested using breakpoints).
What is wrong here?
PrimeFaces v. 5.0
JSF: MyFaces impl. v. 2.2.2
Server WildFly v. 8.1.0
IntelliJ IDEA 13.1.3

kukeltje
Expert Member
Posts: 9605
Joined: 17 Jun 2010, 13:34
Location: Netherlands

17 Oct 2014, 10:02

doughnut wrote:What is wrong here?
Well, initially there is, and I do not want to sound rude, a lot you could/should have done before posting
- Check if there actually IS an ajax request send from the browser to the server
- Check for any errors in the server log
- Post full but minimal code. What you describe as your 'bean' is in fact just one method from the bean. Imports (is SelectEvent a jsf/primefaces one or AWT/Swing, scope etc are all missing but VERY important and a lot of mistakes are made in those. So remove all non relevant code (for this part of the functionality) from the bean and post that. You also post parts of the xhtml (you could e.g. have nested forms without us nowing)

If you don't do those things, we have to start asking al those things and many don't like that. But since I'm in a good mood today, You have some questions to answer, things to look for and next time do these up front.

Cheers

LemmyCaution
Posts: 7
Joined: 13 Sep 2013, 21:47

17 Oct 2014, 10:07

You may take a look at the JavaScript console of Developer Tools/ Firebug or some such of your browser.
Some times you get valuable hints.
Maybe you have a form in a form.
Hmm. Take a look at the event="dateSelect" thing mentioned in this thread.
http://stackoverflow.com/questions/1694 ... naged-bean

User avatar
doughnut
Posts: 27
Joined: 30 Sep 2014, 16:18

17 Oct 2014, 10:37

OK then, let's put some cards on the table, hoping it will be useful:

The bean's relevant part (imports appear correct to me - and scope is not explicitly specified, as in the showcase example):

Code: Select all

package pkg;

import com.lowagie.text.Element;

import org.primefaces.event.SelectEvent;
import org.primefaces.model.chart.Axis;
import org.primefaces.model.chart.AxisType;
import org.primefaces.model.chart.ChartSeries;
import org.primefaces.model.chart.DateAxis;
import org.primefaces.model.chart.LineChartModel;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import javax.annotation.PostConstruct;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;

import javax.faces.context.FacesContext;
import javax.inject.Inject;
import java.io.Serializable;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.LinkedHashMap;
import java.util.List;
import java.util.Map;

@ManagedBean
public class Bean implements Serializable {

// business logic ....
// getters - setters ....

    public void onDateSelect(SelectEvent event) {
        // below code is from showcase - just for testing if method is called. Could be anything else.
        FacesContext facesContext = FacesContext.getCurrentInstance();
        SimpleDateFormat format = new SimpleDateFormat("dd.MM.yyyy");
        facesContext.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Date Selected", format.format(event.getObject())));
    }

}
and the .xhtml:

Code: Select all

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://java.sun.com/jsf/core"
                template="/templates/template.xhtml">
<ui:define name="metadata">
</ui:define>
<ui:define name="content">
    <h:form id="mainForm">
        <p:tabView id="mainTabview">
            <p:tab id="tab1" title="#{msg['tabview.title.tagesansicht']}">
                <div align="center">
                    <p:calendar id="startDatePicker"
                            value="#{bean.defaultStartDateForDayBasedView}" pattern="dd.MM.yyyy">                
                        <p:ajax event="dateSelect" listener="#{bean.onDateSelect}"/>
                    </p:calendar>               
                </div>
....
....
.... closing tags and further code

In the WildFly console, no errors are shown (in fact, nothing is written to it following a date picking).
How do I find out if there actually is an ajax request to the server?
PrimeFaces v. 5.0
JSF: MyFaces impl. v. 2.2.2
Server WildFly v. 8.1.0
IntelliJ IDEA 13.1.3

Mathieu-Castets
Posts: 45
Joined: 03 Jul 2014, 19:04
Location: Biarritz, France

17 Oct 2014, 11:14

How do I find out if there actually is an ajax request to the server?
Use your web browser's console (hit F12) and go to the network tab to watch any request
PrimeFaces 5.3 - PF Extensions 4.0.0 - OmniFaces 2.2 - Mojara 2.2.12 - GlassFish 4.1.1 - Java 7 - Netbeans 8.1

User avatar
doughnut
Posts: 27
Joined: 30 Sep 2014, 16:18

17 Oct 2014, 13:29

Indeed nothing is output in the network tab when a date is selected in the Calendar; so apparently no request is sent to the server.
(that is, when I first select a date, a "ReferenceError: statusDialog is not defined" appears. Subsequent selections do not display any message.)

The statusDialog is a widgetVar in my template.xhtml which reads:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">

<f:view contentType="text/html" id="fview">

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Primefaces Layout and Charts</title>
    <ui:debug/>
    <f:metadata>
        <ui:insert name="metadata"/>
    </f:metadata>

    <h:head>
        <p:ajaxStatus onstart="statusDialog.show();" onsuccess="statusDialog.hide();"/>
    </h:head>
    <h:body onload="statusDialog.hide();">
        <p:layout fullPage="true" resizeTitle="resize" style="background-color:#FFFFFF;">

            <p:layoutUnit position="north" size="60" id="north" style="overflow:hidden">
                <ui:include src="header.xhtml"/>
            </p:layoutUnit>

            <p:layoutUnit position="west" id="west" resizable="false" header="#{msg['menu.title']}"
                          style="height:580px;overflow:hidden;" size="225">
                <ui:include src="menu.xhtml"/>
            </p:layoutUnit>

            <p:layoutUnit styleClass="layoutUnitCenter" position="center">
                <p:messages autoUpdate="true" id="msgs" showDetail="true" showSummary="true"/>
                <ui:insert name="content"/>
            </p:layoutUnit>
        </p:layout>

        <p:dialog modal="true" widgetVar="statusDialog" showHeader="false"
                  draggable="false" closable="false" resizable="false"
                  visible="false" position="center" maximizable="false" minimizable="false">
            <p:graphicImage value="#{resource['images/ajax-loader.gif']}"/>
        </p:dialog>
        <p:dialog widgetVar="dlg" showEffect="fade" header="Export Chart as an Image" resizable="false" modal="true">
            <p:outputPanel id="output" layout="block"/>
        </p:dialog>
    </h:body>
</f:view>
</html>
PrimeFaces v. 5.0
JSF: MyFaces impl. v. 2.2.2
Server WildFly v. 8.1.0
IntelliJ IDEA 13.1.3

User avatar
doughnut
Posts: 27
Joined: 30 Sep 2014, 16:18

17 Oct 2014, 14:29

*breaking*

So I was investigating into what causes the "ReferenceError: statusDialog is not defined" error and found this:

http://stackoverflow.com/questions/2175 ... ot-defined
Primefaces from 4 to 5 changed the way to access widget components:
Widgets must be referenced via "PF". e.g. PF('widgetVarName').show() instead of widgetVarName.show();
I updated the template.xhtml code accordingly. Thereafter, the error did not show anymore, and now the bean onDateSelect method is entered when I select a date!
(also, there is now a GET and POST output in the browser console/ network tab.

So thanks all for the valuable hints so far!
PrimeFaces v. 5.0
JSF: MyFaces impl. v. 2.2.2
Server WildFly v. 8.1.0
IntelliJ IDEA 13.1.3

Mathieu-Castets
Posts: 45
Joined: 03 Jul 2014, 19:04
Location: Biarritz, France

17 Oct 2014, 14:32

From PrimeFaces 5.0, any call to a widgetVar must be made thanks to the PF('') identifier.

That means you should replace all your statusDialog.hide(), statusDialog.show() by

Code: Select all

PF('statusDialog').show()
PF('statusDialog').hide()
References:
https://code.google.com/p/primefaces/wi ... ationGuide
Widgets must be referenced via "PF". e.g. PF('widgetVarName').show() instead of widgetVarName.show();
http://stackoverflow.com/questions/2351 ... imefaces-5

Edit: Glad you figured it out by yourself :)
PrimeFaces 5.3 - PF Extensions 4.0.0 - OmniFaces 2.2 - Mojara 2.2.12 - GlassFish 4.1.1 - Java 7 - Netbeans 8.1

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 24 guests