0

I there everyone.

I've been wondering if someone could help to glue up my broken head with this one.

I've got some "labels" which show up, dynamicaly, the data coming from mySql through PHP. In those labels I've got 4 buttons for uploading an image, deleting the respective entry, editing and view the entry with its respective ID.

However, i've trying with jQuery to add some "on the fly" features, in other words, for example, if I click in "view" button, it would only show that specific ID data without going to another page (that would be to easy :D), but by showing an hidden DIV with that content.

But it has some flaws, because, if I click that button, it shows all the divs to all the records which I don't want.

Here's the jQuery code:

$(document).ready(function() {
 // hides the slickbox as soon as the DOM is ready
  $('div.contentor_visualiza').hide();
 // shows the slickbox on clicking the noted link  

 
 // toggles the slickbox on clicking the noted link  
  $('div.visualiza').click(function() {
    $('div.contentor_visualiza').toggle(200);
    return false;
  });
});

AND THE HTML CODE

<div class="contentor_records">


		<?php 

		
		$sentence = "SELECT ID,titulo,descricao,imagem FROM $table ";
		$query = mysql_query($sentence);
		if(!$query)
		{
			echo "Erro ao executar a query".mysql_error();
		}
		while ($row = mysql_fetch_array($query)){
		
		$titulo=$row['titulo'];
		$id=$row['ID'];
		$descricao = $row['descricao'];
		$imagem=$row['imagem'];
		
		echo'<div class="etiquetas">';

		echo '<div class="tit_etiq">';
		
		
				echo $titulo;


		echo'</div>';
		
		echo'<div class="botoes_comando">
			
			<a href="#"><div class="visualiza" id="visualiza"></div></a>
			<a href="view.php?id='.$id.'"><div class="edita"></div></a>
			<a href="../crud/delete.php?id='.$id.'&mod='.$table.'"><div class="elimina" id="delete"></div></a>
			<a href="../upload/upload_crop.php?id='.$id.'&mod='.$table.'"><div class="up_imagem"></div></a>
		</div>';

		echo'</div>
		<div class="contentor_visualiza" id="contentor_visualiza'.$id.'">

		<?php $table = "content_empresa";?>

	<div class="insert">
		<form name="edita_records" method="POST" action="../crud/insert.php?mod=<?php echo $table ?>">
			<textarea class="area_titulo_adic" name="titulo_emp">';
			
			echo $titulo;
			
			echo'</textarea>
			<textarea class="area_visualiza" name="content_emp">';
			echo $descricao;
			echo '</textarea>
			
		
			<div class="buttons">
				
				<input type="submit" name="inserir" class="positive" value="Guardar">
					<img src="../gfx/guardar.png" alt=""/> 
				</input>
				
			</div>
	</form>
</div>

</div>';

}
echo '</div>';

?>

</div>

Glad for all the help possible.

Cheers!

2
Contributors
10
Replies
12
Views
6 Years
Discussion Span
Last Post by fantasma
0

Hey, you need to specify wich div you want to show up. By the structure of your HTML I guess this should work:

$('div.visualiza').click(function() {    
    $(this).parent().parent().children('div.contentor_visualiza').toggle(200);    
    return false;  
});

Hope it helps

0

I want to show up, in the case of clicking "View" this div "contentor_visualiza"

Unfortunately your solution didn't work. It does not even show any did...

Thanks for your effort anyway

Edited by fantasma: n/a

0

Sorry, i forgot to one level, try this:

$('div.visualiza').click(function() {    
    $(this).parent().parent().parent().children('div.contentor_visualiza').toggle(200);    
    return false;  
});
0

Here's the code

<div class="contentor_records">





		<div class="etiquetas"><div class="tit_etiq">			asdasdasdasd

			

			</div><div class="botoes_comando">

			

			<a href="#"><div class="visualiza" id="visualiza"></div></a>

			<a href="view.php?id=24"><div class="edita"></div></a>

			<a href="../crud/delete.php?id=24&mod=content_empresa"><div class="elimina" id="delete"></div></a>

			<a href="../upload/upload_crop.php?id=24&mod=content_empresa"><div class="up_imagem"></div></a>

		</div></div>

		<div class="contentor_visualiza" id="contentor_visualiza24">



		<?php $table = "content_empresa";?>



	<div class="insert">

		<form name="edita_records" method="POST" action="../crud/insert.php?mod=<?php echo $table ?>">

			<textarea class="area_titulo_adic" name="titulo_emp">			asdasdasdasd

			

			</textarea>

			<textarea class="area_visualiza" name="content_emp"><p>asdasdasdasdasdasdas</p>			

			</textarea>

			

		

			<div class="buttons">

				

				<input type="submit" name="inserir" class="positive" value="Guardar">

					<img src="../gfx/guardar.png" alt=""/> 

				</input>

				

			</div>

	</form>

</div>



</div><div class="etiquetas"><div class="tit_etiq">Introdução Empresa

			

</div><div class="botoes_comando">

			

			<a href="#"><div class="visualiza" id="visualiza"></div></a>

			<a href="view.php?id=11"><div class="edita"></div></a>

			<a href="../crud/delete.php?id=11&mod=content_empresa"><div class="elimina" id="delete"></div></a>

			<a href="../upload/upload_crop.php?id=11&mod=content_empresa"><div class="up_imagem"></div></a>

		</div></div>

		<div class="contentor_visualiza" id="contentor_visualiza11">



		<?php $table = "content_empresa";?>



	<div class="insert">

		<form name="edita_records" method="POST" action="../crud/insert.php?mod=<?php echo $table ?>">

			<textarea class="area_titulo_adic" name="titulo_emp">Introdução Empresa

			

</textarea>

			<textarea class="area_visualiza" name="content_emp">Somos uma empresa que se dedica à imagem no sentido lato da palavra, desenvolvendo projectos de design gráfico, interiores, industrial e multimédia.

<br><br>

A função da Artzende é materializar as ideias, apresentar soluções, filosofias de comunicação, espaços funcionais e estéticos, sistemas industriais eficientes, rentáveis e seguros.			

<br><br>

Temos como filosofia <i>"criado pelo homem, para pessoas"</i> e é neste sentido que trabalhamos em todos os nossos projectos.			</textarea>

			

		

			<div class="buttons">

				

				<input type="submit" name="inserir" class="positive" value="Guardar">

					<img src="../gfx/guardar.png" alt=""/> 

				</input>

				

			</div>

	</form>

</div>



</div></div>

</div>
0

Hey, there you go:

$(this).parents('div.etiquetas').next('div.contentor_visualiza').toggle(200);

This works, but i recommend you to change your HTML structure.

Actual: <etiquetas> <botoes_comando/> </etiquetas> <contentor_visualiza/>...

For what you wanna do, it should be: <etiquetas> <botoes_comando/> <contentor_visualiza/> </etiquetas>...

and then you use:

$(this).parents('div.etiquetas').children('div.contentor_visualiza').toggle(200);

Edited by AleMonteiro: code ajust

Votes + Comments
Solved my jQuery uneasy problem! Thanks!
0

thank you it works! And thank you for your advice, will implement rigth away.

Added reputation.

Cheers mate ;)

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.