Question

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

点击 hound_view.php 中的一行时 hound_record_click_event.js 将其数据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 中的value属性，并在 fill_hound_record.php 中创建了一个数组，其中包含填充表单并在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＆gt; = 1.4.3）

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

Answer 4

您的java脚本出错。改变

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

点击行预先填充表单，其中的数据仅显示第一条记录

4 个答案: