hide and show div of each column

Asked

Viewed 90 times

-1

Hello, I’m making a display page of customers registered in the database, I made a page where displays all the information registered in the database, more would like to hide all content by default and only show when it is clicked on the name of the user registered in the database, more the problem I am having is that when there is more than 1 user registered in the database, displays the name of the 2 users correctly, more when I click to display the data of the second user, shows only the first that was registered, regardless if I click on 2° or 3° user, displays only the data of the first of the list, already tried to separate more I am not getting!

Take a look at my view.php

// definições de host, database, usuário e senha
$host = "localhost";
$db   = "banco";
$user = "root";
$pass = "adm2020";
// conecta ao banco de dados
$con = mysql_pconnect($host, $user, $pass) or trigger_error(mysql_error(),E_USER_ERROR);
// seleciona a base de dados em que vamos trabalhar
mysql_select_db($db, $con);
// cria a instrução SQL que vai selecionar os dados
$query = sprintf("SELECT id, nome, fone, login, senha, data, endereco, cpf FROM clientes");
// executa a query
$dados = mysql_query($query, $con) or die(mysql_error());
// transforma os dados em um array
$linha = mysql_fetch_assoc($dados);
// calcula quantos dados retornaram
$total = mysql_num_rows($dados);
?>
<script>
function Mudarestado(el) {
  var display = document.getElementById(el).style.display;
  if (display == "none")
    document.getElementById(el).style.display = 'block';
  else
    document.getElementById(el).style.display = 'none';
}</script>
<html>
    <head>
    <title>Exemplo</title>
</head>
<body>
<?php
    // se o número de resultados for maior que zero, mostra os dados
    if($total > 0) {
        // inicia o loop que vai mostrar todos os dados
        do {
?>
        <center><p>Cliente: <button onclick="Mudarestado('minhaDiv')"><?=$linha['nome']?></button>
        <div id="minhaDiv" style="display:none"> <BR>ID: <?=$linha['id']?><br>Login: <?=$linha['login']?><br>Senha: <?=$linha['senha']?><br>Endereço: <?=$linha['endereco']?><br>Data: <?=$linha['data']?><br>Fone: <?=$linha['fone']?></p></div></center>
        
<?php

        // finaliza o loop que vai mostrar os dados
        }while($linha = mysql_fetch_assoc($dados));
    // fim do if
    }
?>
</body>
</html>
<?php
// tira o resultado da busca da memória
mysql_free_result($dados);
?>
php javascript html database

2 answers

1

Javascript and other libraries are optimized to work on the assumption that Ids are unique. Any work that javascript has to do will be done in the first id to find, regardless of how many elements they have on the page with the same id.

See the following example

function mostrarTexto(el) {
     var texto = document.getElementById(el).innerText;
     console.log(texto);
}
<div id="minhaDiv" onclick="mostrarTexto('minhaDiv')">Clique-me, sou a primeira div</div>
<div id="minhaDiv" onclick="mostrarTexto('minhaDiv')">Clique-me, sou a segunda div</div>
<div id="minhaDiv" onclick="mostrarTexto('minhaDiv')">Clique-me, sou a terceira div</div>

Therefore, in your application, the same thing happens, only the data of the first user will be shown since all the divs are being created with even id, <div id="minhaDiv".

The solution passes by entering a variable that at each loop iteration do while is incremented and concatenated to both the id of the Divs <div id="minhaDiv<?=$i?> as to the button function parameter Mudarestado('minhaDiv<?=$i?>').

Part of the.php view that modifications were made

<?php
    // se o número de resultados for maior que zero, mostra os dados
    if($total > 0) {
        // inicia o loop que vai mostrar todos os dados
        $i=1; //INICIA CONTADOR
        do {
?>
        <center><p>Cliente: <button onclick="Mudarestado('minhaDiv<?=$i?>')"><?=$linha['nome']?></button>
        <div id="minhaDiv<?=$i?>" style="display:none"> <BR>ID: <?=$linha['id']?><br>Nome: <?=$linha['nome']?><br>Sobrenome: <?=$linha['sobrenome']?><br>Email: <?=$linha['email']?><br>Senha: <?=$linha['senha']?><br>Nivel Acesso: <?=$linha['nivelacesso']?></p></div></center>
        
<?php
         $i++;//INCREMENTA CONTADOR
        // finaliza o loop que vai mostrar os dados
        }while($linha = mysqli_fetch_assoc($dados));
    // fim do if
    }
