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)" />

@BalusC在How to invoke a bean action method using a link? The onclick does not work中对此的引用：

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

客户端上的(h:?)inputText呈现为纯html inputText，因此，如果要在提交之前来访问其值（就像我怀疑的那样），可以就像在纯html / javascript中一样，在showPopup中这样做。

操作方法是mentioned in many stackoverflow Q/A，因此请选择最适合您的一个，例如How do I get the value of text input field using JavaScript?，但请务必同时阅读How can I know the id of a JSF component so I can use in Javascript

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

1 个答案: