Bootstrap MYSQL PHP - 发送模态内容

Question

I have data I'm displaying in a table, using bootstrap. For each of those I'm wanting to do a modal, on this you would confirm you want to send an email.

This is the link they would click:

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

The modal is on another page, and I've included this within the while for the MYSQL data using:

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

On this page I then load the modal using:

<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>

For each of the buttons that load you can click them and it will open a modal, the problem is it only ever shows data from the very first row, am I doing something wrong, or is there a better way to do this?

Thanks!

Answer 1

I think your <a data-toggle="modal" data-target="#email-'.$row['id'].'">Resend Email</a> anchor needs to have a class.

I would write it in a simpler manner than you: <a href="" class="modal-open">Resend Email</a>.

Then, you need to somehow, pass your data from db, to each modal. So I'll want to update the above anchor, to have the db data too. So I'd add custom html attributes to store whatever data comes from db. I'll use a simple case, when you'd want to update just a name. So you should adapt this example for your needs.

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

Pretending this is your modal:

<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 -->

Then I'd put javascript to get the job done. First, when the user clicks one of the Resend Email links, you need to get the id and the name stored in that particular link (through data-id and data-name attributes) and populate the modal fields with them. So:

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

I guess this should do the trick.