JQuery DateRangePicker to JSF Composite Component with AJAX

Question

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.

Answer 1

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.

JQuery DateRangePicker to JSF Composite Component with AJAX

Question

1 answers

solution1
1 ACCPTED 2015-08-28 09:46:52

JQuery DateRangePicker to JSF Composite Component with AJAX

Question

1 answers

solution1 1 ACCPTED 2015-08-28 09:46:52

solution1
1 ACCPTED 2015-08-28 09:46:52