Failure to pass html menu to Cakephp

Asked

Viewed 40 times

1

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

https://codepen.io/FabricioDev/pen/JOmjEg

Beginning of 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
Menu Start

<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>

Menu End
Beginning of 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
Beginning of Edite

<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 Edith

javascript cakephp cakephp-3
  • 1

    Note that there is an error in the code: </<fieldset>

  • Beware that the querySelectorAll("li") gets all the <li> of the rendered page. Confirm that this is what you want, and if not find the selector by adding hierarchy

  • @Mine is not wrong. I don’t know what happened. Thanks.

  • Actually, this code was adapted. I don’t know if I did it right but I switched the button for a read which is what I’m using, @Isac. What you recommend to me?

  • @Isac The original code is the same. rsrs https://answall.com/questions/257799/como-manter-uma-div-sempre-ativa/257819#257819 How do you think I should do it?

  • https://imgur.com/a/Xixil Check this error when inspecting the code, @Isac

  • 1

    @fabricio_wm By the image error looks exactly what I said. You have to specify more <li> or hit them all. Experiment with something like const botoes = [...document.querySelectorAll(".side-nav li")];, assuming that the buttons you want to give the click functionality are the ones inside <ul class="side-nav">

  • The error is on line 30 of this script.js, what is the instruction that is on this line ? Click on the inspect on this line and show here to know exactly where the error is

  • https://imgur.com/a/iWHMW This would be the tab, @Isac

  • The first four links should point to the same Div but are working as if it took the Divs and distributed in sequence to the first 4 menus.

  • 1

    The JS code has to be executed only after the page loads, otherwise the buttons and/or <li> will not yet exist. Are you doing this ? Running for example on onload of <body> or by putting the code at the end of the <body>

  • @Isac Ended with: const buttons = [...Document.querySelectorAll(".side-Nav li")]; Set as answer to finish. Thanks.

Show 7 more comments

1 answer

1


The selector you are using to build the buttons:

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

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

One simple way to solve it is to add hierarchy so it only hits us <li> of a certain part of html. Taking into account that <li> are part of the navigation bar, the <ul class="side-nav">, can add this class to the selector to hit only us <li> inside.

For this just need to change the get of the buttons to:

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

Browser other questions tagged javascript cakephp cakephp-3

You are not signed in. Login or sign up in order to post.