Variável recupera apenas o valor do primeiro input

[userFeliz 1]

Olá

 

Estou usando ajax para deletar e alterar dados de uma tabela do banco

 

pra passar o id via ajax para um arquivo php(deletar e editar) eu criei um hidden input, porém ele recupera só o id do primeiro input(são vários inputs cada um com um id diferente)

 

 

código inteiro:

<?php
	include('includes/conect.php');
	ini_set('default_charset','UTF-8');
	session_start();
	$idPagina = $_POST['idpagina'];
	$sql = "SELECT * FROM company WHERE ID_user = '$idPagina'";
	$query = $conn->query($sql);
	if(mysqli_num_rows($query) == 0){ ?>
		<div   class="alert alert-warning"  role="alert"><p><h3>Este Usúario não possui nenhuma empresa cadastrada!</h3></p></div>
	<?php
	}else{
		while($post = $query->fetch_assoc()){ ?>

			<div id="empresa" class="col-md-4">
<script type="text/javascript">
	$(document).ready(function(){
	 	 $(".deleteCompany").click(function(){
			var idCompanyDelete = $(".inputIdCompany").val();// id(Recupera apenas o primeiro)
			$.ajax({  
	 	 		
	 	 		   url: "deleteEmpresa.php", 
				   dataType: 'html',
				   data: {id:idCompanyDelete},
				   type: "POST", 
				    success: function(data){
				    	alert(data);
						LoadCompany();

				    },
					error: function(data){
						alert(data);
					}

						  	
			        
			});
			
	 	 });
		 
		 $(".editCompany").click(function(){
			var idCompanyEdit = $(".inputIdCompany").val(); // id(Recupera apenas o primeiro)
			$.ajax({  
	 	 		
	 	 		   url: "editEmpresa.php", 
				   dataType: 'html',
				   data: {id:idCompanyEdit},
				   type: "POST", 
				    success: function(data){
				    	$("#editCompanyContent").html(data);
					},
					error: function(data){
						alert(data);
					}

						  	
			        
			});
	 	 });

	 });
</script>
			<input type="hidden" class="inputIdCompany" value=" <?php echo $post['ID_company'];  ?> " /> //input do ID
				<div class="text" >
						<?php
							if(isset($_SESSION['id']) && $_SESSION['id'] == $idPagina){ 
							?>
								
								<div class="col-md-6">
									<img title="Deletar Empresa" class="deleteCompany" src="images/delete.png"></img>
								</div>
								
								<div class="col-md-6">
									<img title="Editar Empresa" class="editCompany" src="images/edit.png"></img>
								</div>
							
							<?php
							}
						?>
					<div class="col-md-12">
						<h4 id="name_company">
						<?php
							echo $post['name_company'];
						?>
						</h4>
					</div>

					<div class="col-md-12">
						<h4> 
						<?php 
						echo $post['state_company'];
						echo " - ";
						echo $post['city_company'];
						?>
						</h4>
					</div>
				</div>
			</div>
		<?php
		}
	}
	
?>

Uma imagem pra ilustrar melhor:

 

 

Caso eu clique nessa segunda div, ele iria excluir a primeira, pois no JS ele só recebe o ID da primeira

 

Como faço pra recuperar os IDS corretamente?

[userFeliz 1]

Resolvi assim:

		while($post = $query->fetch_assoc()){ ?>
<script type="text/javascript">
	$(document).ready(function(){
	 	 $(".<?php echo $post['ID_company'];  ?>Delete").click(function(){
			var idCompanyDelete = $(".<?php echo $post['ID_company'];  ?>").val();
			$.ajax({  
	 	 		
	 	 		   url: "deleteEmpresa.php", 
				   dataType: 'html',
				   data: {id:idCompanyDelete},
				   type: "POST", 
				    success: function(data){
				    	alert(data);
						LoadCompany();

				    },
					error: function(data){
						alert(data);
					}

						  	
			        
			});
			
	 	 });
		 
		 $(".<?php echo $post['ID_company'];  ?>Edit").click(function(){
			var idCompanyEdit = $(".<?php echo $post['ID_company'];  ?>").val();
			$.ajax({  
	 	 		
	 	 		   url: "editEmpresa.php", 
				   dataType: 'html',
				   data: {id:idCompanyEdit},
				   type: "POST", 
				    success: function(data){
				    	$("#editCompanyContent").html(data);
					},
					error: function(data){
						alert(data);
					}

						  	
			        
			});
	 	 });

	 });
</script>
			<div id="empresa" class="col-md-4">

			<input type="hidden" class="<?php echo $post['ID_company'];  ?>" value="<?php echo $post['ID_company'];  ?>" />
				<div class="text" >
						<?php
							if(isset($_SESSION['id']) && $_SESSION['id'] == $idPagina){ 
							?>
								
								<div class="col-md-6">
									<img title="Deletar Empresa" class="<?php echo $post['ID_company'];?>Delete" src="images/delete.png"></img>
								</div>
								
								<div class="col-md-6">
									<img title="Editar Empresa" class="<?php echo $post['ID_company'];?>Edit" src="images/edit.png"></img>
								</div>
							
							<?php
							}
						?>
					<div class="col-md-12">
						<h4 id="name_company">
						<?php
							echo $post['name_company'];
						?>
						</h4>
					</div>

					<div class="col-md-12">
						<h4> 
						<?php 
						echo $post['state_company'];
						echo " - ";
						echo $post['city_company'];
						?>
						</h4>
					</div>
				</div>
			</div>
		<?php
		}

O problema é que ele gera um codigo JS para cada linha do banco

 

isso n vai ficar mt pesado?

[Rafael R Silva 27]

Cara isso ta uma zona (rsrs)...

 

Da pra fazer de uma maneira muito mais fácil e organizada.

 

Você poderia criar apenas uma função de click com baseado em classe com isso você otimiza seu codigo;

 

Primeiro retira essa função de click do while pois você está criando uma para cada empresa listada.

 

A função do click poderia ser assim utilizando o atributo data ao invés de criar um input;

 $(".btnDeletaEmpresa").click(function(){
var idCompanyDelete =   $(".btnDeletaEmpresa").data( "empresa" );
			$.ajax({  
	 	 		
	 	 		   url: "deleteEmpresa.php", 
				   dataType: 'html',
				   data: {id:idCompanyDelete},
				   type: "POST", 
				    success: function(data){
				    	alert(data);
						LoadCompany();

				    },
					error: function(data){
						alert(data);
					}

						  	
			        
			});
			
	 	 });

No while que você gera a lista de empresas

para funcionar o botão deletar seguindo seu exemplo deve ser assim:

 

<img title="Deletar Empresa" class="btnDeletaEmpresa" data-empresa"<?php echo $post['ID_company'];?>" src="images/delete.png"></img>

 

O certo seria colocar essa ação em uma tag <a> ou <button>

 

isso vai reduzir 80% do seu codigo e vai aumentar o desempenho!

 

 

Espero ter ajudado!