Question

我在使用<select>标记更改表格中特定行的状态时遇到了重大问题。

我正在使用jquery-Ajax所以，在这里点击<select在任何特定行上的功能如下：让我说我已经改变了id 2的表行的状态待交付。在这个jquery change（）事件触发器上，它从'tag'获取值，并通过ajax将值发送到其他文件。直到这里一切正常，数据通过ajax和行，特定id的状态正在成功更新。

但是在前端它不会改变特定行的状态。但它只会改变第一行的状态。

我需要它来改变特定行的状态。

注意：我在stackoverflow中搜索了这个问题。但那些答案并不接近我的问题。以下是Link 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>

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

Answer 1

问题出在这一行：

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

那么这里发生了什么？

您正在为每一行创建display个ID，这不是一个好习惯，特别是在您的特定情况下。

这个问题有各种解决方案，

<强> 1）

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

在这里，您要将操作应用于特定ID，该特定<td><p id="display_<?php echo $id; ?>"><?php echo $status;?></p></td>属于已收到更改操作的特定类的父级的父级

<强> 2）

为每行显示行唯一ID

例如如下： -

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

然后直接将操作应用到

<tr>

第3）

此解决方案类似于过去的解决方案，为父<tr id='parent_<?php echo $id; ?>'>提供唯一ID

例如： -

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

然后从你的ajax中应用你的动作

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

甚至：

{{1}}

Answer 2

是的，$("#display").html(result);行存在问题，因为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>

如何使用jquery change（）更新行状态并显示在相应的表中

谢谢你提前

2 个答案: