A arte de esconder um problema

[Frank K Hosaka]

Eu tenho um código PHP que dei o nome de detalhediario.php que é executado assim que eu seleciono um documento no extrato contábil.

O código é basicamente isso:

// rotina para detalhes do documento

// rotina para corrigir o documento.

A tela é uma barbaridade, no topo da tela você vê um monte de itens que correspondem à despesa com descrição, quantidade e preço, e bem lá em baixo você vê o formulário para consertar o lançamento contábil. É muito confuso, mesmo sabendo que só eu é que uso a rotina no momento.

Sinceramente, eu não sei como consertar o problema. Ao invés de consertar, eu decidi esconder o problema.

Eu criei um CSS para esconder, assim <style> .esconder {display:none;} </style>, e mudei o código PHP assim:

echo "<div id=divdetalhe onclick=divdetalhe2.style.display='block' ondblclick=divdetalhe2.style.display='none'>Detalhe do documento $docto</div>";
echo "<div id=divdetalhe2 class=esconder>";
// rotina para detalhes do documento
echo "</div>";

e eu apliquei a mesma gambiarra para a outra rotina.  Agora, o usuário só vê duas linhas depois de selecionar o documento na tela do extrato.

Para impressionar o usuário, eu transformei o primeiro <div> numa espécie de botão, eu criei o estilo pintar, assim

<style> .pintar {background-color: orange; border 1px solid} </style>

e acrescentei na <div> de cada grupo, assim <div id=divdetalhe class=pintar... e <div id=divcorrige class=pintar...

Essa não é a maneira correta de se fazer um programa, mas ajuda bastante a diminuir a dor, ao invés de ver toda a baderna, agora você vê uma baderna de cada vez.
 

Editado Maio 24, 2022 por Frank K Hosaka

[Frank K Hosaka]

O código que eu comentei deu problema, ele entrou em conflito com o evento duplo clique que havia definido em outro lugar.

O código para o divdetalhe ficou assim:

echo "<div id=divdetalhe onclick=alternar(id)>Detalhe do documento $docto</div>";

O div id=divcorrige também ficou com o mesmo formato.

A função java que exibe/oculta o div selecionado é esse daqui:

<script>
function alterna(id) {id=id+"2";element=document.getElementById(id);
    var visor = $(element).css("display"); 
    if (visor=="block") {element.style.display="none";} else {element.style.display="block";}}
</script>