Toggle javascript

joaocasta · October 5, 2012 at 09:42 AM

Boas tenho aqui este código que quero que me esconda e que me mostre sempre que carregar no tipo ou no id desse mesmo produto... por definição está escondido

<?php
include "config.php";
session_start();

if (!isset($_GET['id']) || !isset($_GET['tipo']) || !isset($_GET['marca']))
{
 header("Location: index.php");
 die();
}

$id = (int)$_GET['id'];
$tipo = $_GET['tipo'];
$marca = $_GET['marca'];

switch ($tipo)
{
case 'tabaco':
$sql = "
SELECT tabaco.id AS ID,
   tabaco.tabaco AS Quantidade,
   tabaco.id_utilizador AS Utilizador,
   tabaco_select.tabaco_marca AS Marca
 FROM tabaco INNER JOIN tabaco_select ON tabaco.id_referente_tabaco = tabaco_select.id
WHERE tabaco_select.tabaco_marca LIKE '$marca'
  AND tabaco.id_utilizador = '".$_SESSION['id']."'";
break;
case 'quilometros':
$sql = "
SELECT quilometros.id AS ID,
   quilometros.quilometros_ AS Quantidade,
   quilometros.id_utilizador AS Utilizador,
   quilometros_select.quilometros AS Marca
 FROM quilometros INNER JOIN quilometros_select ON quilometros.id_referente_quilometros = quilometros_select.id
WHERE quilometros_select.quilometros LIKE '$marca'
  AND quilometros.id_utilizador = '".$_SESSION['id']."'";
break;
case 'bebidas':
$sql = "
SELECT bebidas.id AS ID,
   bebidas.bebidas_ AS Quantidade,
   bebidas.id_utilizador AS Utilizador,
   bebidas_select.bebidas AS Marca
 FROM bebidas INNER JOIN bebidas_select ON bebidas.id_referente_bebidas = bebidas_select.id
WHERE bebidas_select.bebidas LIKE '$marca'
  AND bebidas.id_utilizador = '".$_SESSION['id']."'";
break;
case 'electricidade':
$sql = "
SELECT electricidade.id AS ID,
   electricidade.electricidade AS Quantidade,
 electricidade.id_utilizador AS Utilizador,
   electricidade_select.electricidade_empresa AS Marca
 FROM electricidade INNER JOIN electricidade_select ON electricidade.id_referente_electricidade = electricidade_select.id
WHERE electricidade_select.electricidade_empresa LIKE '$marca'
  AND electricidade.id_utilizador = '".$_SESSION['id']."'";
break;
case 'combustiveis':
$sql = "
SELECT combustiveis.id AS ID,
   combustiveis.combustiveis AS Quantidade,
 combustiveis.id_utilizador AS Utilizador,
   combustiveis_select.combustiveis_marca AS Marca
 FROM combustiveis INNER JOIN combustiveis_select ON combustiveis.id_referente_combustiveis = combustiveis_select.id
WHERE combustiveis_select.combustiveis_marca LIKE '$marca'
  AND combustiveis.id_utilizador = '".$_SESSION['id']."'";
break;
default:
header("Location: index.php");
die("");
break;
}

if (($rs = mysql_query($sql)) === false)
{
 die("Erro de SQL : $sql");
}

if (mysql_num_rows($rs) == 0)
{
 header("Location: index.php");
 die();
}

while ($row = mysql_fetch_assoc($rs)) {
 echo "<button>{$row['ID']} - {$tipo} - {$row['Quantidade']} - {$row['Utilizador']} - {$row['Marca']}</button>";
 ?>
<!DOCTYPE html>
<html>
<head>
 <style>
p { background:#dad;
font-weight:bold;
font-size:16px; }
pa { background:#dad;
font-weight:bold;
font-size:16px; }
</style>
 <script src="http://code.jquery.com/jquery-latest.js%22></script>
</head>
<body>

<div>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
 <table>
 <tr>
 <td align="right">
 <label>Tipo:<label>
 </td>
 <td align="right">
 <input type="text" name="txtName" value="<?php echo $tipo; ?>" id="txtName" /><br />
 </td>
 </tr>
 <tr>
 <td align="right">
 <label>Quantidade:</label>
 </td>
 <td align="right">
 <input type="text" name="txtName" value="<?php echo $row['Quantidade'] . " Litros"; ?>" id="txtName" /><br />
 </td>
 </tr>
 <tr>
 <td align="right">
 <label>Marca:</label>
 </td>
 <td align="right">
 <input type="text" name="txtName" value="<?php echo $row['Marca']; ?>" id="txtName" /><br />
 </td>
 <tr>
 <td align="right">
 <label>Username:</label>
 </td>
 <td align="right">
 <input type="text" name="txtName" value="<?php echo $_SESSION['username']; ?>" id="txtName" readonly="readonly" />
 </td>
 </tr>
 </table>
 </form>
</div>
<script>
$("button").click(function () {
$("div").slideToggle(500);
});	
</script>
<script>
$("button").click(function () {
$("div").slideToggle(500);
});	
</script>
</body>
</html>
<?php
}
?>

