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

Здравствуйте,
пытаюсь реализовать функция скрыть/показать элемент с помощью javascript. Вроде все элементарно, но я терплю неудачу. постоянно всплывает ошибка Uncaught TypeError: Cannot read property 'style' of null, которая как я поняла означает не найден элемент.
Пыталась двумя способами делать:
1) при выборе selectonemenu с помощью ajax выполняется javaМетод, затем скрипт
2) при нажатии на кнопку выполняется только скрипт.
Ни то, ни другое не работает.
При входе видим:
2092211fc2e34ecfa3bed0fc6ade91df.png
после выбора с меню:
29b8efec05734be1ada8abb1b9a7d073.png
<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>
  • Вопрос задан
  • 903 просмотра
Решения вопроса 1
sergey-gornostaev
@sergey-gornostaev Куратор тега Java
Седой и строгий
Есть два "родных" способа скрыть какой-либо элемент интерфейса. Первый способ - не рендерить его вообще:
<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>

Но надо оно вам? Происходит размазывание сильносвязанного кода, появляются всякие сложности, типа автогенерируемых идентификаторов, да и много ещё чего. Всё это преодолимо, конечно, если оно того стоит.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@krumza
попробуйте убрать window.onload = - у вас функция срабатывает так при загрузке окна
Ответ написан
А что у вас за параметр в функции 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";
    }
};
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы