I am currently trying to build a composite component in Java Server Faces 2.2 wrapping the JQuery date range picker (http://www.daterangepicker.com/). It is working fine so far, but I am trying to add ajax behaviour to it and cannot get it to work properly. I basically want the ajax event to be triggered, whenever the 'Apply' button is called.
What I have so far...
public class DateRange
{
private LocalDate startDate = LocalDate.now();
private LocalDate endDate = LocalDate.now();
...
}
The DateRangeConverter:
@Named
@ApplicationScoped
public class DateRangeConverter implements Converter, Serializable
{
private static final long serialVersionUID = 1L;
@Override
public Object getAsObject(FacesContext context, UIComponent component, String value)
{
if (value == null || value.isEmpty())
return null;
DateTimeFormatter formatter = DateTimeFormatter.ofPattern("MM/dd/yyyy");
DateRange dateRange = new DateRange(LocalDate.parse(value.split("-")[0].trim(), formatter), LocalDate.parse(value.split("-")[1].trim(), formatter));
return dateRange;
}
@Override
public String getAsString(FacesContext context, UIComponent component, Object value)
{
return value.toString();
}
}
The composite component:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:cc="http://java.sun.com/jsf/composite">
<cc:interface>
<cc:attribute name="value" required="true" />
<cc:attribute name="styleClass" default="form-control" />
<cc:attribute name="applyLabel" default="Apply" type="java.lang.String" />
<cc:attribute name="cancelLabel" default="Cancel"
type="java.lang.String" />
<cc:attribute name="pattern" default="MM/dd/yyyy"
type="java.lang.String" />
<cc:clientBehavior name="rangeSelected" event="change"
targets="rangepicker" />
</cc:interface>
<cc:implementation>
<h:inputText value="#{cc.attrs.value}"
styleClass="#{cc.attrs.styleClass} dateRangePicker" id="rangepicker"
converter="#{dateRangeConverter}" onkeydown="return false;">
</h:inputText>
<h:outputScript library="js" name="moment.min.js" target="body" />
<h:outputScript library="js" name="daterangepicker.js" target="body" />
<script type="text/javascript">
jQuery(document).ready(function() {
var id = '#{cc.clientId}';
$(document.getElementById('#{cc.clientId}:rangepicker')).daterangepicker({
locale: {
applyLabel: '#{cc.attrs.applyLabel}',
cancelLabel: '#{cc.attrs.cancelLabel}',
format: '{cc.attrs.pattern}'
}
})
});
</script>
</cc:implementation>
</html>
And the .xhtml page displaying it:
<h:form id="frmDRPickerNoAjax">
<cc:dateRangePicker id="ccDateRange"
value="#{helloWorldBean.dateRange}" applyLabel="Apply">
</cc:dateRangePicker>
<h:commandButton styleClass="btn btn-primary" value="Gogogoo">
<f:ajax render="@form" execute="@form" />
</h:commandButton>
</h:form>
<h:form id="frmDRPickerAjax">
<cc:dateRangePicker id="ccDateRange"
value="#{helloWorldBean.dateRangeAjax}">
<f:ajax event="rangeSelected" render="@form" />
</cc:dateRangePicker>
<h:outputText
value="#{helloWorldBean.getDateRangeAsString(helloWorldBean.dateRangeAjax)}"
escape="false" />
</h:form>
The version without AJAX is working just fine and as expected. I just cannot get the ajax call to work. Blur seems to be the wrong event, because it is being triggered whenever I select an option in the date range picker since the actual input loses it's focus. The date range picker also provides a javascript callback when the apply button is pressed. However, I have no idea how to trigger any event/the ajax request from that javascript function.
Any help is appreciated.
As stated by @BalusC, the solution was to trigger the DOM change event.
So, in my composite component I changed the script part to
<script type="text/javascript">
jQuery(document).ready(function() {
var id = '#{cc.clientId}';
$(document.getElementById('#{cc.clientId}:rangepicker')).daterangepicker({
locale: {
applyLabel: '#{cc.attrs.applyLabel}',
cancelLabel: '#{cc.attrs.cancelLabel}',
format: '{cc.attrs.pattern}'
}
},
function(start, end, label) {
$(document.getElementById('#{cc.clientId}:rangepicker')).trigger('change');
})
});
</script>
The AJAX event gets triggered now as expected.