php - 如何将数据从记录表传递到 Modal 以进行编辑

标签 php jquery mysql codeigniter

我知道这个问题已经被问了很多，但我还没有发现这个问题的任何答案都很有成效。我基本上在 View 中有一个表，该表在 PHP 中使用 foreach 循环显示，这会逐条吐出记录并在最后一列中附加一些“操作”按钮(下载、删除和编辑)。下载和删除功能完美运行，我只是将 ID 从 foreach 循环中的每条记录传递进来，工作完成。

虽然我的模式有很多问题，但它只会在我回显每个输入的“值”字段中的数据时显示第一条记录中的数据。我真的不知道如何使这个功能起作用(JQuery 不是我最擅长的语言)。我看到一些关于 Ajax 的回复，但我不想在这个项目中使用 Ajax。我也在使用 codeigniter 框架来获取更多信息。

我认为问题在于模态只在 foreach 循环开始运行时创建一次，因此为什么模态中只有第一条记录数据，任何解决这个问题的帮助我都可以编辑里面的每条记录 table 会很棒!感谢您的帮助。

HTML/PHP:

<div class="container" id="widecontainer">
  <h1 id="title">VMS Failure Records</h1>
  <br>
<!-- print table with results onto view.php -->
<table class="table table-bordered" id="record">
<?php if($results) : ?>
  <thead>
    <tr style="background-color: #d3d3d3;">
      <th>ID</th>
      <th>VSM S/N</th>
      <th>VM S/N</th>
      <th>Project</th>
      <th>Site</th>
      <th>Install Loc</th>
      <th>Observed During</th>
      <th>Comments</th>
      <th>Reported By</th>
      <th>Replaced With</th>
      <th>Date</th>
      <th>Failure Classification</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <!-- foreach result place it in row in table -->
<?php foreach($results as $res) : ?>
      <tr>
        <td><?php echo $res['id'] ?></td>
        <td><?php echo $res['vsm_sn'] ?></td>
        <td><?php echo $res['vm_sn'] ?></td>
        <td><?php echo $res['project'] ?></td>
        <td><?php echo $res['site'] ?></td>
        <td><?php echo $res['install_location'] ?></td>
        <td><?php echo $res['observed_during'] ?></td>
        <td><?php echo $res['comments'] ?></td>
        <td><?php echo $res['reported_by'] ?></td>
        <td><?php echo $res['replaced_with'] ?></td>
        <td><?php echo $res['date'] ?></td>
            <td><?php echo $res['classification'] ?></td>
        <td>
          <?php echo form_open('/pages/delete/'. $res['id']); ?>
            <button type="submit" class="btn btn-danger delete_btn" id="delete_btn" target="#confirmation">
              <i class="fa fa-trash" aria-hidden="true"></i>
            </button>

            <!-- Modal displays when user clicks delete, asking them to confirm the deletion -->
            <div id="confirm" name="confirm" class="modal fade">
              <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                  <h4 class="modal-title">Delete Record <i class="fa fa-trash" aria-hidden="true"></i></h4>
                </div>
                <div class="modal-body">
                  <p style="color: red;"><strong>Deleting this record will delete .PDF and QRCode Data.</strong></p>
                  <p>Are you sure you want to delete this record?</p>
                </div>
              <div class="modal-footer">
                  <button type="button" data-dismiss="modal" class="btn btn-danger" id="delete">Delete</button>
                  <button type="button" data-dismiss="modal" class="btn">Cancel</button>
              </div>
              </div>
            </div>
            </div>
          </form>


          <!--Modal displays to allow user to download the selected record. -->
          <?php echo form_open('/pages/downloadFile/'. $res['id']); ?>
            <button type="submit" class="btn btn-primary" alt="Download .pdf">
              <i class="fa fa-download" aria-hidden="true"></i>
            </button>
          </form>

          <form>
            <button type="button" class="btn btn-success update_btn" id="update_btn" data-toggle="modal" data-target="#myModal"
            vsm-sn="<?php echo $res['vsm_sn'];?>" record-id="<?php echo $res['id']; ?>">
              <i class="fa fa-pencil" aria-hidden="true"></i>
            </button>
          </form>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <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" id="myModalLabel">Update Record</h4>
          </div>
          <div class="modal-body">
            <form id="profileForm">
              <input type="hidden" class="form-control" name="id" value="">
           VSM SN : <input class="form-control" name="vsm_sn" value="" placeholder="VSM SN">
           </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>

        </td>
      </tr>
<?php endforeach; ?>
<!-- If there are no results, display table headings and message -->
<?php elseif(!$results) : ?>
  <thead>
    <tr>
      <th>ID</th>
      <th>VSM S/N</th>
      <th>VM S/N</th>
      <th>Project</th>
      <th>Site</th>
      <th>Install Loc</th>
      <th>Observed During</th>
      <th>Comments</th>
      <th>Reported By</th>
      <th>Replaced With</th>
      <th>Date</th>
      <th>Failure Classification</th>
    </tr>
  </thead>
  <tbody>
      <h3 style="color: red;">No Results to Display</h3>
</tbody>
<?php endif; ?>
  </tbody>
</table>
</div>
</div>

JQUERY:

$('#myModal').on('show.bs.modal', function (e) {
  // get information to update quickly to modal view as loading begins
  var opener=e.relatedTarget;//this holds the element who called the modal

   //we get details from attributes
  var vsm_sn=$(opener).attr('vsm-sn');

//set what we got to our form
  $('#profileForm').find('[name="vsm_sn"]').val(vsm_sn);
});

最佳答案

最好的方法是使用绑定(bind)到模态的事件 Hook 来帮助管理模态的动态性。

例如，您想要将信息从 for 循环传递到模态框，您可以只使用模态框执行此操作，然后在模态框打开时更新它。

检查 bootstrap 文档，你会看到这个钩子(Hook)用于模态 show.bs.modal

然后我们使用按钮的属性来挑选我们要在模式上显示的信息，例如

<button user-id="<?php echo $data[$i]->userID; ?>" first-name="<?php echo $data[$i]->firstname;?>">Edit</button>

然后我们可以使用 Jquery 来获取它并在模式打开时 Hook 它

请参阅此处的示例代码，用您的动态编码替换静态重复

$('#myModal').on('show.bs.modal', function (e) {
  // get information to update quickly to modal view as loading begins
  var opener=e.relatedTarget;//this holds the element who called the modal
   
   //we get details from attributes
  var firstname=$(opener).attr('first-name');

//set what we got to our form
  $('#profileForm').find('[name="firstname"]').val(firstname);
   
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>



<table class="table">
	<thead>
		<tr>
			<th>SN</th>
			<th>Firstname</th>
			<th>Action</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>Theophilus</td>
			<td>
				<button class="btn btn-primary" first-name="Theophilus" data-toggle="modal" data-target="#myModal">
					Edit
				</button>
			</td>
		</tr>
		<tr>
			<td>3</td>
			<td>Omoregbee</td>
			<td>
				<button class="btn btn-primary" first-name="Omoregbee" data-toggle="modal" data-target="#myModal">
					Edit
				</button>
			</td>
		</tr>
		<tr>
			<td>3</td>
			<td>Endurance</td>
			<td>
				<button class="btn btn-primary" first-name="Endurance" data-toggle="modal" data-target="#myModal">
					Edit
				</button>
			</td>
		</tr>

	</tbody>
</table>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <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" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <form id="profileForm">
       Firstname : <input class="form-control" name="firstname" value="" placeholder="firstname">
       </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

运行它并查看结果，因此您可以更改表格样式以在 php 中使用循环，然后将您的数据作为属性回显。

希望对您有所帮助。

关于php - 如何将数据从记录表传递到 Modal 以进行编辑，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43678226/

上一篇：php - 在数据库表中没有行意味着出现错误 Undefined variable : results using codeigniter

下一篇：mysql - Amazon EC2 实例每天变慢

相关文章：

php - 网页上的照片破裂

jquery - jQuery 的 height() 和 width() 方法是否保持图像的比例？

javascript - 触摸pdf : same file is opened with different URLs

php - 我如何像在 Ruby 中使用 block 一样使用 PHP 5.3 闭包

php - 当买家为订阅付款时，notify_url永远不会调用

javascript - AJAX 在第一个表单之后不处理表单

java - 与 MySql 的连接正在自动中止。如何正确配置Connector/J？

mysql - 按 if 查询中包含的 mysql 中的别名排序

php artisan migrate 卡在命令的开头

PHP 相当于 send 和 getattr？

©2024 IT工具网  联系我们