使用 JavaScript,javascript,jsf,xhtml"/>
时间戳

首页 > 解决方案 > 无法访问使用 JavaScript

javascript - 无法访问使用 JavaScript

问题描述

我正在开发一个 JSF 2.2 应用程序并希望使用 JavaScript 更改单选按钮。我正在使用 JavaScript 中的 HTML5 地理定位获取纬度和经度，并希望将它们传递给连接到 Java bean 的 xhtml 页面，以便在提交时将其发送到服务器上的 Java 代码进行处理。

地理位置获取纬度和经度（以度数和度数为单位），我将其转换为度、分和秒，然后使用以下代码将值传递给 JavaScript 中的输入字段：

document.getElementById("lat-deg").value = latDeg;

在 xhtml 代码中插入纬度为

<h:inputText class="coord" id="lat-deg"
    validatorMessage="Error: Degrees of latitude must be a number between 0 and 90"
    value="#{solarPower.latDeg}">
    <f:validateRegex pattern="[0-9]+" />
    <f:validateLongRange minimum="0" maximum="90" />
</h:inputText>

同样适用于纬度的分和秒，以及经度的度、分和秒。当单击按钮调用 JavaScript 代码时，这完全可以正常工作。

但是，我想对负纬度（南）和负经度（西）使用单选按钮，但经过多次尝试，我无法让它工作。

在我的 JavaScript 代码中，我有以下内容：

var lat = position.coords.latitude;
var latMinus = false;
if (lat < 0) latMinus = true;
lat = Math.abs(lat);
var latDeg = Math.floor(lat);
// Get also latMin and latSec, then update the <h:inputText ...> fields
if (latMinus) {
  document.getElementById("south").checked = true;
} else {
  document.getElementById("north").checked = true; // <===
}

代码在显示消息的 Firefox 控制台指示的行处失败：

类型错误：document.getElementById(...) 为空

当它尝试将单选按钮设置为“N”时。在南半球，它会在之前的 document.get... 声明中失败。

对应的xhtml代码为：

<h:selectOneRadio id="lat-radio" value="#{solarPower.latNS}">
    <f:selectItem id="north" itemValue="N" itemLabel="N" />
    <f:selectItem id="south" itemValue="S" itemLabel="S" />
</h:selectOneRadio>

这对经度重复。

我尝试用这个替换上面的 JavaScript 代码：

if (latMinus) {
    document.getElementById("lat-radio").itemValue = "S";
} else {
    document.getElementById("lat-radio").itemValue = "N";
}

但它仍然失败，但这一次控制台中没有打印任何内容。

在查看浏览器看到的 html 源代码时，JSF 生成了以下代码

<td>
<input type="radio" checked="checked" name="lat-radio" id="lat-radio:0" value="N" /><label for="lat-radio:0"> N</label></td>
<td>
<input type="radio" name="lat-radio" id="lat-radio:1" value="S" /><label for="lat-radio:1"> S</label></td>

显然它已将 id="lat-radio" 更改为 "lat-radio:0" 和 "lat-radio:1"，这可能与我遇到的问题有关。最后，我还尝试在 JavaScript 代码中访问 ids “north”和“south”，但没有成功。

到目前为止，在网上很难找到很多关于如何使用 JavaScript 更改 JSF 单选按钮的信息，并且非常感谢在解决这个问题方面提供的帮助 - 非常感谢。

标签： javascriptjsfxhtml

解决方案

如果您希望能够提交输入值，您可以将输入组件放入表单中：

<h:form id="frmGeo">
    <h:panelGroup id="radioNorthVsSouth">
        <h:selectOneRadio id="lat-radio">
            <f:selectItem itemValue="N" itemLabel="N" />
            <f:selectItem itemValue="S" itemLabel="S" />
        </h:selectOneRadio>
    </h:panelGroup>
</h:form>

客户端都是纯 html ，选择“jsf 单选按钮”就像在纯 html 中选择单选按钮一样。因此，在这种情况下，您可以像这样调整输入：

if (latMinus) {
    document.getElementById('frmGeo:radioNorthVsSouth')
        .querySelectorAll('input[value=S]')[0].checked=true;
} else {
    document.getElementById('frmGeo:radioNorthVsSouth')
        .querySelectorAll('input[value=N]')[0].checked=true;
}

或者这个不太冗长但也不太富有表现力的一个：

if (latMinus) {
    document.getElementById('frmGeo:lat-radio:1').checked=true;
} else {
    document.getElementById('frmGeo:lat-radio:0').checked=true;
}

推荐阅读