JQuery DateRangePicker 到 JSF 复合组件 AJAX

Question

我目前正在尝试在 Java Server Faces 2.2 中构建一个包含 JQuery 日期范围选择器 (http://www.daterangepicker.com/) 的复合组件。到目前为止它工作正常，但我试图向它添加 ajax 行为但无法使其正常工作。我基本上希望在调用 'Apply' 按钮时触发 ajax 事件。

到目前为止我有什么...

public class DateRange
{

    private LocalDate startDate = LocalDate.now();
    private LocalDate endDate = LocalDate.now();

    ...

}

日期范围转换器：

@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();
    }

}

复合组件：

<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>

以及显示它的 .xhtml 页面：

<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>

没有 AJAX 的版本工作正常，符合预期。我只是无法让 ajax 调用工作。模糊似乎是错误的事件，因为每当我 select 日期范围选择器中的一个选项时它就会被触发，因为实际输入失去了焦点。按下应用按钮时，日期范围选择器还会提供 javascript 回调。但是，我不知道如何从 javascript 函数触发任何 event/the ajax 请求。

感谢任何帮助。

Answer 1

如@BalusC 所述，解决方案是触发 DOM 更改事件。

因此，在我的复合组件中，我将脚本部分更改为

<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>

AJAX 事件现在按预期触发。

JQuery DateRangePicker 到 JSF 复合组件 AJAX

JQuery DateRangePicker to JSF Composite Component with AJAX

ajax

jquery

composite-component

jsf-2