Identify Click of Inputs dynamically created by means of a query

Question

Identify Click of Inputs dynamically created by means of a query

Navigation

#1 by (3 votes)
#2 by (1 votes)

1

I am trying to generate a code for certain dynamic queries, the specific case is the following, I have my users.php page, which will have registered users in a system, for this a search of users is done in a way dynamic and I put them in a div as an input each, this works correctly with the following code.

php code in which the content is displayed

<!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 that performs the real-time dynamic search of the users

$ (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 that generates the search made with the 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;

  ?>

My problem is that when I click on an input generated by the query it shows me the data I need in real time if I have to load the page, try the click () function but I do not know how to identify each one of the generated inputs and then I would not know which one to refer to this is the jquery code that I wanted to use

   $(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);            
                    }
              });         
        });
        }                                                                  
   });

And this php that makes the query

  <?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;
 ?>

jquery php

asked by Oscar Valentin Hernandez Marti 27.03.2018 в 18:41

source

2 answers

Simplify a Javascript Switch How to make my function only affect the element that is being clicked

score 3 · Answer 1

I do something similar with JQuery, I have a list of created findings in a table and when I double click on some of them, it shows me its detailed information. I use the following code I hope I can help you.

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

This code helps me to identify which "tr" I double clicked with the function find () I look for the cells "td" and the function eq () returns the value I need indicating the index of the cell I search in this case I occupy what is in the first cell.

Greetings !!

score 1 · Answer 2

Since the list of INPUT generates a collection by itself, you can access it not only by the id of each element (since the id must be unique, it would be your turn to loop) , but by shared features, such as the name or its class. JQuery allows you to access all the elements of this collection in this way. So, taking your input of the start:

  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>';
    }

Then you access the collection of elements that share the class cssUserId :

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

This example is for you to see that using this method is much faster, less code, and above with $(this) you access all the attributes of the class element cssUserId .

You could also use, instead of the css class as stitcher, the attribute name of the input , but there the JQuery code would vary a bit (note that in the php code above, I added the attribute name to input containing the User ID):

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