如何在表单提交之前将bean值传递给JavaScript

Question

我正在使用JSF制作关于乘车共享/销售公交车票的网页。在一个特定页面上，已登录用户可以发布他们的广告（提供或寻找乘车）。他们应输入以下信息：广告标题，原籍城市，目的地城市，出发时间等。

我想要的是，用户在点击提交后获得弹出窗口显示的目的地城市的天气预报。这也意味着我正在使用openweathermap这样的服务。

基本上，我有一个h:form和h:commandButton像这样：

<h:commandButton value="Publish" action="#{adBean.publishAd}" type="submit" onclick="showPopup()">
</h:commandButton>

问题是我不知道如何传递bean的值

<h:inputText value="#{adBean.ad.destinationCity}"/>

到JavaScript方法showPopup()。

我试过这个，但destinationCity原来是null。

<h:commandButton value="Publish" action="#{adBean.publishAd}" type="submit" onclick="showPopup(#{adBean.ad.destinationCity})">
</h:commandButton>

为什么会发生这种情况？如何将其值传递给JavaScript代码？

Answer 1

它是null，因为它被放在一个用于javascript的属性（onclick）中。这些属性在页面显示时“呈现”，而不是（再次）在提交时或其他时刻。因此，如果它在那时被初始化为null，那么从服务器传输到客户端的是什么

<button value="Publish" ... onclick="showPopup(null)" />

在JSF中，只有将EL表达式解释为attributes的MethodExpression才能用于声明动作方法。所有其他属性都被解释为ValueExpression，并且在JSF生成HTML输出时立即执行它们。这涵盖了onclick属性，其值实际上应代表JavaScript函数。

客户端的(h:?)inputText呈现为一个普通的html inputText，所以如果你想在提交之前访问它的值（就像我怀疑你想要的那样），你可以在showPopup中这样做，就像你在普通的html / javascript中一样。