Блог

У меня есть данные, которые я отображаю в таблице, используя bootstrap. Для каждого из тех, кого я хочу сделать модальным, на этом вы должны подтвердить, что хотите отправить электронное письмо.

Это ссылка, по которой они будут нажимать:

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

Модальный находится на другой странице, и я включил это в while для данных 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">amp;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>
 

Для каждой из загружаемых кнопок вы можете щелкнуть по ним, и откроется модальный, проблема в том, что он показывает данные только из самой первой строки, я делаю что-то не так, или есть лучший способ сделать это?

Спасибо!

Я думаю, что у вашего <a data-toggle="modal" data-target="#email-'.$row['id'].'">Resend Email</a> ведущего должен быть класс.

Я бы написал это проще, чем вы: <a href="" class="modal-open">Resend Email</a> .

Затем вам нужно каким-то образом передать свои данные из базы данных в каждый модальный. Поэтому я хочу обновить приведенный выше якорь, чтобы иметь и данные БД. Поэтому я бы добавил пользовательские атрибуты html для хранения любых данных, поступающих из базы данных. Я буду использовать простой случай, когда вы захотите обновить только имя. Поэтому вы должны адаптировать этот пример для своих нужд.

<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">amp;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 ссылок, вам нужно получить идентификатор и имя, хранящиеся в этой конкретной ссылке (через 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);
    });
});
 

Я думаю, это должно сработать.