Failed to pass html menu to CakePHP

Question

Failed to pass html menu to CakePHP

Navigation

#1 by (1 votes)

1

In the link below I have a perfectly working Menu in Codepen as below link:

Starting CSS

#DPrincipais
{
  display: block;
}

#TrabalhoRendimento
{
  display: none;
}
#Referencia
{
  display: none;
}
#Comprovante
{
  display: none;
}
.ContForm
{
  border: 1px solid #98adab !important;
  width: 750px !important;
  margin-left: 0px !important;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: flex-start;
}
.LabelForms
{
  padding-left: 5px;
  padding-right: 5px;
  border-left: 0px;
  border-right: 0px;
  border-top: 0px !important;
  height: 30px;
  line-height: 30px;
  font-size: 12px;
  color: #98adab;
}
.InputForms
{
  border: 0px;
  border-right: 1px solid #98adab !important;
  height: 30px;
  line-height: 30px;
  width: 100% !important;
  font-weight: bold;
  padding-right: 7px;
  padding-left: 7px;
}

End of Css
Start Menu

<nav class="columns" id="actions-sidebar">
    <ul class="side-nav">
        <!-- Início Link para Menu DadosPrincipais -->
        <li><?= $this->Html->link('> '.__('Student Data'), '#DPrincipais', ['style' => $dataButton]) ?></li>
    <li><a href="#TrabalhoRendimento">> Trabalho Rendimento</a></li>
        <li><?= $this->Html->link('> '.'Trabalho','#TrabalhoRendimento', ['style' => $matriculaButton]); ?></li>
    </ul>
</nav>

End of Menu Starting Javascript

const divs = [...document.querySelectorAll('#DPrincipais,#TrabalhoRendimento,#Referencia,#Comprovante')];
const botoes = [...document.querySelectorAll("li")];

for (let i = 0; i < botoes.length; ++i){ //percorrer todos os botoes
  botoes[i].addEventListener("click", function(){ //definir o click para cada um
    divs.forEach(div => div.style.display = "none"); //esconder todos os divs
    divs[i].style.display = "block"; //mostrar o que foi clicado
  });
}

divs.forEach(div => div.style.display = "none"); //iniciar todos escondidos
divs[0].style.display="block"; //Exibe só a primeira div

End of Javascript
Start of the Edit

<div id="DPrincipais">
   <fieldset>
      <legend>
         <?php echo __('Dados Básico') ?>
      </legend>
      <div class="ContForm" style="border-top-left-radius: 10px; border-top-right-radius: 10px; width: 70% !important; margin-top: -20px;">
         <div class="LabelForms" style="width: 10%;">
            <label for="txtNome">Nome</label>
         </div>
         <div class="InputForms" style="width: 90%; border-right: 0px !important;">
            <?php
            echo $this->Form->control('nome', ['type' => 'text', 'class' => 'InputLabelUnic', 'name'=>'txtNome',
            'label' => false ]); ?>
         </div>
      </div>
      <div class="ContForm" style="border-top-left-radius: 10px; border-top-right-radius: 10px; width: 25% !important; margin-right: 15px; float: right; margin-top: -32px;">
         <div class="LabelForms" style="height: 30px !important; line-height: 30px !important;">
            <label for="txtDataCadastro">Data Cadastro</label>
         </div>
         <div class="InputForms" style="border-right: 0px !important; width: 10% !important; height: 30px !important; line-height: 30px !important;">
            <?= date('d/m/Y'); ?>
         </div>
      </div>
   </fieldset>
</div>
<div id="TrabalhoRendimento">
   <fieldset>
      <legend>
         <?php echo 'Trabalho'; ?>
      </legend>
      <!-- Início linha 1 -->
      <div class="ContForm" style="border-top-left-radius: 10px; border-top-right-radius: 10px; margin-top: -20px;">
         <div class="LabelForms" style="width: 20% !important;">
            <label for="txtAtivPrinc">Atividade principal</label>
         </div>
         <div class="InputForms" style="width: 30% !important;">
            teste 1
         </div>
         <div class="LabelForms" style="width: 20% !important;">
            <label for="txtSetor">Setor</label>
         </div>
         <div class="InputForms" style="width: 30% !important; border-right: 0px !important;">
            teste 2
         </div>
      </div><!-- Fim linha 1 -->
   </fieldset>
</div>

End of Edit

javascript cakephp cakephp-3

asked by anonymous 30.11.2017 / 21:09

1 answer

Azure Login Error for windows PowerShell problem with Jquery-Mask

score 1 · Accepted Answer

The selector you are using to build the buttons:

const botoes = [...document.querySelectorAll("li")];

It is very broad and ends up hitting on more elements than intended.

A simple way to solve is to add hierarchy so that it only matches the <li> of a certain part of the html. Since <li> is part of the navigation bar, <ul class="side-nav"> , you can add this class to the selector to hit only the <li> that are in there.

To do this you just need to change the get of the buttons to:

const botoes = [...document.querySelectorAll(".side-nav li")];