Как обновить статус строки с помощью jQuery change () и отобразить в соответствующей таблице

Я столкнулся с серьезной проблемой при изменении статуса определенной строки в таблице с <select> .

Я использую jquery-Ajax так, вот идите в этом случае, когда нажимаете на <select в любой конкретной строке для примера: Допустим, я изменил статус строки таблицы id 2 с Pending to Delivered. В этом событии триггера jquery change () вызывается значение из «тега» и отправляется значение в другой файл через ajax. До сих пор все идет правильно, данные проходят через ajax, а строка с определенным статусом id обновляется успешно.

Но на лицевой стороне он не изменяет статус конкретной строки. но он изменяет статус только первой строки.

Здесь мне нужно изменить статус конкретной строки.

Примечание. Я искал в stackoverflow для этого вопроса. но те не подошли близко к моему вопросу. Вот ссылки ниже. Ссылка 1 link2 link3

ЗАРАНЕЕ СПАСИБО

Вот вывод, и я объяснил детали в изображениях также Выходное изображение с объяснением

Существует полный код

HTML-страница: index.php

  <?php include('processing.php'); $newobj = new processing(); ?> <html> <head> <title>Jquery Ajax select <tag> with PHP Mysql</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> </head> <body> <table border="1"> <tr> <th>Id</th> <th>Product name</th> <th>Status</th> <th>Action</th> </tr> <?php echo $newobj->display();?> </table> <script> $(document).ready(function(){ $(".selectstatus").change(function(){ var statusname = $(this).val(); var getid = $(this).attr("status-id"); //alert(displid); $.ajax({ type:'POST', url:'ajaxreceiver.php', data:{statusname:statusname,getid:getid}, success:function(result){ $("#display").html(result); } }); }); }); </script> </body> </html> в  <?php include('processing.php'); $newobj = new processing(); ?> <html> <head> <title>Jquery Ajax select <tag> with PHP Mysql</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> </head> <body> <table border="1"> <tr> <th>Id</th> <th>Product name</th> <th>Status</th> <th>Action</th> </tr> <?php echo $newobj->display();?> </table> <script> $(document).ready(function(){ $(".selectstatus").change(function(){ var statusname = $(this).val(); var getid = $(this).attr("status-id"); //alert(displid); $.ajax({ type:'POST', url:'ajaxreceiver.php', data:{statusname:statusname,getid:getid}, success:function(result){ $("#display").html(result); } }); }); }); </script> </body> </html>

AJAX HANDLER PAGE: ajaxreceiver.php

  <?php include('processing.php'); $newobj = new processing(); if(isset($_POST['statusname'],$_POST['getid'])){ $statusid = $_POST['statusname']; $id = $_POST['getid']; $newobj->getdata($statusid,$id); } ?> в  <?php include('processing.php'); $newobj = new processing(); if(isset($_POST['statusname'],$_POST['getid'])){ $statusid = $_POST['statusname']; $id = $_POST['getid']; $newobj->getdata($statusid,$id); } ?>

PHP CLASSES FILE: processing.php

  <?php class processing{ private $link; function __construct(){ $this->link= new mysqli('localhost','root','','example'); if(mysqli_connect_errno()){ die ("connection failed".mysqli_connect_errno()); } } function display(){ $sql = $this->link->stmt_init(); $id=1; if($sql->prepare("SELECT id,productname,status FROM ajaxselect")){ $sql->bind_result($id,$productname,$status); if($sql->execute()){ while($sql->fetch()){ ?> <tr> <td><?php echo $id;?></td> <td><?php echo $productname;?></td> <td><p id="display"><?php echo $status;?></p></td> <td> <select status-id=<?php echo $id;?> id="selectstatus" class="selectstatus"> <option>Pending</option> <option>Delivered</option> <option>Cancelled</option> <option>Amount Paid</option> </select> </td> </tr> <?php } } } } function getdata($statusid,$id){ $sql = $this->link->stmt_init(); if($sql->prepare("UPDATE ajaxselect SET status=? WHERE id=?")){ $sql->bind_param('si',$statusid,$id); if($sql->execute()){ echo $statusid; } else { echo "Update Failed"; } } } } ?> в  <?php class processing{ private $link; function __construct(){ $this->link= new mysqli('localhost','root','','example'); if(mysqli_connect_errno()){ die ("connection failed".mysqli_connect_errno()); } } function display(){ $sql = $this->link->stmt_init(); $id=1; if($sql->prepare("SELECT id,productname,status FROM ajaxselect")){ $sql->bind_result($id,$productname,$status); if($sql->execute()){ while($sql->fetch()){ ?> <tr> <td><?php echo $id;?></td> <td><?php echo $productname;?></td> <td><p id="display"><?php echo $status;?></p></td> <td> <select status-id=<?php echo $id;?> id="selectstatus" class="selectstatus"> <option>Pending</option> <option>Delivered</option> <option>Cancelled</option> <option>Amount Paid</option> </select> </td> </tr> <?php } } } } function getdata($statusid,$id){ $sql = $this->link->stmt_init(); if($sql->prepare("UPDATE ajaxselect SET status=? WHERE id=?")){ $sql->bind_param('si',$statusid,$id); if($sql->execute()){ echo $statusid; } else { echo "Update Failed"; } } } } ?> В  <?php class processing{ private $link; function __construct(){ $this->link= new mysqli('localhost','root','','example'); if(mysqli_connect_errno()){ die ("connection failed".mysqli_connect_errno()); } } function display(){ $sql = $this->link->stmt_init(); $id=1; if($sql->prepare("SELECT id,productname,status FROM ajaxselect")){ $sql->bind_result($id,$productname,$status); if($sql->execute()){ while($sql->fetch()){ ?> <tr> <td><?php echo $id;?></td> <td><?php echo $productname;?></td> <td><p id="display"><?php echo $status;?></p></td> <td> <select status-id=<?php echo $id;?> id="selectstatus" class="selectstatus"> <option>Pending</option> <option>Delivered</option> <option>Cancelled</option> <option>Amount Paid</option> </select> </td> </tr> <?php } } } } function getdata($statusid,$id){ $sql = $this->link->stmt_init(); if($sql->prepare("UPDATE ajaxselect SET status=? WHERE id=?")){ $sql->bind_param('si',$statusid,$id); if($sql->execute()){ echo $statusid; } else { echo "Update Failed"; } } } } ?>

Solutions Collecting From Web of "Как обновить статус строки с помощью jQuery change () и отобразить в соответствующей таблице"

проблема в этой строке:

$("#display").html(result);

так что здесь происходит?

вы создаете идентификатор display для каждой строки, что не является хорошей практикой, особенно в вашем конкретном случае.

существуют различные решения этой проблемы,

("#display", $(this).parent().parent()).html(result);

здесь вы собираетесь применить действие к определенному ID который принадлежит родительскому элементу родителя определенного класса, который получил действие изменения

давая уникальный идентификатор строки отображения для каждой строки

например, следующим образом:

<td><p id="display_<?php echo $id; ?>"><?php echo $status;?></p></td>

и затем примените свое действие к нему напрямую,

$("#display_" + getid).html(result);

и это решение аналогично предыдущему, предоставив родительскому <tr> уникальный идентификатор

например :-

<tr id='parent_<?php echo $id; ?>'>

а затем примените свое действие от своего ajax, как это

$("#display", $('#parent_' + getid)).html(result);

или даже :

$('#parent_' + getid + ' #display').html(result);

Да, есть проблема в $("#display").html(result); line, потому что id ( $("#display") ) всегда выбирает первый элемент, найденный в DOM, вы можете его исправить –

 <script> $(document).ready(function(){ $(".selectstatus").change(function(){ // make jquery object that make reference to select in which click event is clicked $this = $(this); var statusname = $(this).val(); var getid = $(this).attr("status-id"); //alert(displid); $.ajax({ type:'POST', url:'ajaxreceiver.php', data:{statusname:statusname,getid:getid}, success:function(result){ // this refer to the ajax callback function so we have to use $this which is initialized before ajax call $($this).parents('tr').find("#display").html(result); } }); }); }); </script>