Incluir codigo jquery dentro do codigo php

tatiana schyneider · Abril 5, 2011

Oi pessoal,

Estou quebrando a cabeça com um problema aqui que e o seguinte:

Eu tenho uma tela em php que mostra a lista de alguns registros, quando eu escolho algum destes registros (clicando) ele me abre uma pagina a parte com os dados deste registro. Ate ai, beleza.

Problema que par encurtar o caminho, preciso que ao clicar em algum destes registros, em vez dele abrir outra pagina, a tela role para baixo e os dados do registro apareça abaixo da linha que dei click( slideDown do jquery)

Voces tem alguma ideia de como fazer isso?

abaixo segue o codigo da pagina onde mostra os registros:

<?php 

include 'functions.php'; 
require 'config.php'; 

makeHeader('Agenda','agenda'); 
if(isset($_GET["treinamento"])){ 
$treinamento = $_GET["treinamento"]; 
$query = 'SELECT * FROM '.TBL_treinamentoS.' WHERE id='.$treinamento.' AND visivel=1 LIMIT 1;'; 
$query = mysql_query($query,$con); 
$dados = mysql_fetch_assoc($query); 

if($dados){ 
echo ' 
<div class="evento"> 
<h2>treinamento - '.utf8_encode($dados["nome"]).' '; 

if(isset($_SESSION["logado"]) && $_SESSION["logado"] == TRUE){ 
echo '(Cód: '.$dados["id"].') <a href="edit.php?cod='.$dados["id"].'"><img src="img/edit.png" alt="Editar treinamento" title="Editar treinamento" width="16" height="16"/></a>'; 
} 

echo '</h2> 

<div class="data inicio treinamento-item"> 
<h3>Início</h3> 
<p>'.convertSqlDate($dados["data_ini"]).' às '.convertSqlTime($dados["hora_ini"]).'</p> 
</div> 

<div class="data fim treinamento-item"> 
<h3>Término</h3> 
<p>'.convertSqlDate($dados["data_fim"]).' às '.convertSqlTime($dados["hora_fim"]).'</p> 
</div> 

<div class="local treinamento-item"> 
<h3>Local</h3> 
<p>'.nl2br(utf8_encode($dados["local"])).'</p> 
</div> 

<div class="local cidade treinamento-item"> 
<h3>Cidade</h3> 
<p>'.utf8_encode($dados["cidade"]).'</p> 
</div> 

<div class="informacoes treinamento-item clear"> 
<h3>Informações</h3> 
<p>'.nl2br(utf8_encode($dados["info"])).'</p> 
</div> 
</div> 
<div class="legenda">'; 
if($dados["realizado"]){ 
echo '<p><img src="img/done.png" alt="realizado" width="16" height="16"> treinamento já realizado</p>'; 
}else{ 
echo '<p><img src="img/undone.png" alt="Não realizado" width="16" height="16"> treinamento não realizado</p>'; 
} 
echo '</div>'; 
}else{ 
echo '<h2>Nenhum treinamento Encontrado</h2>'; 
} 
echo '<p class="voltar"><strong><a href="agenda.php">Voltar</a></strong></p>'; 

}else{ 
echo '<h2>Agenda</h2> 
<p>Confira aqui nossa programação.<br>Inscreva-se diretamente com o responsável pelo evento ou <a href="contato.php">fale conosco</a>.</p> 
<table border="0"> 
<thead> 
<tr> 
<th>treinamento</th> 
<th>Cidade</th> 
<th class="detalhes">Detalhes</th> 
<th class="status">Estado</th>'; 
if(isset($_SESSION["logado"]) && $_SESSION["logado"] == TRUE){ 
echo '<th class="editar">Editar</th>'; 
} 
echo '</tr> 
</thead> 
<tbody>'; 
$query = 'SELECT id, nome, cidade, realizado FROM '.TBL_treinamentoS.' WHERE visivel=1 ORDER BY id DESC;'; 
$query = mysql_query($query, $con); 
$impar = TRUE; 
while($dados = mysql_fetch_assoc($query)){ 
echo '<tr '; 
if($impar){ 
echo 'class="tbl_impar"'; 
}else{ 
echo 'class="tbl_par"'; 
} 
echo '>'; 
echo '<td>'.utf8_encode($dados["nome"]).'</td>'; 
echo '<td>'.utf8_encode($dados["cidade"]).'</td>'; 
echo '<td class="detalhes"><a href="?treinamento='.$dados["id"].'">Ver Mais Detalhes</a></td>'; 
echo '<td class="status">'; 

if($dados["realizado"]){ 
echo '<img src="img/done.png" alt="realizado" width="16" height="16">'; 
}else{ 
echo '<img src="img/undone.png" alt="Não realizado" width="16" height="16">'; 
} 

echo '</td>'; 
if(isset($_SESSION["logado"]) && $_SESSION["logado"] == TRUE){ 
echo '<td class="editar"><a href="edit.php?cod='.$dados["id"].'"><img src="img/edit.png" alt="Editar treinamento" title="Editar treinamento" width="16" height="16"/></a></td>'; 
} 
echo '</tr>'; 
$impar = !$impar; 
} 

echo ' 
</tbody> 
</table> 

<div class="legenda"> 
<p><img src="img/done.png" alt="realizado" width="16" height="16"> já realizado</p> 
<p><img src="img/undone.png" alt="Não realizado" width="16" height="16"> não realizado</p> 
</div>'; 
} 

