那些遇到过的问题

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

dec*_*rog 1 php mysql jquery codeigniter

我知道这个问题已经被问了很多，但我还没有找到解决该问题的任何答案。我本质上是在视图内部有一个表，该表使用PHP中的foreach循环显示，这将一张一张地吐出记录，并在最后一列（下载，删除和编辑）中附加一些“操作”按钮。下载和删除功能可以完美地工作，我只需将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>
Run Code Online (Sandbox Code Playgroud)

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);
});
Run Code Online (Sandbox Code Playgroud)

The*_*bee 5

最好的方法是使用与模式关联的事件挂钩，以帮助管理模式上的动态性。

例如，您希望将信息从for循环传递到模态，您可以仅使用模态来执行此操作，然后在模态打开时对其进行更新。

检查bootstrap文档，您将看到此钩子用于模式 show.bs.modal

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

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

然后我们可以使用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 firstname=$(opener).attr('first-name');

//set what we got to our form
  $('#profileForm').find('[name="firstname"]').val(firstname);
   
});
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

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

希望能帮助到你。

  • 我修好了它！！我玩了一下这个按钮，它似乎已经修复了，模式中的字段现在填充了每一行的正确值，干杯。 (2认同)

归档时间：

查看次数：

5520 次

最近记录：

8 年，7 月 前
相关归档
PHP中的数组+运算符？ 186
什么是jQuery的ajax默认超时值？ 76
"jquery.unobtrusive-ajax.js"过时了吗？ 30
"间接修改SplFixedArray的重载元素没有任何影响" 26
为什么PHP-FPM在写入stdout时会出现警告？ 26
laravel 5.2如何获取刀片中的路由参数？ 25
如何正确使用Bearer令牌？ 23
用于php5-fpm的display_errors不能与nginx一起使用 22
Apache PHP/OSX Mavericks: - 无法打开流:打开的文件过多 21
Dropzone 接受的文件无法正常工作 1
难疑归档
使用Git将我的最后一次X提交压缩在一起 3294
使用Git版本控制查看文件的更改历史记录 2920
Python中的switch语句的替换？ 1719
如何修复java.lang.UnsupportedClassVersionError:不支持的major.minor版本 1532
如何使用sed替换换行符(\n)？ 1295
在文本框中的Enter键上使用JavaScript触发按钮单击 1250
URL.Combine的URL？ 1186
如何使用SSH在远程计算机上运行shell脚本？ 1164
活动已泄露最初添加的窗口 1117
.NET - 枚举的jSON序列化为字符串 1088