?>

Example of expected result

function Mudarestado(el) {
  var display = document.getElementById(el).style.display;
  if (display == "none")
    document.getElementById(el).style.display = 'block';
  else
    document.getElementById(el).style.display = 'none';
}
<p>Cliente: <button onclick="Mudarestado('minhaDiv1')">Jagunço</button>
        <div id="minhaDiv1" style="display:none"> <BR>ID: 53<br>Nome: Jagunço<br>Sobrenome: prado<br>Email: [email protected]<br>Senha: 11qqaazz<br>Nivel Acesso: basico</p></div>
        
<p>Cliente: <button onclick="Mudarestado('minhaDiv2')">Aparecida</button>
        <div id="minhaDiv2" style="display:none"> <BR>ID: 52<br>Nome: Aparecida<br>Sobrenome: Silva<br>Email: [email protected]<br>Senha: 11qqaazz<br>Nivel Acesso: basico</p></div>
        
<p>Cliente: <button onclick="Mudarestado('minhaDiv3')">Emme</button>
        <div id="minhaDiv3" style="display:none"> <BR>ID: 51<br>Nome: Emme<br>Sobrenome: Flaming<br>Email: [email protected]<br>Senha: zxcvbnmnb<br>Nivel Acesso: admin</p></div>

  • From the look of it, I think there’s something wrong on line 49

  • I edited the answer so there is no doubt as to the placement of the variable $i

-1

Look how it turned out

// definições de host, database, usuário e senha
$host = "localhost";
$db   = "banco";
$user = "root";
$pass = "adm2020";
// conecta ao banco de dados
$con = mysql_pconnect($host, $user, $pass) or trigger_error(mysql_error(),E_USER_ERROR);
// seleciona a base de dados em que vamos trabalhar
mysql_select_db($db, $con);
// cria a instrução SQL que vai selecionar os dados
$query = sprintf("SELECT id, nome, fone, login, senha, data, endereco, cpf FROM clientes");
// executa a query
$dados = mysql_query($query, $con) or die(mysql_error());
// transforma os dados em um array
$linha = mysql_fetch_assoc($dados);
// calcula quantos dados retornaram
$total = mysql_num_rows($dados);
?>
<script>

function Mudarestado(el) {
  var display = document.getElementById(el).style.display;
  if (display == "none")
    document.getElementById(el).style.display = 'block';
  else
    document.getElementById(el).style.display = 'none';
}
   $i=1; //INICIA CONTADOR
    do {}

</script>
<html>
    <head>
    <title>Exemplo</title>
</head>
<body>
<?php
    // se o número de resultados for maior que zero, mostra os dados
    
    if($total > 0) {
        // inicia o loop que vai mostrar todos os dados
        $i=1; //INICIA CONTADOR
        do {
?>
        <center><p>Cliente: <button onClick="Mudarestado('minhaDiv<?=$i?>')"><?=$linha['nome']?></button><br>
        <div id="minhaDiv<?=$i?>" style="display:none"> <BR>ID: <?=$linha['id']?><br>Login: <?=$linha['login']?><br>Senha: <?=$linha['senha']?><br>Endereço: <?=$linha['endereco']?><br>Data: <?=$linha['data']?><br>Fone: <?=$linha['fone']?></p></div></center>
        
<?php

     $i++;//INCREMENTA CONTADOR
    // finaliza o loop que vai mostrar os dados
    }while($linha = mysql_fetch_assoc($dados));
    // fim do if
    }
?>
</body>
</html>
<?php
// tira o resultado da busca da memória
mysql_free_result($dados);
?>```

  • I corrected this code you posted, you had put twice $i++;//INCREMENT COUNTER and forgot to put $i=1; //START COUNTER in the place I showed in my answer

  • This $i=1; //COUNTER START, Stays inside the script changestate? if possible you could send the whole code yourself?

  • Oh yes, now I consequence, I had not seen that I had put twice the increment counter! I thank you for the help, Saved my day :)

  • Great, I edited my answer, it was clearer, you can withdraw your answer here and mark mine as accepted, see how in https://i.stack.Imgur.com/Ogbxr.png

Browser other questions tagged php javascript html database

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