通过 jQuery 函数设置 managedBean 属性

Question

我正在开发一个项目，我将 JQuery 插件 FullCalendar 与 JSF 应用程序集成在一起。我想在 JQuery eventClick 函数中为 ManagedBean 设置 calEvent.start 值：function (calEvent, jsEvent view)。但是，jQuery 函数中传递的值被 ManagedBean 接收为空，因为我在 GlassFish 日志上打印了相同的值。怎么了？这是模板页面代码：

<?xml version='1.0' encoding='UTF-8' ?> 
<!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://xmlns.jcp.org/jsf/facelets"
  xmlns:h="http://xmlns.jcp.org/jsf/html">

    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <h:outputStylesheet name="./css/default.css"/>
        <h:outputStylesheet name="./css/cssLayout.css"/>
        <h:outputScript  name="jquery.min.js" library="js"/> 
        <h:outputScript  name="moment.min.js" library="js"/>
        <h:outputScript  name="fullcalendar.min.js" library="js"/> 
        <h:outputScript  name="lang-all.js" library="js"/> 
        <h:outputScript name="fullcalendar.print.css" library="css"/>
        <h:outputScript name="fullcalendar.css" library="css"/>


        <h:outputStylesheet name="fullcalendar.css" library="css"  /> 
        <script type="text/javascript">
            var myvalue = null;

            $(document).ready(function () {

                $('#calendar').fullCalendar({
                    header: {
                        left: 'prev,next today',
                        center: 'title',
                        right: ''
                    },
                    defaultView: 'agendaDay',
                    selectable: true,
                    selectHelper: true,
                    select: function (start, end) {
                        var title = prompt('Motivo da consulta:');
                        var eventData;
                        if (title) {
                            eventData = {
                                title: title,
                                start: start,
                                end: end
                            };

                            $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true

                            $('.motivo').val(eventData.title);

                            $('.horaInicio').val(eventData.start);

                            $('.horaTermino').val(eventData.end);
                            $('.dataSelecionada').val(eventData.start.format());


                        }
                        $('#calendar').fullCalendar('unselect');
                    },
                    lang: 'pt',
                    editable: true,
                    eventLimit: true, // allow "more" link when too many events
                    events: #{agendamentoManagedBean.jsonArray}


                    eventClick: function (calEvent, jsEvent, view) {

                        // alert('Event: ' + calEvent.title +' Data '+calEvent.start);

            #{agendamentoManagedBean.testeClicaEvento(calEvent.start)}
                    }

                });


             });


        </script>
        <script type="text/css">

            .body {
                margin: 40px 10px !important;
                padding: 0 !important;


                //font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif !important;
                font-size: 12px !important;
            }

            #calendar {
                max-width: 900px !important;
                margin: 0 auto !important;
             }

        </script>

        <title>Facelets Template</title>

    </h:head>

    <h:body>

        <div id="top">
            <ui:insert name="top">Top</ui:insert>
        </div>

        <div id="content" class="center_content">
            <ui:insert name="content">Content</ui:insert>
        </div>

        <div id="bottom">
            <ui:insert name="bottom">Bottom</ui:insert>
        </div>

    </h:body>

</html>

下面是ManagedBean的部分代码：

@ManagedBean(name = "agendamentoManagedBean")
@SessionScoped
public class AgendamentoManagedBean {



    public void testeClicaEvento(String str) {
        Logger logger = Logger.getAnonymousLogger();
        logger.info("*********DATA EVENTO SELECIONADO *****" + str);

    }

}

Answer 1

点击事件时函数是否执行？我不信。以下代码段中的#{...}（取自上面的示例）在页面首次呈现时是'executed'

eventClick: function (calEvent, jsEvent, view) {

    // alert('Event: ' + calEvent.title +' Data '+calEvent.start);
    #{agendamentoManagedBean.testeClicaEvento(calEvent.start)}
}

那么 calEvent.start 的计算结果为 'null'（没有 EL 变量 calEvent），这就是您所看到的。如果你想在那个时刻在服务器上执行一个方法，使用一个 omnifaces o:commandScript。

但是直接使用已经准备就绪的PrimeFaces schedule而不是重新发明轮子不是更容易吗？

Answer 2

您可以使用 primefaces 调用 managedbean 方法 p:remotecommand。

<p:remotecommand name="callBeanMethod" listener=" #{agendamentoManagedBean.testeClicaEvento"/>

在事件中点击

 eventClick: function (calEvent, jsEvent, view) {
     callBeanMethod([{name:'startDate',value:calEvent.start}]);
}

豆中

public void testeClicaEvento(){
String startDatString = FacesContext.getCurrentInstance()
                .getExternalContext().getRequestParameterMap()
                .get("startDate");
}

最好使用primefaces schedule，用jsf实现会更容易。

通过 jQuery 函数设置 managedBean 属性

Set managedBean attribute by jQuery function

jquery

jsf