Forum:

HTML Pages with CSS and JavaScript

Problem to setup the style.display in javascript.

Ranch Hand

Posts: 639

posted 1 year ago

Number of slices to send:

Optional 'thank-you' note:

Send

I'm trying to change the css display attribute but this is not doing. My page is calling the javascript function when onclick in the cell table.
HTML page:

<?xml version="1.0" encoding="UTF-8" ?>
<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@page import="itc.systems.beans.BeanEspecialidades"%>
<%@page import="itc.systems.beans.BeanMunicipios"%>
<%@page import="itc.systems.beans.DadosClientes"%>
<%@page import="itc.systems.dao.ClientesDAO"%>
<%@page import="java.util.List"%>
<%@page import="java.util.ArrayList"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script type="text/javascript" 
            src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.0/jquery.mask.js"></script>
    <script type="text/javaScript" src="JavaScript/Especialidades.js"></script>    
    <script type="text/javaScript" src="JavaScript/Cidades.js"></script>
<style>
    
    
    #espectbl
        {
            position: absolute;
            top: 50px;
            left: 5px;
            width: 12em;
            background-color: darkblue;
            color: #ffffff;
            background:-o-linear-gradient(bottom, #003366 5%, #003f7f 100%);
            box-sizing: border-box;
            display: block;
        }
    #munic
        {
            position: absolute;
            top: 25px;
            left: 230px;
            display: none;
            background-color: darkblue;
            color: #ffffff;
        }
    #tblclientes
        {
            position: absolute;
            width: 300px;
            height: 700px;
            top: 50px;
            left: 550px;
            display: none;
            border: 0px;
            border-collapse: collapse;
            padding: 10px;
            border-spacing: 100px;
        }
  
</style>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
        <title>JSP Page</title>
    </head>
    <body>
    
        <form action="Clientes" method="POST" autocomplete="OFF" accept-charset="ISO-8859-1" id="frmcli">
            <div class="campo" id="lbl0">
                <input id="hidval1" type="hidden" value="${especialist}"></input>
            </div>
            <div class="campo" id="lbl1">
                <input id="hidval2" type="hidden" value="${cidade}"></input>
            </div>
            
            <div class="campo" id="lbl1">
                
            </div>
            
            <div class="campotab-container">
                <div class="campotab">
                    <div id="table" class="table--class">
                        <table class="tabela" id="espectbl">
                            <tbody id="tcorpo">
                            <%
                                String especH = request.getParameter("especialist");
                                System.out.println("Get hidden1: " + especH);
                                ClientesDAO cliDao = new ClientesDAO();
                                List<BeanEspecialidades> tblespec = new ArrayList<BeanEspecialidades>();
                                tblespec = cliDao.getEspecialidades();
                                
                                request.setAttribute("especialidades", tblespec);
                            %>
                                <c:forEach var="tabespec" items="${especialidades}">
                                    <tr id="linha">
                                        <td id="rowespc" onclick="myEspec()">
                                            <c:out value="${tabespec.especialidade}"></c:out>
                                        </td>
                                    </tr>

</c:forEach>
                            </tbody>
                        </table>
                    </div>    
                </div>    
            </div>       
            <div class="campo" id="munic">
                <select id="munic"  name="municipios" size="32" onclick="myCidade()">
                    <% 
                        String cidadeH = request.getParameter("cidade");
                        System.out.println("Get hidden2: " + cidadeH);
                        List<BeanMunicipios> municipios = new ArrayList<BeanMunicipios>();
                        municipios = cliDao.getMunicipio();
                        request.setAttribute("municipios", municipios);
                    %>
                    <c:forEach var="cid" items="${municipios}">
                        <option><c:out value="${cid.municipio}"></c:out></option>
                    </c:forEach>    
                </select>
            </div>
            <div class="campotab-container">
                <div class="campotab">
                    <div id="table" class="table--class">
                        <table class="tabela" id="tblclientes">
                            <%
                                List<DadosClientes> cliDados = new ArrayList<DadosClientes>();
                                ClientesDAO cliDAO = new ClientesDAO();
                                cliDados = cliDAO.getClientes();
                                
                                request.setAttribute("clientes", cliDados);
                            %>
                            <c:forEach var="tabclientes" items="${clientes}">
                                <tr id="linha" style="border: 0px">
                                    <th id="lcabeca" style="width: 50px">Nome:</th>
                                    <td id="lcoluna" style="width: 300px; border: 0px;"><c:out value="${tabclientes.nome}" /></td></tr>
                                <tr id="linha">
                                    <th id="lcabeca" style="width: 50px">Endereço:</th>
                                    <td id="lcoluna" style="width: 300px;"><c:out value="${tabclientes.endereco}" /></td></tr>
                                <tr id="linha">
                                    <th id="lcabeca" style="width: 34px">Bairro:</th>
                                    <td id="lcoluna" style="width: 300px;"><c:out value="${tabclientes.bairro}" /></td></tr>
                                <tr id="linha">
                                    <th id="lcabeca" style="width: 50px">Telefone</th>
                                    <td id="lcoluna" style="width: 300px;"><c:out value="${tabclientes.telefone}" /></td>
                                    <tr id="linha" style="width: 300px; height: 200px;">
                                    <td id="lcoluna" colspan="2"> 
                                        <img src="data:image/jpg;base64, ${tabclientes.base64Image}" width="300" height="200"/>
                                    </td>
                                    </tr>
                                </tr>
                                <tr id="linha" style="height: 20px;"></tr>
                            </c:forEach>                    
                        </table>
                    </div>    
                </div>    
            </div> 
            
        </form>
        
    </body>
    
        
</html>

Javascript:

myEspec();
    function myEspec()
    {
        var especialidade;
        var tblVar = document.getElementById("tblclientes");
        var tabEspec = document.getElementById("tcorpo");

if(tabEspec !== null)
        {
            document.getElementById("tblclientes").style.display = "none";

for( i = 0; i < tabEspec.rows.length; i++)
            {
                for(c = 0; c < tabEspec.rows[i].cells.length; c++)
                    tabEspec.rows[i].cells[c].onclick =

function()
                        {
                            getval(this);
                        };
            }
        }

function getval(cel)
        {
            especialidade = cel.innerHTML;
            
            var cityVar = document.getElementById("munic");

if(cityVar.style.display !== "block") 
            {
                cityVar.style.display = "block";
                tblVar.style.display = "none";
            }
            
            alert("Especialidade: " + especialidade);
        }

}

I appreciate any help.

Roland Mueller

Ranch Hand

Posts: 178

I like...

posted 1 year ago

Number of slices to send:

Optional 'thank-you' note:

Send

Line #19 in Javascript part looks suspicious - without having a closer look at the code. Using 'this' in Javascript is a kind of russhian roulette game. My guess is, that 'this' in line #19 is bound to something existing when the loop over the cells is executed rather than the the cell at the time the onclick function is triggered.

May be the following works:
Change line #19 from ...

... to

...

Cezar Apulchro

Ranch Hand

Posts: 639

posted 1 year ago

Number of slices to send:

Optional 'thank-you' note:

Send

I made the change indicated but when I click in the table cell I'm receiving this error:

Thank you by assistance.

Bear Bibeault

Sheriff

Posts: 67732

173

I like...

posted 1 year ago

Number of slices to send:

Optional 'thank-you' note:

Send

Have you set breakpoints at strategic locations in the code to see what's actually going on?

[Asking smart questions] [About Bear] [Books by Bear]

HTML 5 (verified skill)
Skill verified by Jeanne Boyarsky

CSS 3 (verified skill)
Skill verified by Jeanne Boyarsky

JavaScript (verified skill)
Skill verified by Jeanne Boyarsky

Cezar Apulchro

Ranch Hand

Posts: 639

posted 1 year ago

Number of slices to send:

Optional 'thank-you' note:

Send

How I do set breakpoints in jsp page?

image.jpg

Roland Mueller

Ranch Hand

Posts: 178

I like...

posted 1 year ago

Number of slices to send:

Optional 'thank-you' note:

Send

Cezar Apulchro wrote:How I do set breakpoints in jsp page?

In browser tool that is open breakpoints are set in Javascript code by opening a file in tab "Sources" ("fontes" I guess in Spanish) and click one time on the left side of the line where you want the breakpoint. This can be done both in Javascript files or inside script elements inside html file.

...

Bear Bibeault

Sheriff

Posts: 67732

173

I like...

posted 1 year ago

Number of slices to send:

Optional 'thank-you' note:

Send

Cezar Apulchro wrote:How I do set breakpoints in jsp page?

Remember that JSP has nothing to do with the browser. JSP is a templating language that generates an HTML page on the server that gets sent to the client. What you see on the browser is the result of processing the JSP page on the server.

See this article for more information on how JSP is processed.

You set breakpoints using DevTools in webkit browsers, and similar tools in other browsers.

Trying to debug JavaScript without browser dev tools is like, well, this...

[Asking smart questions] [About Bear] [Books by Bear]

Cezar Apulchro

Ranch Hand

Posts: 639

posted 1 year ago

Number of slices to send:

Optional 'thank-you' note:

Send

What this say me?

image.jpg

Roland Mueller

Ranch Hand

Posts: 178

I like...

posted 1 year ago

Number of slices to send:

Optional 'thank-you' note:

Send

Cezar Apulchro wrote:What this say me?

The screenshot shows the code with my errorness recommendation (sorry for that!) and the debugger shows the same error message you already saw & reported three days ago (line #22 in screenshot). Can you undo the change and debug your original version the same way?

Cezar Apulchro wrote:I made the change indicated but when I click in the table cell I'm receiving this error:
Uncaught TypeError: Cannot read properties of undefined (reading 'cells') at tabEspec.rows.<computed>.cells.<computed>.onclick (Especialidades.js:23:53)

...

Cezar Apulchro

Ranch Hand

Posts: 639

posted 1 year ago

Number of slices to send:

Optional 'thank-you' note:

Send

After return to the origin of the problem the problem was solved. I don't understand why error was generated.

myEspec();
    function myEspec()
    {
        var especialidade;
        var tblVar = document.getElementById("tblclientes");
        var tabEspec = document.getElementById("tcorpo");
        var cityVar = document.getElementById("cidades");
            
        if(tabEspec !== null)
        {

function()
                        {
                            getval(this);
                        };
            }
        }

}

Thanks and best regards.

On top of spaghetti all covered in cheese, there was this tiny ad:

Low Tech Laboratory

https://www.kickstarter.com/projects/paulwheaton/low-tech-0