Question

我正在开发一个项目，我将JQuery插件FullCalendar与JSF应用程序集成在一起。我想在JQuery eventClick函数：function（calEvent，jsEvent视图）中为ManagedBean设置calEvent.start值。但是，在ManagedBean中，jQuery函数中传递的值被空接收，因为我在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

单击事件时是否执行了该功能？我不信。以下代码中的＃{...}（取自上面的示例）在首次呈现页面时“执行”

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 p：remotecommand调用managedbean方法。

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

在eventClick中

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

在Bean中

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

最好使用primefaces计划，这将更容易使用jsf实现。

通过jQuery函数设置managedBean属性

2 个答案: