Bootstrap MYSQL PHP - 发送模态内容答案

【问题标题】：Bootstrap MYSQL PHP - Send Modal ContentBootstrap MYSQL PHP - 发送模态内容
【发布时间】：2017-02-25 04:18:36
【问题描述】：

我有使用引导程序在表格中显示的数据。对于我想要做一个模态的每个人，你会确认你想发送一封电子邮件。

这是他们会点击的链接：

<a data-toggle="modal" data-target="#email-'.$row['id'].'">Resend Email</a>

模态在另一个页面上，我已经在一段时间内将其包含在 MYSQL 数据中，使用：

include 'modal/modal-resend-email.php';

然后在此页面上，我使用以下方式加载模式：

<div id="email-<?php echo $row['id'];?>" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p><?php echo $row['number_tenants']; echo $row['full_name_one'];?></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

对于每个加载的按钮，您可以单击它们，它将打开一个模式，问题是它只显示第一行的数据，我做错了什么，或者有更好的方法来做到这一点?

谢谢！

【问题讨论】：

标签： javascript php jquery mysql twitter-bootstrap

【解决方案1】：

我认为您的<a data-toggle="modal" data-target="#email-'.$row['id'].'">Resend Email</a> 主播需要上课。

我会用比你更简单的方式来写它：<a href="" class="modal-open">Resend Email</a>。

然后，您需要以某种方式将数据从 db 传递到每个模态。所以我想更新上面的锚，也有数据库数据。所以我会添加自定义 html 属性来存储来自 db 的任何数据。当您只想更新一个名称时，我将使用一个简单的案例。所以你应该根据你的需要调整这个例子。

<a href="" class="modal-open" data-id="<?php echo $row['id'];?>" data-name="<?php echo $row['name'];?>">Resend Email</a>.

假装这是你的模态：

<div class="modal fade" tabindex="-1" role="dialog" id="modal-update">
    <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">Modal title</h4>
            </div>
            <div class="modal-body">
                <form action="update.php" method="POST" id="update-form">
                    <div class="form-group">
                        <label for="modal-update-id">ID</label>
                        <input type="number" id="modal-update-id" class="form-control modal-update-id" disabled="disabled">
                    </div>
                    <div class="form-group">
                        <label for="modal-update-name">Name</label>
                        <input type="text" id="modal-update-name" class="form-control modal-update-name">
                    </div>
                </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" id="modal-save">Save changes</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

然后我会使用 javascript 来完成工作。首先，当用户单击Resend Email 链接之一时，您需要获取存储在该特定链接中的id 和名称（通过data-id 和data-name 属性）并用它们填充模态字段。所以：

var updateId = 0;
var updateName = '';
$('.modal-open').click(function(e){ // when one of the links are clicked..
    e.preventDefault();//prevent the default behaviour of the link
    updateId = $(this).attr('data-id');//grab the data-id attr value
    updateName = $(this).attr('data-name');//grab the data-name attr value

    $('.modal-update-id').val(updateId);//populate the id field of the modal with that grabbed value
    $('.modal-update-name').val(updateName);//populate the name field of the modal with that grabbed value

    $('#modal-update').modal();//show the modal
});

$('#modal-save').click(function(e){//when the user clicks the Save changes button...
    e.preventDefault();
    $.ajax({
        method: $('#update-form').attr('method'),//grab the modal's form method
        url: $('#update-form').attr('action'),//grab the modal's form action
        data: { id:updateId, name:$('.modal-update-name').val(), age:$('.modal-update-age').val() },//grab the user's new data from the modal
        cache:false
    }).done(function(msg){
        document.location.reload();//reload the page to see the changes
        $('#modal-update').modal('hide');//hide the modal
    }).fail(function(XMLHttpRequest, textStatus, errorThrown){
        console.log(textStatus + ' ' + errorThrown);
    });
});

我想这应该可以解决问题。

【讨论】：