从 <h:selectOneMenu /> 读取值到 javascript 函数的最佳方法是什么？

Question

我有 jQuery 模态 div，它显示在点击事件上......

<div id="time_scheduler" style="display: none;" title="Change Event Time"   class="dialog">
    <div class="block">
        <h:form>
            <span>Select Shift</span>
            <p></p>
            <h:selectOneMenu value="#{fieldController.shift}">
                <f:selectItems itemLabel=" #{s.shiftName}  &nbsp; &nbsp; &nbsp;   #{s.startTime} to #{s.endTime}" var="s" value="#{fieldController.allShiftUnfiltered}" /> 
                <f:converter converterId="shconvert" />
            </h:selectOneMenu> 
            <p></p>  
            <h:commandButton onclick="getShift('#{request.contextPath}/changeEvent?','#{fieldController.shift.startTime}','#{fieldController.shift.endTime}');" styleClass="btn btn-small" value="change" />
        </h:form>
    </div>
</div>

还有一个 js 文件中的 javascript 函数，它在 commandButton 中被调用，问题是每次页面显示时，我点击后在 selectOneMenu 上得到一个空值，然后我得到这个值，虽然它不一致，

function getShift(url,start_time,end_time){
    console.log('starttime is '+start_time); //start time is null on page first load
    console.log('endtime is '+end_time);     //end time is null on first page load

    $.ajax({
        url: url + 'event_id=' + event_id + '&start_time=' + start_time + '&end_time=' + end_time,
        cache: false,
        success: function(value) {
            console.log(value);  
        }
    });
}

我有一个转换器类

@FacesConverter(value = "shconvert")
public class ShiftConverter implements Converter {
    @Override
    public Object getAsObject(FacesContext context, UIComponent component, String value) {
        AdminEJB adm;
        try {
            adm = (AdminEJB) new InitialContext().lookup("java:global/ffm/AdminEJB");
            return adm.findShift(value);
        } catch (NamingException ex) {
            return null;
        }
    }

    @Override
    public String getAsString(FacesContext context, UIComponent component, Object value) {
      return value.toString();
    }
}

这几乎是在构建后级别进行转换，每次更改时将这些值传递给 javascript 函数的最佳方式是什么？

Answer 1

commandButton 的设置方式将使其使用最后提交的值来调用 javascript 函数。在解决这个问题之前，我们可能想了解 EL、JSF 和 Javascript 之间的关系。 JSF 获取 facelet 代码并将其转换为 HTML。那时任何 EL 语句都在服务器端解析。所以，当一切都说完了，我们就有了一个可以在我们最喜欢的浏览器中检查的 HTML 页面。现在出现了 Javascript，它不知道 JSF，所以它只在呈现的 HTML 页面上工作。

考虑到这一点，我们可以看到为什么上面的代码不起作用。用作 getShift Javascript 函数参数的 EL 语句只有在服务器重新呈现页面的该部分时才会被解析。

看起来这里的目标是在单击按钮时异步调用非 JSF servlet。我会以不同的方式解决这个问题。让 commandButton 异步调用 JSF 方法，该方法可以访问自定义 servlet。

<div id="time_scheduler" style="display: none;" title="Change Event Time"   class="dialog">
<div class="block">
    <h:form>
        <span>Select Shift</span>
        <p></p>
        <h:selectOneMenu value="#{fieldController.shift}">
            <f:selectItems itemLabel=" #{s.shiftName}  &nbsp; &nbsp; &nbsp;   #{s.startTime} to #{s.endTime}" var="s" value="#{fieldController.allShiftUnfiltered}" /> 
            <f:converter converterId="shconvert" />
        </h:selectOneMenu> 
        <p></p>  
        <h:commandButton styleClass="btn btn-small" value="change">
           <f:ajax execute="@form" listener="#{someBean.callServlet()} />
        </h:commandButton>
    </h:form>
</div>

然后，使用调用 servlet 的方法创建一个支持 bean

@Named
public class SomeBean {
    @Inject FieldController fieldController;
    public String callServlet() {
      Object startTime = fieldController.shift.startTime;
      Object endTime = fieldController.shift.endTime;

      //Call the servlet here

      return null;
    }
}

这是来自 java 的 example on calling a servlet。