Question

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

Geolocation获取以度和分数为单位的纬度和经度，我将其转换为度，分和秒，然后使用以下代码将值传递给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控制台显示消息的行失败：

TypeError：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代码中访问id“ north”和“ south”，但没有成功。

到目前为止，在网上找到有关如何使用JavaScript更改JSF单选按钮的信息并不容易，并且最感谢您提供一些帮助来解决此问题，在此先感谢您。

Answer 1

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

<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单选按钮” like selecting a radio button in plain 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;
}

Answer 2

非常感谢-我没有那么冗长的版本可以使用，但是没有更详细的版本。我已经在表单中包含了xhtml代码，但是发现h：panelGroup标记是多余的。

这是我的xhtml代码：

<h:form id="index-form" prependId="false">
  <!-- Other code -->
  <h:selectOneRadio id="lat-radio" value="#{solarPower.latNS}">
    <f:selectItem itemValue="N" itemLabel="N" />
    <f:selectItem itemValue="S" itemLabel="S" />
  </h:selectOneRadio>
  <!-- Other code including the equivalent for longitude -->
</h:form>

和我的JavaScript代码的相关部分如下：

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

，同样也适用于经度。

请注意，在我的情况下，无需在ID前面加上“ index-form：”前缀，因为我已经在h：form年龄中添加了prependId =“ false”属性。

无法使用JavaScript访问<h：selectoneradio ... =“”>

2 个答案: