Невозможно получить доступс JavaScript

Question

Я работаю над приложением JSF 2.2 и хочу изменить переключатели с помощью JavaScript.Я получаю широту и долготу, используя геолокацию HTML5 в JavaScript, и хочу передать их на страницу xhtml, привязанную к Java-бину, чтобы при отправке она отправлялась в код 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, отображающей сообщение:

TypeError: document.getElementById (...) имеет значение null

, когда он пытается установить переключатель в положение «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, но безуспешно.

До сих пор было нелегко найти много онлайн о том, как изменить радиокнопки JSFс JavaScript, и был бы очень признателен за помощь в решении этой проблемы - большое спасибо заранее.

Answer 1

Большое спасибо - у меня получилась менее подробная версия, но не более подробная.Я уже имел код 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;
}

и аналогично для долготы.

Обратите внимание, что в моем случае нет необходимости добавлять префикс "index-form:", потому что я добавилатрибут prependId = "false" в теге h: form.

Answer 2

Вы бы поместили свои компоненты ввода в форму, если хотите иметь возможность ввода значений ввода:

<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;
}