makeFooter(); 
?>

Go Back · Abril 5, 2011

você tem a biblioteca do SlideDown ?

E algum exemplo de como se faz ?

lusigmas · Abril 5, 2011

Olá Tatiana,

tenho uma situação parecida e utilizo a função javascript showSpoiler. É fácil e não precisa instalar nada.

a função:

<script type="text/javascript">
function showSpoiler(obj)
   {
   var inner = obj.parentNode.getElementsByTagName("div")[0];
   if (inner.style.display == "none")
       inner.style.display = "";
   else
       inner.style.display = "none";
   }
   </script>

Abraços.

tatiana schyneider · Abril 5, 2011

Ola, obrigada pela resposta !

No caso, quando eu tento incrementar este trecho do codigo ele da erro, preciso de alguma configuracao diferente?

Olá Tatiana,

tenho uma situação parecida e utilizo a função javascript showSpoiler. É fácil e não precisa instalar nada.

a função:
<script type="text/javascript">
function showSpoiler(obj)
   {
   var inner = obj.parentNode.getElementsByTagName("div")[0];
   if (inner.style.display == "none")
       inner.style.display = "";
   else
       inner.style.display = "none";
   }
   </script>
Abraços.

Matheus Tavares · Abril 6, 2011

quando eu tento incrementar este trecho do codigo ele da erro

Que erro? Como você tentou implementar? A princípio era para funcionar.

Especifique melhor, para que possamos te ajudar. :)

tatiana schyneider · Abril 6, 2011

Ola Mateus,

Estava acusando erro na linha do javascript. Coloquei a linha dentro do thead

Agora nao da erro, mas ele nao faz nada, ou seja, eu clico no link e ele abre normalmente outra pagina com os dados.

Ficou assim:

<?php 

include 'functions.php'; 
require 'config.php'; 

