duanlie7447 2017-04-28 10:40
浏览 117
已采纳

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

I know this has been asked a lot but I haven't found any of the answers to the issue to be very fruitful. I essentially have a table inside a view that is displayed using a foreach loop in PHP, this spits out the records one by one and appends some 'Action' buttons in the last column (download, delete and edit). The download and delete functions work perfectly, I just pass the ID in from each record in the foreach loop, job done.

I'm having a lot of issues with my modal though, it only ever displays the data from the first record when I echo the data in the 'value' field of each input. I'm really stumped on how to make this functionality work (JQuery is not my strongest language). I've seen some responses talking about Ajax, but I'd rather not use Ajax in this project. I'm using the codeigniter framework also for some more info.

I think the issue is that the modal is only created once when the foreach loop starts running, hence why it only ever has the first record data inside the modal, any help to get around this so I can edit each individual record inside the table would be great! Thanks for the help.

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条回答 默认 最新

  • douya2433 2017-04-28 11:19
    关注

    The best way to go about it , is to use events hooks which is tied to the modal to help manage dynamism on modals.

    Take for example, you want to pass information from the for loop to the modal you can do this using just a modal and then update the modal as it opens.

    check bootstrap docs you will see this hook for modal show.bs.modal

    we then use attributes from the button to pick out our information we are going to display on the modal, e.g

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

    then we can use Jquery to pick it up and hook it when the modal is opening

    See for example code here, replace the static repeat with your dynamic coding

    $('#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>

    Run it and see the result, so you can change the table style to use loop in php and then echo your data as attribute.

    Hope it helps.

    </div>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 MATLAB怎么通过柱坐标变换画开口是圆形的旋转抛物面?
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题
  • ¥15 Visual Studio问题
  • ¥20 求一个html代码,有偿