单击行以预填充表单，其数据仅显示第一条记录

Question

我有 hound_view.php，它根据搜索/过滤条件显示记录。当用户点击一行时，会显示一个模态框，其中包含一个用于编辑猎犬信息的表单，我希望根据点击的行预先填充该表单。

当 hound_view.php 中的一行被点击时 hound_record_click_event.js 将其 data-id 发送到查询数据库的 fill_hound_records.php每行数据都分配一个变量，然后传递给 edit_hound_records.php

中的模式

我的问题是，当我点击任何一行时，我只会获取第一行的数据来填充，但在 fill_hound_records.php 我回显变量以确保每一行都在捕获它的正确信息，它是。

请注意：此代码易受SQL injection 攻击，请勿直接复制。您应该使用mysqli 或PDO 准备好的语句和this post 中所述的绑定参数。

hound_view.php

  <tbody class="clickable-row" data-toggle="modal" data-target="#editModal" data-id="<?php echo $row['RegNumber'] ?>"> 

hound_record_click_event.js

 $(window).ready(function() {
      //bind the event using jquery not the onclick attribute of the button
      $('.clickable-row').on('click', updateClick);
 });

 function updateClick() {
  var dataid = $(this).data("id");
  $.ajax ({
         type: 'POST',
         url: "fill_hound_record.php",
         data: { dataid : dataid },
         success: function( result ) {
                alert(result);
         }
     });
 };

fill_hound_record.php

<?php
//include database configuration file
include('db.php');

$hounddataid = $_POST["dataid"];

//get rows
$prefillsql = "SELECT * FROM Hounds WHERE RegNumber = '$hounddataid'";
$prefillquery = mysqli_query($con,$prefillsql)or die(mysql_error());
$prefillnumrows = mysqli_num_rows($prefillquery);

if($prefillnumrows > 0){

  while($row = mysqli_fetch_array($prefillquery)){

    $prefillbreed = $row['Breed'];
    $_SESSION['pfbreed'] = $prefillbreed;
    $prefillregnumber = $row['RegNumber'];
    $_SESSION['pfregnumber'] = $prefillregnumber;

    echo $_SESSION['pfregnumber'];
}}
?>

edit_hound_record.php

  <input type="text" class="form-control" id="regnumber" name="regnumber" placeholder="Reg Number" value="<?php echo $_SESSION['pfregnumber']; ?>">

Answer 1

因为没有关于boostrap版本的信息，如果表格是用插件生成的，我建议你改变这一行：

<tbody class="clickable-row" data-toggle="modal" data-target="#editModal" data-id="<?php echo $row['RegNumber'] ?>"> 

与：

<tbody class="clickable-row" data-toggle="modal" data-target="#editModal">

data-id 是点击行的当前第二个单元格文本。为了得到这个值，你可以使用：

$(e.target).closest('tr').find('td:eq(1)').text()

$(window).ready(function () {
    //bind the event using jquery not the onclick attribute of the button
    $('.clickable-row').on('click', updateClick);
});

function updateClick(e) {
    var dataid = $(e.target).closest('tr').find('td:eq(1)').text();
    $.ajax({
                type: 'POST',
                url: "fill_hound_record.php",
                data: {dataid: dataid},
                success: function (result) {
                    alert(result);
                },
                error: function () {
                    $('#editModal').find('.modal-body p').text(dataid);
                }
            }
    );
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<table class="table table-bordered">
    <thead>
    <tr>
        <th>Breed</th>
        <th>Reg Number</th>
        <th>Call Name</th>
        <th>Reg Name</th>
    </tr>
    </thead>
    <tbody class="clickable-row" data-toggle="modal" data-target="#editModal">
    <tr>
        <td>AH</td>
        <td>024193</td>
        <td>Nia</td>
        <td>Dog</td>
    </tr>
    <tr>
        <td>AH</td>
        <td>022222</td>
        <td>Nia</td>
        <td>Dog</td>
    </tr>
    </tbody>
</table>

<div class="modal fade" tabindex="-1" role="dialog" id="editModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
                <p>One fine body&hellip;</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Answer 2

对于其他有类似问题的人；在 fill_hound_record.php 中，我在 $hounddataid 变量之前添加了一个 if 语句，因此在单击一行之前我不会收到未定义的索引。

if (isset($_POST["dataid"])) { 
  $hounddataid = $_POST["dataid"];
  ...
  }

---

我删除了 edit_hound_record.php 和 fill_hound_record.php 中的 value 属性，我创建了一个数组，其中包含填充表单所需的所有值并在 json 中编码.

$arr = array(
  'breed'=>$prefillbreed,
   ...
   );

echo json_encode($arr);
exit();

---

最后我添加了

dataType: 'json',
 success: function( data ) {
    $("#breed").val(data.breed);
    ...
    }

到我的 hound_record_click_event.js，它将所选的 json 数组值 data.breed 发送到 id 为 breed 的表单中的字段.

Answer 3

首先，我认为您的<tbody> 应该是一个表格行<tr>

<tbody class="clickable-row" data-toggle="modal" data-target="#editModal" data-id="<?php echo $row['RegNumber'] ?>"> 

其次，在你的 JS 中，你要获取 data-id：

 $(this).attr("data-id") // will return the string "123"

或 .data()（如果您使用较新的 jQuery >= 1.4.3）

$(this).data("id") // will return the number 123

Answer 4

您的 java 脚本出错。改变

    $(this).data ('id') to $(this).attr ('id')