makeHeader('Agenda','agenda'); 
if(isset($_GET["treinamento"])){ 
$treinamento = $_GET["treinamento"]; 
$query = 'SELECT * FROM '.TBL_treinamentoS.' WHERE id='.$treinamento.' AND visivel=1 LIMIT 1;'; 
$query = mysql_query($query,$con); 
$dados = mysql_fetch_assoc($query); 

if($dados){ 
echo ' 
<div class="evento"> 
<h2>treinamento - '.utf8_encode($dados["nome"]).' '; 

if(isset($_SESSION["logado"]) && $_SESSION["logado"] == TRUE){ 
echo '(Cód: '.$dados["id"].') <a href="edit.php?cod='.$dados["id"].'"><img src="img/edit.png" alt="Editar treinamento" title="Editar treinamento" width="16" height="16"/></a>'; 
} 

echo '</h2> 

<div class="data inicio treinamento-item"> 
<h3>Início</h3> 
<p>'.convertSqlDate($dados["data_ini"]).' às '.convertSqlTime($dados["hora_ini"]).'</p> 
</div> 

<div class="data fim treinamento-item"> 
<h3>Término</h3> 
<p>'.convertSqlDate($dados["data_fim"]).' às '.convertSqlTime($dados["hora_fim"]).'</p> 
</div> 

<div class="local treinamento-item"> 
<h3>Local</h3> 
<p>'.nl2br(utf8_encode($dados["local"])).'</p> 
</div> 

<div class="local cidade treinamento-item"> 
<h3>Cidade</h3> 
<p>'.utf8_encode($dados["cidade"]).'</p> 
</div> 

<div class="informacoes treinamento-item clear"> 
<h3>Informações</h3> 
<p>'.nl2br(utf8_encode($dados["info"])).'</p> 
</div> 
</div> 
<div class="legenda">'; 
if($dados["realizado"]){ 
echo '<p><img src="img/done.png" alt="realizado" width="16" height="16"> treinamento já realizado</p>'; 
}else{ 
echo '<p><img src="img/undone.png" alt="Não realizado" width="16" height="16"> treinamento não realizado</p>'; 
} 
echo '</div>'; 
}else{ 
echo '<h2>Nenhum treinamento Encontrado</h2>'; 
} 
echo '<p class="voltar"><strong><a href="agenda.php">Voltar</a></strong></p>'; 

}else{ 
echo '<h2>Agenda</h2> 
<p>Confira aqui nossa programação.<br>Inscreva-se diretamente com o responsável pelo evento ou <a href="contato.php">fale conosco</a>.</p> 
<table border="0"> 
<thead> 
<tr> 
<th>treinamento</th> 
<th>Cidade</th> 
<th class="detalhes">Detalhes</th> 
<th class="status">Estado</th>'; 
if(isset($_SESSION["logado"]) && $_SESSION["logado"] == TRUE){ 
echo '<th class="editar">Editar</th>'; 
} 
echo '</tr> 

<script type="text/javascript">
       function showSpoiler(obj)
   {
   var teste = obj.parentNode.getElementsByTagName("div")[0];
   if (teste.style.display == "none")
       teste.style.display = "";
   else
       teste.style.display = "none";
   }
   </script>


  </thead>
     <tbody>';



</thead> 
<tbody>'; 
$query = 'SELECT id, nome, cidade, realizado FROM '.TBL_treinamentoS.' WHERE visivel=1 ORDER BY id DESC;'; 
$query = mysql_query($query, $con); 
$impar = TRUE; 
while($dados = mysql_fetch_assoc($query)){ 
echo '<tr '; 
if($impar){ 
echo 'class="tbl_impar"'; 
}else{ 
echo 'class="tbl_par"'; 
} 
echo '>'; 
echo '<td>'.utf8_encode($dados["nome"]).'</td>'; 
echo '<td>'.utf8_encode($dados["cidade"]).'</td>'; 
echo '<td class="teste"><a href="?treinamento='.$dados["id"].'">Ver Mais Detalhes</a></td>'; 
echo '<td class="status">'; 

if($dados["realizado"]){ 
echo '<img src="img/done.png" alt="realizado" width="16" height="16">'; 
}else{ 
echo '<img src="img/undone.png" alt="Não realizado" width="16" height="16">'; 
} 

echo '</td>'; 
if(isset($_SESSION["logado"]) && $_SESSION["logado"] == TRUE){ 
echo '<td class="editar"><a href="edit.php?cod='.$dados["id"].'"><img src="img/edit.png" alt="Editar treinamento" title="Editar treinamento" width="16" height="16"/></a></td>'; 
} 
echo '</tr>'; 
$impar = !$impar; 
} 

echo ' 
</tbody> 
</table> 

<div class="legenda"> 
<p><img src="img/done.png" alt="realizado" width="16" height="16"> já realizado</p> 
<p><img src="img/undone.png" alt="Não realizado" width="16" height="16"> não realizado</p> 
</div>'; 
} 

makeFooter(); 
?>

ivanferrer · Abril 8, 2011

A melhor forma de fazer isso é usando o jQuery mesmo:

coloque isso nas tags head:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.js"></script>
<script type="text/javascript">
function abrirJanela(id){
doc = document.getElementById(id);
$(doc).slideUp("slow");
}

function fecharJanela(id){
doc = document.getElementById(id);
$(doc).slideDown("slow");
}


</script>

depois se precisar passar a função é simples:

<a href="javascript:abrirJanela('janela');">Abrir Janela</a> | <a href="javascript:fecharJanela('janela');">Fechar Janela</a><br>

<div id="janela" style="width:300px; heigth:300px; border:1px solid #000; padding:6px; margin:auto" >Conteúdo aqui</div>

Ola Mateus,

Estava acusando erro na linha do javascript. Coloquei a linha dentro do thead

Agora nao da erro, mas ele nao faz nada, ou seja, eu clico no link e ele abre normalmente outra pagina com os dados.

Ficou assim:

<?php 

include 'functions.php'; 
require 'config.php'; 

