Ajax不工作：如何設置相同的頁面上的多個文本輸入相同的AJAX函數

我有一個頁面，其中我有一個表（n動態增加）的行數，表中的每一行包含一個輸入字段，我想在表中的每一行的輸入字段中的keyup上執行ajax。 Ajax只在第一行上工作，而不在其他地方工作。Ajax不工作：如何設置相同的頁面上的多個文本輸入相同的AJAX函數

PHP

<?php $count=rowCount(); // UDF Returning no of rows 
     for($i=1;$i<=10;$++){ 
?> 
<tr> 
    <td><input type="text" name="name" id="search" /></td> 
</tr> 
<?php 
} 
?>

$(document).ready(function(){ 
    $("#search").focus(); 
    // Search Studnet Records. 
    $("#search").keyup(function(){ 
     var name = $("#search").val(); 
     // alert('working'); 
     $.ajax({ 
      url:"fees_receipt_extra2.php", 
      type:"POST", 
      async:false, 
      data:{ 
       "display": 1, 
       "name":name 
      }, 
      success:function(d){ 
       $("#show").html(d); 
      } 

     }); 
    }); 
});

fees_recipt_extra2.php

if (isset($_POST['display'])) 
{ 
    $name = mysqli_real_escape_string($conn,$_POST['name']); 
     if($name) 
     { 
      $query = mysqli_query($conn,"SELECT * FROM students WHERE name LIKE '%$name%' OR fathers_name LIKE '%$name%' OR surname LIKE '%$name%' OR id LIKE '%$name%' LIMIT 10"); 
      if(mysqli_num_rows($query)) 
      { 
        echo"<table class='table table-hover tb1'>"; 
         echo"<tr class='danger'>"; 
          echo"<td >IMAGE</td>"; 
          echo"<td >ID</td>"; 
          echo"<td >DEPT</td>"; 
          echo"<td >COURSE</td>"; 
          echo"<td >NAME</td>"; 
          echo"<td >F-NAME</td>"; 
          echo"<td >SURNAME</td>"; 
          echo"<td >Action</td>"; 
         echo"</tr>";  
       while($data=mysqli_fetch_assoc($query)) 
       {   
          $id=$data['id']; 
          $img=$data['image']; 
          if($id==find_id_in_feesreceipt_temp_table($id)) 
          { 
           continue; 
          } 
         echo"<tr class='clickable-row' data-href='includes/fees_recepit_save_data_into_temp_table.php?std_id=$id'>"; 
          echo"<td cellpadding='0'> <img src='Assests/profile_images/$img' width='50'></td>"; 
          echo"<td >". $data['id']   ."</td>"; 
          echo"<td >". $data['dept']   ."</td>"; 
          echo"<td >". $data['course']  ."</td>"; 
          echo"<td >". $data['name']   ."</td>"; 
          echo"<td >". $data['fathers_name'] ."</td>"; 
          echo"<td >". $data['surname']  ."</td>"; 
          echo"<td ><a href='includes/fees_recepit_save_data_into_temp_table.php?std_id=$id' class='btn btn-primary btn-xs'>Append</a> </td>"; 
         echo"</tr>"; 
       } 
        echo"</table>";

來源

2017-02-14 Sooraj Abbasi

請使用最低可驗證的完整示例更新帖子。 – Aaron

plz嘗試把假類的屬性和class =「search」放在一起，然後把選擇器放到$（'。search'）。鍵........ –

重複的id會導致jQuery執行中的問題，除了無效句法。你可以使用類來代替 –

代替ID-S，使用類。 ID是唯一的，只能用於一個輸入，而類則用於多個標籤。

<td><input type="text" name="name" class="searchable-input" value="<?php echo $data['full_name'] ?>" id="search"></td>

然後在jQuery中爲這個類指定ajax函數。

$(".searchable-input").keyup(function(){ 
    //ajax function here 
});

希望這是你要求的。在其他情況下，回覆我的評論更多解釋。

來源

2017-02-14 19:17:53

而是var name = $('#search').val() should be $(this).val()。而且你應該總是嘗試和委託，如果你有動態內容，也可以通過腳本來執行。

$("td").on('keyup', '#search', function(){});

來源

2017-02-14 19:30:13 maxito

首先，避免將相同的ID分配給多個元素。 name屬性也一樣。如果需要，請在您的案例中指定班級而不是ID。但是，可以綁定keyup事件是這樣的（假設表有一個ID，例如使用「TABLEID」）

$(document).ready(function(){ 
    $("table#tableid td>input:first-child").focus(); 
    // Search Student Records. 
    $('table#tableid td>input[type="text"]').on("keyup", function(){ 
     var name = $(this).val(); 
     // alert('working'); 
     $.ajax({ 
      url:"fees_receipt_extra2.php", 
      type:"POST", 
      async:false, 
      data:{ 
       "display": 1, 
       "name":name 
      }, 
      success:function(d){ 
       d = d.trim(); 
       $("#show").html(d); 
      } 
     }); 
    }); 
});

本應在KEYUP進一步AJAX事件每個輸入綁定在你的錶行。

來源

2017-02-14 20:15:10

Ajax不工作：如何設置相同的頁面上的多個文本輸入相同的AJAX函數

回答

相關問題