Я столкнулся с серьезной проблемой при изменении status
в <select>
в базе данных через jquery–ajax.
Примечание. Я искал в stackoverflow для этого вопроса. но те не подошли близко к моему вопросу. Вот ссылки, приведенные ниже link1 , link2 , link3
Когда я нажимаю кнопку выбора первой строки, данные отправляются через ajax, а status column in table
обновляется, а также обновляется в базе данных mysql. Но когда выбирается вторая, 3-я строка, она не изменяется, а не обновляет status column
на странице html, а в базе данных здесь нет выходного изображения.
Заранее спасибо..
Ниже приведено описание имени таблицы базы данных моего кода: ajaxselect
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 = $("#selectstatus").val(); var getid = $("#getid").val(); $.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 = $("#selectstatus").val(); var getid = $("#getid").val(); $.ajax({ type:'POST', url:'ajaxreceiver.php', data:{statusname:statusname,getid :getid}, success:function(result){ $("#display").html(result); } }); }); }); </script> </body> </html>
Файл Ajax: 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: 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><input type="hidden" id="getid" value="<?php echo $id;?>"><?php echo $id;?></td> <td><?php echo $productname;?></td> <td><p id="display"><?php echo $status;?></p></td> <td> <select id="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><input type="hidden" id="getid" value="<?php echo $id;?>"><?php echo $id;?></td> <td><?php echo $productname;?></td> <td><p id="display"><?php echo $status;?></p></td> <td> <select id="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><input type="hidden" id="getid" value="<?php echo $id;?>"><?php echo $id;?></td> <td><?php echo $productname;?></td> <td><p id="display"><?php echo $status;?></p></td> <td> <select id="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"; } } } } ?>
Все ваши $("#selectstatus").val()
имеют одинаковый идентификатор, поэтому $("#selectstatus").val()
всегда возвращает одно и то же значение. Вы должны получить значение измененного элемента. Javascript: this.value
или jQuery $(this).val()
Пример (обратите внимание, что selectstatus
– это класс, поэтому вы должны добавить новый класс): HTML
<tr> <td><?php echo $productname;?></td> <td><p id="display"><?php echo $status;?></p></td> <td> <select status-id="<?php echo $id;?>" class="selectstatus" id="selectstatus"> <option value="Pending">Pending</option> <option value="Delivered">Delivered</option> <option value="Cancelled">Cancelled</option> <option value="Amount paid">Amount Paid</option> </select> </td> </tr>
JS
$(".selectstatus").change(function(){ var statusname = $(this).val(); var getid = $(this).attr("status-id"); $.ajax({ type:'POST', url:'ajaxreceiver.php', data:{statusname:statusname,getid :getid}, success:function(result){ $("#display").html(result); } }); });
Вы не можете использовать идентификатор в этом случае или он будет работать только для первого появления
`
<script> $(document).ready(function(){ $(".selectstatus").change(function(){ var statusname = $(this).val(); var getid = $(this).parent().parent().children().eq(0).children().eq(0).val(); $.ajax({ type:'POST', url:'ajaxreceiver.php', data:{statusname:statusname,getid :getid}, success:function(result){ $("#display").html(result); } }); }); }); </script>
`