Só que sempre que carrego no botão aquilo sobe e desce. nao fica só escondido ou só á mostra.

Obrigado.

HappyHippyHippo · October 5, 2012 at 10:20 AM

se percebo bem, pretendes que o espaço onde amostra ou não a informação esteja sempre do mesmo tamanho e não varie dependendo se a informação está visível ou não.

o problema com o slideToggle é que estás a alterar a altura do div durente um X tempo até ficar a 0% ou a 100%. o que leva a página a se adaptar à mudança on the fly.

para resolver este problema, basta fazer com que o elemento que estás a usar para apresentar a informação (o que será escondido) esteja dentro de um outro ao qual forçes a sua altura. deste modo o elemento interno pode mudar de tamanho mas todo o layout externo não é alterado.

joaocasta · October 5, 2012 at 10:42 AM

sim, mas quando clico no botão ele mostra e esconde, não fica ali só a fazer o que devia, faz as duas coisas.

HappyHippyHippo · October 5, 2012 at 11:04 AM

isso é porque tens duas vezes :

<script>
$("button").click(function () {
$("div").slideToggle(500);
});    
</script>

joaocasta · October 5, 2012 at 11:18 AM

mas eu quero que feche 1 de cada vez e não os dois que aqui tenho.

HappyHippyHippo · October 5, 2012 at 11:34 AM

mas eu quero que feche 1 de cada vez e não os dois que aqui tenho.

???

tens somente 1 div, e mesmo que tivesses 2, o teu selector é para divs. por outras palavras, não estas a expecificar qual o elemento exacto que queres aplicar a função

joaocasta · October 5, 2012 at 11:36 AM

entao como poderei fazer?

HappyHippyHippo · October 5, 2012 at 11:54 AM

while ($row = mysql_fetch_assoc($rs)) {
//..
?>

<button id="button_rec<?php echo $row['ID']; ?>">
   <?php echo "{$row['ID']} - {$tipo} - {$row['Quantidade']} - {$row['Utilizador']} - {$row['Marca']}"; ?>
</button>

<div id="div_rec<?php echo $row['ID']; ?>">
</div>
<script>
$("button_rec<?php echo $row['ID']; ?>").click(function () {
$("div_rec<?php echo $row['ID']; ?>").slideToggle(500);
});    
</script>

<?php
}

ps : nem vou comentár o enfiar o <!DOCTYPE> a afins dentro de um ciclo ...

joaocasta · October 5, 2012 at 12:07 PM

o button nao funcionou.

HappyHippyHippo · October 5, 2012 at 12:22 PM

erro meu :

$("#button_rec<?php echo $row['ID']; ?>").click(function () {
$("#div_rec<?php echo $row['ID']; ?>").slideToggle(500);
});

falta os #'s no selector

joaocasta · October 5, 2012 at 12:26 PM

mesmo assim está algo mal, não se parece com um botão nem faz nada....

Não deve ser no script.

PS: a div nao aparece no codigo do browser

Edited October 5, 2012 at 12:28 PM by joaocasta

HappyHippyHippo · October 5, 2012 at 12:30 PM

apresenta o código que tens agora

joaocasta · October 5, 2012 at 12:31 PM


<?php
include "config.php";
session_start();

if (!isset($_GET['id']) || !isset($_GET['tipo']) || !isset($_GET['marca']))
{
 header("Location: index.php");
 die();
}

$id = (int)$_GET['id'];
$tipo = $_GET['tipo'];
$marca = $_GET['marca'];

switch ($tipo)
{
case 'tabaco':
$sql = "
SELECT tabaco.id AS ID,
   tabaco.tabaco AS Quantidade,
   tabaco.id_utilizador AS Utilizador,
   tabaco_select.tabaco_marca AS Marca
 FROM tabaco INNER JOIN tabaco_select ON tabaco.id_referente_tabaco = tabaco_select.id
WHERE tabaco_select.tabaco_marca LIKE '$marca'
  AND tabaco.id_utilizador = '".$_SESSION['id']."'";
break;
case 'quilometros':
$sql = "
SELECT quilometros.id AS ID,
   quilometros.quilometros_ AS Quantidade,
   quilometros.id_utilizador AS Utilizador,
   quilometros_select.quilometros AS Marca
 FROM quilometros INNER JOIN quilometros_select ON quilometros.id_referente_quilometros = quilometros_select.id
WHERE quilometros_select.quilometros LIKE '$marca'
  AND quilometros.id_utilizador = '".$_SESSION['id']."'";
break;
case 'bebidas':
$sql = "
SELECT bebidas.id AS ID,
   bebidas.bebidas_ AS Quantidade,
   bebidas.id_utilizador AS Utilizador,
   bebidas_select.bebidas AS Marca
 FROM bebidas INNER JOIN bebidas_select ON bebidas.id_referente_bebidas = bebidas_select.id
WHERE bebidas_select.bebidas LIKE '$marca'
  AND bebidas.id_utilizador = '".$_SESSION['id']."'";
break;
case 'electricidade':
$sql = "
SELECT electricidade.id AS ID,
   electricidade.electricidade AS Quantidade,
 electricidade.id_utilizador AS Utilizador,
   electricidade_select.electricidade_empresa AS Marca
 FROM electricidade INNER JOIN electricidade_select ON electricidade.id_referente_electricidade = electricidade_select.id
WHERE electricidade_select.electricidade_empresa LIKE '$marca'
  AND electricidade.id_utilizador = '".$_SESSION['id']."'";
break;
case 'combustiveis':
$sql = "
SELECT combustiveis.id AS ID,
   combustiveis.combustiveis AS Quantidade,
 combustiveis.id_utilizador AS Utilizador,
   combustiveis_select.combustiveis_marca AS Marca
 FROM combustiveis INNER JOIN combustiveis_select ON combustiveis.id_referente_combustiveis = combustiveis_select.id
WHERE combustiveis_select.combustiveis_marca LIKE '$marca'
  AND combustiveis.id_utilizador = '".$_SESSION['id']."'";
break;
default:
header("Location: index.php");
die("");
break;
}

if (($rs = mysql_query($sql)) === false)
{
 die("Erro de SQL : $sql");
}

if (mysql_num_rows($rs) == 0)
{
 header("Location: index.php");
 die();
}

while ($row = mysql_fetch_assoc($rs)) {

?>
 <button id="button_rec<?php echo $row['ID']; ?>">
<?php echo "{$row['ID']} - {$tipo} - {$row['Quantidade']} - {$row['Utilizador']} - {$row['Marca']}"; ?>
</button>
<!DOCTYPE html>
<html>
<head>
 <style>
p { background:#dad;
font-weight:bold;
font-size:16px; }
pa { background:#dad;
font-weight:bold;
font-size:16px; }
</style>
 <script src="http://code.jquery.com/jquery-latest.js%22></script>
</head>
<body>

<div id="div_rec<?php echo $row['ID']; ?>">
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
 <table>
 <tr>
 <td align="right">
 <label>Tipo:<label>
 </td>
 <td align="right">
 <input type="text" name="txtName" value="<?php echo $tipo; ?>" id="txtName" /><br />
 </td>
 </tr>
 <tr>
 <td align="right">
 <label>Quantidade:</label>
 </td>
 <td align="right">
 <input type="text" name="txtName" value="<?php echo $row['Quantidade'] . " Litros"; ?>" id="txtName" /><br />
 </td>
 </tr>
 <tr>
 <td align="right">
 <label>Marca:</label>
 </td>
 <td align="right">
 <input type="text" name="txtName" value="<?php echo $row['Marca']; ?>" id="txtName" /><br />
 </td>
 <tr>
 <td align="right">
 <label>Username:</label>
 </td>
 <td align="right">
 <input type="text" name="txtName" value="<?php echo $_SESSION['username']; ?>" id="txtName" readonly="readonly" />
 </td>
 </tr>
 </table>
 </form>
</div>
<script>
$("#button_rec<?php echo $row['ID']; ?>").click(function () {
$("#div_rec<?php echo $row['ID']; ?>").slideToggle(500);
});	
</script>
</body>
</html>
<?php
}
?>

Edited October 5, 2012 at 12:31 PM by joaocasta

taviroquai · October 5, 2012 at 04:42 PM

@joaocasta

Tens 1 página html completa dentro do ciclo while... retira para fora do ciclo senão se tiveres N registos vão aparecer N páginas...

joaocasta · October 5, 2012 at 08:40 PM

nao resolveu.

hoje cheguei ao pc e deu. se tirar para fora do ciclo a pagina em html ja nao funciona.

alguma dica?

Edited October 6, 2012 at 09:48 AM by joaocasta

Sign In

Toggle javascript

Recommended Posts

joaocasta

HappyHippyHippo

joaocasta

HappyHippyHippo

joaocasta

HappyHippyHippo

joaocasta

HappyHippyHippo

joaocasta

HappyHippyHippo

joaocasta

HappyHippyHippo

joaocasta

taviroquai

joaocasta

Create an account or sign in to comment

Create an account

Sign in

Home

Activity

Revista PROGRAMAR

Important Information