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

时间：2017-04-28 10:40:23

标签： php jquery mysql codeigniter

我知道这已被问了很多，但我还没有发现问题的任何答案都非常有成效。我基本上在一个视图中有一个表，它在PHP中使用foreach循环显示，它逐个吐出记录并附加一些＆＃39; Action＆＃39;最后一栏中的按钮（下载，删除和编辑）。下载和删除功能完美运行，我只是从foreach循环中的每条记录中传入ID，完成工作。

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

我认为问题是模式只在foreach循环开始运行时创建一次，因此为什么它只有模态中的第一个记录数据，任何帮助来解决这个问题所以我可以编辑里面的每个单独的记录桌子会很棒！谢谢你的帮助。

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);
});

2 个答案:

答案 0 :(得分：3)

最好的方法是使用与模态相关联的事件挂钩来帮助管理模态的动态。

例如，您想要将for循环中的信息传递给模态，您可以仅使用模态执行此操作，然后在打开模式时更新模式。

检查bootstrap文档，你会看到这个模态的钩子 的 show.bs.modal

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

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

然后我们可以使用Jquery来拾取它并在模态打开时挂钩它

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

＆＃13;
＆＃13; 
$('#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);
   
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

希望它有所帮助。

答案 1 :(得分：0)

将id分配给模态体，例如：modal-body

声明一个变量来存储模态体的HTML，例如： var modalHTML =＆＃39;＆＃39;

然后将for循环中的内容追加到该变量。

之后使用$（＆＃39; #modal-body）.append（$（modalHTML））将变量附加到模态体。

相关问题
最新问题