Bootstrap MYSQL PHP - Отправить Модальное содержание

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

Это ссылка, на которую они нажимают:

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

0

Ответов: 1

1 принят

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

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

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

Думаю, это должно сделать трюк.

JavaScript, PHP, JQuery, MySQL, твиттер-самозагрузки,
Похожие вопросы
Яндекс.Метрика