makeHeader('Agenda','agenda'); 
if(isset($_GET["treinamento"])){ 
$treinamento = $_GET["treinamento"]; 
$query = 'SELECT * FROM '.TBL_treinamentoS.' WHERE id='.$treinamento.' AND visivel=1 LIMIT 1;'; 
$query = mysql_query($query,$con); 
$dados = mysql_fetch_assoc($query); 

if($dados){ 
echo ' 
<div class="evento"> 
<h2>treinamento - '.utf8_encode($dados["nome"]).' '; 

if(isset($_SESSION["logado"]) && $_SESSION["logado"] == TRUE){ 
echo '(Cód: '.$dados["id"].') <a href="edit.php?cod='.$dados["id"].'"><img src="img/edit.png" alt="Editar treinamento" title="Editar treinamento" width="16" height="16"/></a>'; 
} 

echo '</h2> 

<div class="data inicio treinamento-item"> 
<h3>Início</h3> 
<p>'.convertSqlDate($dados["data_ini"]).' às '.convertSqlTime($dados["hora_ini"]).'</p> 
</div> 

<div class="data fim treinamento-item"> 
<h3>Término</h3> 
<p>'.convertSqlDate($dados["data_fim"]).' às '.convertSqlTime($dados["hora_fim"]).'</p> 
</div> 

<div class="local treinamento-item"> 
<h3>Local</h3> 
<p>'.nl2br(utf8_encode($dados["local"])).'</p> 
</div> 

<div class="local cidade treinamento-item"> 
<h3>Cidade</h3> 
<p>'.utf8_encode($dados["cidade"]).'</p> 
</div> 

<div class="informacoes treinamento-item clear"> 
<h3>Informações</h3> 
<p>'.nl2br(utf8_encode($dados["info"])).'</p> 
</div> 
</div> 
<div class="legenda">'; 
if($dados["realizado"]){ 
echo '<p><img src="img/done.png" alt="realizado" width="16" height="16"> treinamento já realizado</p>'; 
}else{ 
echo '<p><img src="img/undone.png" alt="Não realizado" width="16" height="16"> treinamento não realizado</p>'; 
} 
echo '</div>'; 
}else{ 
echo '<h2>Nenhum treinamento Encontrado</h2>'; 
} 
echo '<p class="voltar"><strong><a href="agenda.php">Voltar</a></strong></p>'; 

}else{ 
echo '<h2>Agenda</h2> 
<p>Confira aqui nossa programação.<br>Inscreva-se diretamente com o responsável pelo evento ou <a href="contato.php">fale conosco</a>.</p> 
<table border="0"> 
<thead> 
<tr> 
<th>treinamento</th> 
<th>Cidade</th> 
<th class="detalhes">Detalhes</th> 
<th class="status">Estado</th>'; 
if(isset($_SESSION["logado"]) && $_SESSION["logado"] == TRUE){ 
echo '<th class="editar">Editar</th>'; 
} 
echo '</tr> 

<script type="text/javascript">
       function showSpoiler(obj)
   {
   var teste = obj.parentNode.getElementsByTagName("div")[0];
   if (teste.style.display == "none")
       teste.style.display = "";
   else
       teste.style.display = "none";
   }
   </script>


  </thead>
     <tbody>';



</thead> 
<tbody>'; 
$query = 'SELECT id, nome, cidade, realizado FROM '.TBL_treinamentoS.' WHERE visivel=1 ORDER BY id DESC;'; 
$query = mysql_query($query, $con); 
$impar = TRUE; 
while($dados = mysql_fetch_assoc($query)){ 
echo '<tr '; 
if($impar){ 
echo 'class="tbl_impar"'; 
}else{ 
echo 'class="tbl_par"'; 
} 
echo '>'; 
echo '<td>'.utf8_encode($dados["nome"]).'</td>'; 
echo '<td>'.utf8_encode($dados["cidade"]).'</td>'; 
echo '<td class="teste"><a href="?treinamento='.$dados["id"].'">Ver Mais Detalhes</a></td>'; 
echo '<td class="status">'; 

if($dados["realizado"]){ 
echo '<img src="img/done.png" alt="realizado" width="16" height="16">'; 
}else{ 
echo '<img src="img/undone.png" alt="Não realizado" width="16" height="16">'; 
} 

echo '</td>'; 
if(isset($_SESSION["logado"]) && $_SESSION["logado"] == TRUE){ 
echo '<td class="editar"><a href="edit.php?cod='.$dados["id"].'"><img src="img/edit.png" alt="Editar treinamento" title="Editar treinamento" width="16" height="16"/></a></td>'; 
} 
echo '</tr>'; 
$impar = !$impar; 
} 

echo ' 
</tbody> 
</table> 

<div class="legenda"> 
<p><img src="img/done.png" alt="realizado" width="16" height="16"> já realizado</p> 
<p><img src="img/undone.png" alt="Não realizado" width="16" height="16"> não realizado</p> 
</div>'; 
} 

makeFooter(); 
?>

tatiana schyneider · Abril 9, 2011

Ivan,

Obrigada pela ajuda. Esses codigos eu coloco dentro da minha pagina html ou dentro do codigo da pagina PHP?

fabio.aurelio · Abril 11, 2011

Ola Tatiana,

Você conseguiu resolver isso? tenho um problema similar e não consegui.

Grato

tatiana schyneider · Abril 14, 2011

Nao consegui implementar Fabio, alguem mais?

Arquivado

Incluir codigo jquery dentro do codigo php

Recommended Posts

tatiana schyneider 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Go Back 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

lusigmas 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

tatiana schyneider 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Matheus Tavares 167

Compartilhar este post

Link para o post

Compartilhar em outros sites

tatiana schyneider 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

ivanferrer 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

tatiana schyneider 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

fabio.aurelio 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

tatiana schyneider 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante