1

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;
 ?>
3
  • <input type="button" id="n" no es correcto. todos los controles "si usan el atributo ID" , 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. Commented el 27 mar. 2018 a las 16:58
  • Para obtener los valores del elemento mismo se utiliza $(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){
    – cignius
    Commented el 27 mar. 2018 a las 16:58
  • Gracias por los consejos lo tomare en cuenta Commented el 27 mar. 2018 a las 17:31

2 respuestas 2

3

Yo hago algo similar con JQuery tengo en una tabla la relación de hallazgos creados y al momento de dar doble click sobre algunos de ellos me muestra su información detallada. Utilizo el siguiente código espero te pueda ayudar.

    $("#TblMisHallazgos").on("dblclick", "tr", function () {
        var ID_Hallazgo = $(this).find("td").eq(0).html();
        //...introducir el código aquí..
        });
    });

Este codigo me ayuda a identificar a que "tr" hice doble click con la funcion find() busco las celdas "td" y la funcion eq() me retorna el valor que necesito indicando el indice de la celda que busco en este caso ocupo lo que este en la primer celda.

Saludos !!

2
  • Gracias por tu respuesta, me ayudo demasiado y logre realizarlo de la manera en que me comentas. Commented el 27 mar. 2018 a las 17:31
  • De nada, que bueno que te sirvió. Saludos ! Commented el 27 mar. 2018 a las 18:11
1

Ya que la lista de INPUT genera por sí sola una colección, puedes acceder a ella no sólo por el id de cada elemento (que ya que los id deben ser únicos, te tocaría hacer un bucle), sino por características compartidas, como el nombre o su clase. JQuery te permite acceder así a todos los elementos de dicha colección. Así, tomando tus input del inicio:

  foreach($conn->query($sqlb) as $rowb){  

      echo '<tr>
                <td "><input type="button" name="userId[]" class="tdID n'.$i.' cssUserId" 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>';
    }

Luego accedes a la colección de elementos que comparten la clase cssUserId:

$(".cssUserId").on("click", function() { alert($(this).val()); });

Este ejemplo es para que veas que usando este método es mucho más rápido, menos código, y encima con $(this) accedes a todos los atributos del elemento de clase cssUserId.

También podrías usar, en vez de la clase css como agrupador, el atributo name de los input, pero ahí el código JQuery variaría un poco (fíjate que en el código php de arriba, yo agregué el atributo name al input que contiene el ID de Usuario):

$("input[name='userId[]']").on("click", function() { alert($(this).val()); });

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.