Estoy tratando de generar un codigo para ciertas consultas dinamicas, el caso especifico es el siguiente, tengo mi pagina users.php, en la cual se tendran los usuarios registrados en un sistema, para esto se hace una busqueda de usuarios de manera dinamica y los pongo en un div como un input cada uno, esto funciona de manera correcta con el siguiente codigo.
Codigo del php en el que se muestra el contenido
<!DOCTYPE html public>
<html>
<div id="users">
<h2>Find User</h2>
<input type="text" id="busqueda" />
<br><br>
<div id="resultado">
<table id="tablesearch">
<tr>
<th>User ID</th>
<th>User Name</th>
</tr>
<?php
$sql = "SELECT * FROM WEBUser";
$i=0;
foreach($conn->query($sql) as $row){
echo '<tr>
<td "><input type="button" class="tdID n'.$i.'" value="'.$row['UserID'].'"</td>
<td "><input type="button" class="tdName n'.$i.'" value="'.$row['UserName'].' '.$row['UserLastName'].'"</td>
</tr>';
$i++;
echo '<input type="button" id="n" value="'.$i.'" hidden>';
}
?>
</table>
</div>
</div>
</html>
JQUERY que realiza la busqueda dinamica en tiempo real de los usuarios
$(document).ready(function(){
var consulta;
//hacemos focus al campo de búsqueda
$("#busqueda").focus();
//comprobamos si se pulsa una tecla
$("#busqueda").keyup(function(e){
//obtenemos el texto introducido en el campo de búsqueda
consulta = $("#busqueda").val();
//hace la búsqueda
$.ajax({
type: "POST",
url: "../buscar.php",
data: "b="+consulta,
dataType: "html",
error: function(){
alert("error petición ajax");
},
success: function(data){
$("#resultado").empty();
$("#resultado").append(data);
}
});
});
});
PHP que genera la busqueda realizada con el jquery
<?php
$buscar = $_POST['b'];
buscar($buscar);
function buscar($b) {
include "connectionMXSLFWEB.php";
if($b != ""){
$sqlb = "SELECT * FROM WEBUser WHERE UserID LIKE '%".$b."%' OR UserName LIKE '%".$b."%' OR UserLastName LIKE '%".$b."%'";
}else{
$sqlb = "SELECT * FROM WEBUser";
}
echo '<table id="tablesearch">';
$i=0;
foreach($conn->query($sqlb) as $rowb){
echo '<tr>
<td "><input type="button" class="tdID n'.$i.'" value="'.$rowb['UserID'].'"</td>
<td "><input type="button" class="tdName n'.$i.'" value="'.$rowb['UserName'].' '.$rowb['UserLastName'].'"</td>
</tr>';
$i++;
echo '<input type="button" id="n" value="'.$i.'" hidden>';
}
echo '</table>';
}
$conn = null;
?>
Mi problema reside en que cuando le de clic en un input generado por la consulta este me muestra los datos que requiero en tiempo real si tener que Cargar la pagina, intente con la funcion click() de jquer pero no se como identificar cada uno de los inputs generados y entonces no sabria cual referirme este es el codigo jquery que quise usar
$(document).ready(function(){
var consulta2;
var j = $("#n").val();
for(var i = 0; i <= j; i++)
{
$(".n").click(function(f){
alert("el valor de jota es " + j);
consulta2 = $(".n"+j).val();
//hace la búsqueda
$.ajax({
type: "POST",
url: "../profile.php",
data: "p="+consulta2,
dataType: "html",
error: function(){
alert("error petición ajax");
},
success: function(data2){
$("#profile").empty();
$("#profile").append(data2);
}
});
});
}
});
Y este el php que realiza la consulta
<?php
$buscar2 = $_POST['p'];
buscar2($buscar2);
function buscar2($p) {
include "connectionMXSLFWEB.php";
$sqlp = "SELECT * FROM WEBUser
JOIN WEBDepartment ON WEBUser.fk_DepartmentID = WEBDepartment.DepartmentID
WHERE UserID = '$p'";
foreach($conn->query($sqlp) as $rowp){
echo '<h3>UserID</h3>'.$rowp['UserID'].'<br><br>
<h3>Name</h3>'.$rowp['UserName'].' '.$rowp['UserLastName'].'<br><br>
<h3>Department</h3>'.$rowp['DepartmentDescription'].'<br><br>
<h3>Title</h3>'.$rowp['UserTitle'].'<br><br>
<h3>Password</h3>'.$rowp['Password'].'<br><br>
<h3>Email</h3>'.$rowp['Email'];
}
}
$conn = null;
?>
<input type="button" id="n"
no es correcto. todos los controles "si usan el atributoID
" , su valor debe ser único. Le recomiendo renombrar las variables a algo mas "claro", porque variables como "i, b, n" no son nada claros en este código.$(this)
asiendo referencia al elemento que estas haciendo clic, en caso de un append la cosa cambia porque son elementos generados live entonces tienes que agrear en tu clic$(document).on('click','.n',function(e){