打开时尝试将数据从数据库传递到引导模式。我该怎么做？

Question

我正在尝试将数据从我的数据库传递到模态表单中。此模式的目的是让用户可以在数据库中编辑他们的数据，然后保存对所述数据的更改。我已经在 YouTube 上尝试了许多教程，并使用诸如通过 Ajax 和 Bootstrap Modal Event Listener & Ajax 和 jQuery Click 函数等方法阅读了本网站上以前的回复，但由于我对这些编程语言缺乏经验，我还没有理解为示例与我的项目大不相同。以下是我的表单代码以及数据库中的表用于打开模态的按钮： <a class="badge badge-success p-2" role="button" data-toggle="modal" data-target="#editPostModal">Edit</a>     模态：<div class="modal fade" id="editPostModal" tabindex="-1" role="dialog"aria-labelledby="exampleModalLabel" aria-hidden="true"><div class="modal-dialog" role="document">  <div class="modal-content">    <div class="modal-header">      <h5 class="modal-title" id="exampleModalLabel">Update Post</h5>      <button type="button" class="close" data-dismiss="modal" aria-label="Close">        <span aria-hidden="true">&times;</span>      </button>    </div>    <form action="editdata.inc.php" method="POST" enctype="multipart/form-data"> // PHP File I would like to use to run a possible "update" query      <div class="modal-body">        <div class="form-group">          <input type="text" name="themeContent" class="form-control" placeholder = "Enter theme"/>        </div>        <div class="form-group">          <input type="text" name="visualIdeaContent" class="form-control" placeholder = "Enter idea"/>        </div>        <div class="form-group">          <input type="text" name="captionContent" class="form-control" value="<?= $captionContent; ?>" placeholder = "Insert caption"/>        </div>总而言之，我希望模态能够：1) 打开并显示与特定用户 ID 相关的数据库中的数据2) 单击“保存更改”按钮时，可以保存对该数据所做的任何更改。3) 更新数据库中保存的数据。这是我的 CRUD 应用程序的最后一部分，因为我已经掌握了其他三个功能。感谢我能得到的任何帮助。

Answer 1

您需要 2 个控制器方法：

public function respondData($id)

{

    //you can ever check if id exist here or if exist at all and 

    //throw any exeptions if not exist, this is just example

    if($checkUser->exist($id))

    {

        $userData = array('id' => '1, 'name' => 'Name');

        return json_encode($data);

    }

    throw new \Exeption('User does not exist');

}

public function saveData()

{

    if($_POST)

    {

       if(($checkUser->exist($_POST['id'])))

       {

          //get value from POST and check and update

           return true; // or message and parse it if it was ajax request

       }

    }

    throw new \Exeption('Method not allowed');

}

JQUERY：您需要从您的用户那里获取数据并将其绑定到模态您可以这样做：添加data-user到您的按钮或链接和其他方法来触发模态打开：

$(document).on('click', '#your-link', function () { 

        var data = $(this).data('user');

        $.post({

            url: 'url_to_first_action' + '?id=' + data,

            data: data,

            success: function(data){

                //here you parse JSON ARRAY to your fields

            },

        });

    });

现在，在用户将数据提交给第二个操作后，您可以使用直接的 POST 请求或使用 ajax 进行序列化（）发布。

Answer 2

所以在修改了以前的代码之后，我得到了这个工作。

我的表：

<table class="table table-bordered table-hover">

      <thead>

        <tr>

          <th>Theme</th>

          <th>Visual Idea</th>

          <th>Caption</th>

          <th>Date</th>

          <th>Visual</th>

          <th>Actions</th>

        </tr>

      </thead>

      <tbody>

        <?php

        $table  = mysqli_query($conn ,'SELECT * FROM content');

        while($row  = mysqli_fetch_array($table)){ ?>

          <tr id="<?php echo $row['uidContent']; ?>">

            <td width="200" data-target="themeContent"><?php echo $row['themeContent']; ?></td>

            <td width="300" data-target="visualIdeaContent"><?php echo $row['visualIdeaContent']; ?></td>

            <td width="600" data-target="captionContent"><?php echo $row['captionContent']; ?></td>

            <td width="100" data-target="dateContent"><?php echo $row['dateContent']; ?></td>

            <td width="200" data-target="visualContent"><img id="imgsrc" src="<?php echo $row['visualContent']; ?>"width="200"/></td>

            <td style = "display:none" width="100" data-target="linkContent"><?php echo $row['linkContent']; ?></td>

            <td width="170">

              <a class="badge badge-primary p-2" role="button" href="<?php echo $row['linkContent']; ?>" target="_blank">Link</a>

              <a class="badge badge-success p-2" href="#" data-role="update" data-id="<?php echo $row['uidContent'] ;?>">Edit</a>

              <a class="badge badge-danger p-2" role="button" href="action.inc.php?delete=<?php echo $row['uidContent'] ;?>" onclick="return confirm('Are you sure you want to delete this post? This process cannot be undone.');">Delete</a>

            </td>

          </tr>

        <?php }

        ?>

      </tbody>

    </table>

剧本：

<script>

    $(document).ready(function(){

  //  Gets values in input fields

  $(document).on('click','a[data-role=update]',function(){

    var id  = $(this).data('id');

    var themeContent = $('#'+id).children('td[data-target=themeContent]').text();

    var visualIdeaContent = $('#'+id).children('td[data-target=visualIdeaContent]').text();

    var captionContent = $('#'+id).children('td[data-target=captionContent]').text();

    var linkContent = $('#'+id).children('td[data-target=linkContent]').text();

    var dateContent = $('#'+id).children('td[data-target=dateContent]').text();

    var visualContent = $('#'+id).children('td[data-target=visualContent]').text();

    $('#themeContent').val(themeContent);

    $('#visualIdeaContent').val(visualIdeaContent);

    $('#captionContent').val(captionContent);

    $('#dateContent').val(dateContent);

    $('#linkContent').val(linkContent);

    $('#visualContent').val(visualContent);

    $('#uidContent').val(id);

    $('#updatePostModal').modal('toggle');

  });

});

</script>

唯一的问题是我没有让图像路径在表单中显示为缩略图，但我会通过研究自己弄清楚。我的代码很丑，但在这一点上，我更关心功能。谢谢大家。