Почему скрипт не видит элемент с id?

Question

[Алена]

Здравствуйте,
пытаюсь реализовать функция скрыть/показать элемент с помощью javascript. Вроде все элементарно, но я терплю неудачу. постоянно всплывает ошибка Uncaught TypeError: Cannot read property 'style' of null, которая как я поняла означает не найден элемент.
Пыталась двумя способами делать:
1) при выборе selectonemenu с помощью ajax выполняется javaМетод, затем скрипт
2) при нажатии на кнопку выполняется только скрипт.
Ни то, ни другое не работает.
При входе видим:

после выбора с меню:

<div class="row">
                <div class="col-xs-12">
                    <f:view >
                        <h:form  id="globalform" style="width: 100%" >  
                            <p:tabView style="width: 100%" class="nav-tabs">
<p:tab title="Проверка ВИС">
                                    <h:form id="visTest">

                                        <p:panelGrid columns="2" style="margin-bottom: 30px; border: 0px">
                                            <p:outputLabel for="visChange" value="Выберите ВИС:" style="font-weight: bold;"/>
                                            <p:selectOneMenu id="visChange"  value="#{visChange.selectVis}" >

                                             <p:ajax  event="change" listener="#{visChange.change()}" update="checking"/>
                                                <p:ajax  onsuccess="foo('checking')"/> 
                                                <f:selectItem itemLabel="Выберите ВИС" itemValue="" noSelectionOption="true" />
                                                <f:selectItems value="#{customizeRole.vis}" />
                                            </p:selectOneMenu>
                                            <!--<p:commandButton type="button" onclick="foo('checking')" value="Скрыть/Показать" /> 
                                            <p:commandButton id="clickme" class="btn-small"
                                                             value="Скрыть/Показать" />-->
                                        </p:panelGrid>

                                        
                                        
                                        

                                        <p:dataTable id="checking" class="table" var="checkingVIS" value="#{visChange.visConformity}" 
                                                     style="display:none; margin-bottom:280px;" 
                                                     selectionMode="single" 
                                                     selection="#{visChange.selectedVisConformity}" rowKey="#{checkingVIS.id}">
                                            <p:ajax event="rowSelect" listener="#{visChange.onRowSelect}" update=":updateColumn" oncomplete="PF('dialogAdd').show();" />
                                            <p:column headerText="ID"   >
                                                <h:outputText value="#{checkingVIS.id}"/> 
                                            </p:column>
                                            <p:column headerText="Наименование колонок в файле" >
                                                <h:outputText value="#{checkingVIS.name_old}"/> 
                                            </p:column>
                                            <p:column headerText="Наименование колонок в БД" >
                                                <h:outputText value="#{checkingVIS.name_new}"/>                                                                             
                                            </p:column>

                                        </p:dataTable> 

                                    </h:form>
                                </p:tab>
</p:tabView>
                        </h:form>
</h:body>
<script>
 window.onload = function foo(id) {

                if (document.getElementById(id).style.display == "none")
                {
                    document.getElementById(id).style.display = "block";
                }

            };
</script>

Comments

[Сергей Горностаев]

А почему не пользуетесь встроенными функциями JSF? Зачем вам этот велосипед?

[Алена]

Сергей Горностаев: честно, не знала что есть такая встроенная функция :(

[Алена]

Сергей Горностаев: Подскажите, пожалуйста. где можно почитать о данных встроенных функциях? Что то не могу найти :(

Answer 1

[Сергей Горностаев]

Есть два "родных" способа скрыть какой-либо элемент интерфейса. Первый способ - не рендерить его вообще:

<p:commandButton value="Скрыть/Показать">
  <f:ajax listener="#{exampleBean.toggleVisibility}" event="click" render="somePanel"></f:ajax>
</p:commandButton>

<h:panelGroup id="somePanel" layout="block" rendered="#{exampleBean.visible}">
    <div>Трям!</div>
</h:panelGroup>

Второй - задать ему соответствующий класс:

<h:panelGroup id="somePanel" layout="block" styleClass="#{(exampleBean.visible) ? 'hidden' : ''">
    <div>Трям!</div>
</h:panelGroup>

Можно, конечно, и обработчики javascript навесить на события:

<script>
    function toggleVisibility(id) {
        var table = document.getElementById(id);
        if(table) {
            var currentState = table.style.display || 'block';
            if (currentState === 'block')
                table.style.display = 'none';
            else
                table.style.display = 'block';
        }
        return false;
    }
</script>

<p:commandButton value="Скрыть/Показать" onclick="toggleVisibility('globalform:visTest:checking');">
</p:commandButton>

Но надо оно вам? Происходит размазывание сильносвязанного кода, появляются всякие сложности, типа автогенерируемых идентификаторов, да и много ещё чего. Всё это преодолимо, конечно, если оно того стоит.

Comments

[Алена]

Спасибо Вам большое, я уже сделала почти первым способом, создала класс Visible:

public class Visible implements Serializable {

    private boolean visible = false;

    public boolean isVisible() {
        return visible;
    }

    public void setVisible(boolean visible) {
        this.visible = visible;
    }

}

в прописала event="change" listener="#{visible.setVisible(true)}" update="pv"
а таблицу "checking" поместила в p:panel и прописала visible="#{visible.visible}" id="pv"
Не знаю красиво ли это, но работает

Answer 2

[krumza]

попробуйте убрать window.onload = - у вас функция срабатывает так при загрузке окна

Comments

[Алена]

убирала, не помогает

Answer 3

[Артем Каюн]

А что у вас за параметр в функции foo?) В этот колбэк не передается никаких параметров.
https://developer.mozilla.org/ru/docs/Web/API/Glob...

window.onload = function () {
    if (document.getElementById('visTest').style.display == "none") // нужно передать конкретный id, это просто пример
    {
         document.getElementById('visTest').style.display = "block";
    }
};