<a href> um erro de cinco anos

[Frank K Hosaka]

Há cinco anos, eu imaginava que precisava de um marcador para executar um comando JavaScript. O meu conhecimento em HTML era e ainda é bem precário, mas improvisei assim:

<tr><td><a href data-bs-dismiss='modal' onclick=voltar(this.innerHTML)>
                {{$row->conta." ".$row->descricao}}</a>

Eu também não sabia nada de CSS, assim eu apelei para o Bootstrap. E tudo foi uma maravilha nos últimos cinco anos.

Hoje, no entanto, estou estudando o Laravel, o tutorial do Chirper com Blade.

O Laravel Blade trabalha com o CSS da Tailwinds. Ao invés de pesquisar como funciona o modal no Tailwinds, eu simplesmente tirei um monte de <div> que o Bootstrap trabalhava bem como as suas classes. E tudo funcionou quase perfeitamente, o problema é que eu selecionava a conta, os dados eram passados no formulário principal, mas tudo era apagado porque o navegador foi atualizado. Depois de muito investigar, percebi que era o <a href> é que atualizava a tela, o Bootstrap é que dava um jeito de neutralizá-lo.

Para corrigir o problema, eu só precisei eliminar o marcador <a href>. Quanto ao comando JavaScript, eu coloquei no marcador <td>.

No Tailwinds, eu aprendi como diminuir o espaço entre as linhas através da classe 'leading-tight'. Para exibir ou ocultar a <div> onde montei o plano de contas, eu usei o CSS puro:

Ah, o Tailwinds tem uma classe bacana que faz a caixa do input ficar redondo e que muda a cor assim que você foca nela, ele é enorme, eu decidi jogar no arquivo .env com o identificador input, e para usar no arquivo blade, eu chamo a classe com o marcador <?=env('input')?> 

.env
input="class='ml-4 px-3 py-1 border border-gray-300
            rounded-md shadow-sm focus:outline-none focus:ring-indigo-500
            focus:border-indigo-500'"

resources > views > diarioLcto.blade.php
<x-app-layout>
<script>
document.title='<?=$btMenu?>'
var idControle,Descricao
function ir(controle,destino)
{
    idControle=controle
    Descricao=destino
    plano.style.display="block"
}
function voltar(texto)
{
    controle=document.getElementById(idControle)
    destino=document.getElementById(Descricao)
    controle.value=texto.substr(0,3)
    tamanho=texto.strlen
    destino.innerHTML=texto.substr(4,tamanho)
    plano.style.display='none'
}
</script>
<div id=plano style="display:none" class="w-[500px] mx-auto fixed right-60">
        <table class="leading-tight">
        <?php foreach($ativo as $key=>$row): ?>
            <tr><td onclick=voltar(this.innerHTML)><?=$row->conta." ".$row->descricao?>
            <?php if($key<$contaPassivo): ?>
                <td onclick=voltar(this.innerHTML)><?=$passivo[$key]->conta." ".$passivo[$key]->descricao?></a>
            <?php else: ?>
                <td>
            <?php endif; ?>
        <?php endforeach; ?>
        </table>
    </div>
<table class='w-[500px] mx-auto mt-2 leading-tight'>
<?php
if(count($produtos)): ?>
    <tr class=fw-semibold><td class=text-right>Cod<td>Produto
        <td class=text-end>Qt<td>Un<td class=text-right>Total
    <?php foreach($produtos as $prod): ?>
        <tr>
        <td class=text-end><a href="produtoAlterar?id=<?=$prod->id?>"><?=$prod->codprod?></a>
        <td nowrap><?=$prod->prod?>
        <td class=text-right><?=virgula($prod->qt)?>
        <td><a href="produtoExcluir?id=<?=$prod->id?>"><?=$prod->un?></a>
        <td class=text-right><?=dec($prod->custototal)?>
    <?php endforeach ?>
    <tr class='fw-semibold'><td><?=date('d/m/y',strtotime($produtos[0]->dia))?>
        <td colspan=3>
        <form method=post action="diarioProduto">
        <input type=submit name=produto value='Produto' class=mr-10>

    <?php if($somaProdutos!==0):?>
        <a href=diarioPessoa><?=$produtos[0]->pessoa?></a>
        <td class=text-right><?=dec($somaProdutos)?>
        </form>
    <?php else: ?>
        <tr><td><td><td><td>
    <?php endif; ?>
<?php else: ?>
    <?php if($btMenu!=="Novo Lançamento"): ?>
    <tr><td>
    <form method=post action="diarioProduto">
    <input type=submit name=produto value='Produto'>
    </form>
    <?php endif; ?>
<?php endif; ?>
<form action='<?=$comando?>' method=post>
<?php if($btMenu=="Edita Lançamento"): ?>
<tr><td colspan=5>
    <a href="diarioAcrescentar&lcto=<?=$consulta->lcto?>">
    Acrescentar no lançamento <?=$consulta->lcto?></a>
<?php endif;?>
<tr><td>Dia<td>
    <input <?=env('input')?> type=date name=lcto[] size=2 value='<?=$consulta->dia?>' autocomplete=off>
<tr><td>Lcto<td colspan=4>
    <input <?=env('input')?> type=button name=lcto[] size=4 value='<?=$consulta->lcto?>'>
<tr><td>ContaD<td colspan=4>
    <input <?=env('input')?> id='ContaD' name=lcto[] onclick="ir(this.id,'DescD')"
        size=2 value='<?=$consulta->contad?>' autocomplete=off>
    <a id=DescD></a>
<tr><td>ContaC<td colspan=4>
    <input <?=env('input')?> id='ContaC' name=lcto[] onclick="ir(this.id,'DescC')"
        size=2 value='<?=$consulta->contac?>' autocomplete=off>
    <a id=DescC></a>
<tr><td>Valor<td colspan=4>
    <input <?=env('input')?> name=lcto[] value='<?=dec($consulta->valor)?>' autocomplete=off size=6>
<tr><td>Histórico<td colspan=4>
    <input <?=env('input')?> name=lcto[] value="<?=$consulta->hist?>" autocomplete=off size=49>
<input type=hidden name=lcto[] value=<?=$consulta->docto?>>
<tr><td><td><input <?=env('input')?> type=submit value=Confirmar><td><td><td>
</form>
</table>
</x-app-layout>

 

Editado Setembro 20 por Frank K Hosaka