如何 hide/show 从 Tiles 到 JavaScript div？

Question

我正在开发一个使用 Struts 2 和 Tiles 3 的 JSP 网站，它有不同的选项卡，每个选项卡显示一个 div 和一个 table .我需要添加一个包含 2 个 table 的选项卡，然后根据按钮显示一个或另一个。

是否可以通过 JS 以某种方式 show/hide 它们？我已经尝试了一段时间了，Tiles 似乎并不关心我从 JS 做的事情。

我一直在使用这个，有一些变化，但到目前为止没有成功。我对 JS 有点陌生，所以我可能做错了什么，或者 Tiles 有办法 hide/show 东西 dynamically/during 我不知道的运行时。

document.getElementById('controlPools').style.display='none';
document.getElementById('controlPools').style.display='inline';

controlPools 是 div 的名称，包含它的图块的名称是 controlPool.

这是JSP页面的代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://displaytag.sf.net" prefix="display"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<body>

    <fieldset>
    
        <div id="controlPools">
            <display:table name="lstPools" class="displaytag" id="tablaPools" >
                                                                   
                <display:column style="width: 90%"     >
                    <a href="javascript:getNodosPool('${tablaPools.name}')" >${tablaPools.name}</a>
                </display:column>
                
                <display:column style="width: 10%" property="nodes"/>

            </display:table>
        </div>
        
        <div id="nodosPool" style="display: none;" >
            <display:table name="lstMembers" class="displaytag" id="tablaNodesPool">
                
                <display:column style="width: 5%" >
                            <input type="checkbox" id="${tablaNodesPool.name}"  class="node" value="${tablaNodesPool.name}"  style="margin: 0 0 0 4px"   />             
                         </display:column>  
                         <display:column title="Status CBS" style="width: 10%"> 
                            <div id="iconStatus"  class="${tablaNodesPool.classStatus}" /></div> 
                         </display:column>
                         
                         <display:column title="Status STF" style="width: 10%"> 
                            <div id="iconStatus"  class="${tablaNodesPool.classStatus2}" /></div> 
                         </display:column>
                                                                     
                         <display:column property="name"    />
                         <display:column property="ip"    />
                         <display:column property="description"   />

            </display:table>
            
            <button onclick="enableNodesPool();"  ><s:text name="controlSnmp.enableSelected"/></button>     
            <button onclick="disableNodesPool();" ><s:text name="controlSnmp.disableSelected"/></button>
            <button onclick="getNodosPool();"><s:text name="controlSnmp.buttonRefresh"/></button>
        </div>
        

    </fieldset>
</body>

<script>
  
</script>

Answer 1

Tiles 在客户端没有任何作用，所以如果你用 JS 代码做一些事情，你已经在使用 DOM，但是这个文档可以使用 tiles 结果呈现。无论如何，它只会改变你需要使用一些 JS 函数 show/hide 一些 html 内容

修改的正确样式

隐藏：

document.getElementById('controlPools').style.display='none';

显示：

document.getElementById('controlPools').style.display='block';

Answer 2

@Roman-C 的回答让我开始思考，它让我找到了问题的解决方案，部分原因是瓷砖。

我正在使用这个 JS 块将数据提供给我的 JSP:

document.getElementById('controlPools').style.display='none';
$.ajax({
        type : "GET",
        url  : "ControlNodesPoolAct.action",
        data : {"pool": pool},
        success : function(result){
          if (result != null && result.length > 0){
            var aux = $("#tabs-11"); 
            aux.html(result);
            //inicializamos la tabla con el plugin de jquery
            $('#tablaNodesPool').DataTable(
                    {
                        "lengthMenu": [[150, 75, 10, -1], [150, 75, 10, "All"]]         
                    }           
            );
            spinner.stop();
            document.getElementById('poolLegend').innerHTML=pool;
          }
        },
        error : function(xhr, errmsg) {
            console.log("error en funcion getMiembrosSnmp " + errmsg); 
            spinner.stop();
        }
    });

显然，由于 DisplayTags 在运行时呈现它，因此调用函数时 div 不存在，所以我需要等到 DisplayTags 为 [= 呈现 table 21=] 存在。我移动了 document.getElementById('controlPools').style.display='none'; 到我知道 table 被渲染的地步，它似乎解决了问题。

此更改修复了它：

$.ajax({
        type : "GET",
        url  : "ControlNodesPoolAct.action",
        data : {"pool": pool},
        success : function(result){
          if (result != null && result.length > 0){
            var aux = $("#tabs-11"); 
            aux.html(result);
            //inicializamos la tabla con el plugin de jquery
            $('#tablaNodesPool').DataTable(
                    {
                        "lengthMenu": [[150, 75, 10, -1], [150, 75, 10, "All"]]         
                    }           
            );
            spinner.stop();
            document.getElementById('controlPools').style.display='none';
            document.getElementById('poolLegend').innerHTML=pool;
          }
        },
        error : function(xhr, errmsg) {
            console.log("error en funcion getMiembrosSnmp " + errmsg); 
            spinner.stop();
        }
    });

如何 hide/show 从 Tiles 到 JavaScript div？

How to hide/show divs from Tiles through JavaScript?

html

javascript

css

struts2

tiles