У меня есть список пользователей, отобранных на моей странице, используя петлю PHP. Когда я нажимаю имя каждого пользователя, появляется всплывающее окно Bootsrap Modal и отображает дополнительную информацию о пользователе. Ссылки выглядят так.
<a href="#user" data-toggle="modal" data-id="{$user['id']}">UserName</a> Как вы можете видеть, я get_user_by_id() идентификатор пользователя модальности Bootstrap, чтобы я мог использовать его для получения другой информации пользователя, вызвав get_user_by_id() в Bootstrap Modal.
Модальный
<div class="modal fade" id="user"> <div class="modal-header"> <button class="close" data-dismiss="modal">×</button> <h3>Modal header</h3> </div> <div class="modal-body"> <?php $user = get_user_by_id($id); ?> <input type="text" name="bookId" id="bookId" value=""/> </div> </div>
Код JS выглядит следующим образом:
$('#user').on('show.bs.modal', function (event) { var button = $(event.relatedTarget) var id = button.data('id') })
Согласно приведенному выше JS-коду, у меня есть идентификатор пользователя в переменной var id . Но, я никак не могу представить, как использовать это значение для указанной выше функции PHP в качестве аргумента.
Есть ли какой-либо возможный способ для этого?
Я отредактировал вопрос, чтобы быть более уникальным в методах AJAX, большинство ответов было основано на AJAX
PS: Я очень новичок в PHP и Bootstrap.
Вы захотите использовать ajax для запуска PHP. Поскольку @Tom утверждает, что javascript не может получить доступ к PHP после загрузки в DOM. PHP является языком на стороне сервера и может быть доступен только как таковой.
Как только вы подключитесь к PHP через ajax, вы можете загрузить div с содержимым из возврата. Только ПОСЛЕ содержимого загружается, если вы откроете модальный, иначе у вас появится неуклюжий вид окна, а затем появится только что отображаемое содержимое.
Основной пример
$(".btn").click(function(){ // AJAX code here. $.ajax( .... success: function($data){ $('.target').html(data) $("#myModal").modal('show'); } ); });
Таким образом, вы хотите решить эту проблему, это невозможно. Поскольку для получения данных с сервера в PHP вы должны запросить сервер, и лучше всего, только способ отправить форму. Как здесь вы хотите показать свои данные в модальном формате, поэтому вам нужно сделать это асинхронно. Таким образом, вы можете попробовать,
//keep a button to show the modal for user details <button class="detail" data-toggle="modal" data-target="#user_modal" data-id="<?= $user->id ?>">Detail</button> //and using jQuery on the click of the above button post a form to your desire url $(document).on("click", ".detail", function () { var id = $(this).data('id'); $.ajax({ type: "POST", url: "your/url", data: { id: id}, success: function(data) { //and from data you can retrive your user details and show them in the modal }}); });
Модификации Bootstrap позволяют загружать удаленную страницу, и это то, что вы ищете, я считаю …
<a href="userdata.php?uid=<?php echo $user['id']?>" data-target="#user" data-toggle="modal" data-id="{$user['id']}">UserName</a>
Тогда модальная становится:
<div class="modal fade" id="user" tabindex="-1" role="dialog" aria-labelledby="user" aria-hidden="true"><div class="modal-dialog modal-lg"><div class="modal-content"></div></div></div>
И userdata.php
<?php $user_id = $_GET['uid']; $user = get_user_by_id( $user_id ); ?> <div class="modal-header"> HEADER STUFF GOES HERE </div> <div class="modal-body"> USER INFO GOES HERE </div> <div class="modal-footer"> MODAL FOOTER HERE </div>
У Bootstrap modal есть опция remote , но на Bootstrap v3.3.0 устарела и будет удалена в v4. Вы можете использовать jQuery.load . Например
$( "#some-click" ).on('click', function() { var userId = button.data('id'); //get user id here //jQuery.load set html with modal and user details by id $( "#user" ).load( "/not-here.php", { id:userId }); });