将动态数据传递给引导模式
Posted
技术标签:
【中文标题】将动态数据传递给引导模式【英文标题】:To pass dynamic data to a bootstrap modal 【发布时间】:2014-11-13 01:04:34 【问题描述】:我正在尝试将特定帖子的 cmets 加载到模态框上。为此,我需要将帖子 ID 传递给模态,然后获取相应的 cmets。 模态由以下触发:
<a class="xyz" data-toggle="modal" data-target="#compose-modal" data-id="<?php echo $list[$i]->getID(); ?>">View Comments</a>
并且modal在页面底部定义如下:
<div class="modal fade" id="compose-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- here i need to use php to fetch the comments using post id -->
</div>
</div>
</div>
【问题讨论】:
你有没有尝试过什么? Passing data to a bootstrap modal 的可能重复项 是的,我尝试了很多选择。使用以下内容: $('a[data-toggle=modal], button[data-toggle=modal]').click(function () var data_id = ''; if (typeof $(this).data(' id') !== 'undefined') data_id = $(this).data('id'); $('#my_element_id').val(data_id); ) );我将模式中输入字段的值设置为帖子 ID。但我无法访问 php 表单中的值来获取 cmets 我提到了那篇文章。但是直接使用传递的数据。它不用作获取数据的 php 变量。这似乎是一个问题 是否需要 PHP?为什么要标记 jQuery? 【参考方案1】:我刚刚做了一个最简单的方法来将 php 动态数据传递给 Laravel 中的 Bootstrap modal > 5 目前我正在使用 larvel 7。
这是使用onclick事件的html DOM,只需调用javascript函数
<li><a href="#" onclick="showModal('$abc->id')">Some Option</a></li>
& 传递动态变量。
这是 JavaScript 代码
<script type="text/javascript">
function showModal(id=0)
$('#collectionModal').modal('show');
// here is the id of that element where do you want to display / have the passed value
// in my case i am taking in a hidden input which id is = bookID , i am using a form in my modal that why
$('#bookID').val(id);
</script>
这是模态的 HTML,我在其中获取传递的值,例如:
<input type="hidden" name="book_id" id="bookID" value="">
最后我使用 javaScript 和 Ajax 以模态形式提交表单。
【讨论】:
【参考方案2】:PHP 在页面返回到浏览器之前执行。在浏览器中看到该页面后,所有 PHP 都已执行。您可能想要做的是使用 AJAX。以下是您将如何执行此操作的一般大纲:
有一个 PHP 页面,该页面接受 ID 并以 JSON 形式返回您想要的数据。
api.php
$theId = $_POST['theId'];
//Get the information you want, and turn it into an array called $data
header('Content-Type: application/json');
echo json_encode($data);
在您的 html 中,您应该使用附加到“查看评论”的 onclick 来触发模式:
<a class="xyz" onclick = "launch_comment_modal(<?php echo $list[$i]->getID(); ?>)">View Comments</a>
然后,在底部使用您的其他 javascript:
<script>
$('#compose-modal').modal( show: false);
function launch_comment_modal(id)
$.ajax(
type: "POST",
url: "api.php",
data: theId:id,
success: function(data)
//"data" contains a json with your info in it, representing the array you created in PHP. Use $(".modal-content").html() or something like that to put the content into the modal dynamically using jquery.
$('#compose-modal').modal("show");// this triggers your modal to display
,
);
</script>
【讨论】:
模式未加载。是因为默认的引导程序吗? “不加载”是什么意思?点击不显示?你能看到控制台中发生了什么吗? 这只是一个猜测,但如果你直接复制我的 javascript 代码,它缺少一个结束括号...我刚刚修复它 成功了! $('#compose-modal').show();没有定义而是必须使用这个 $('#compose-modal').modal('show');。太感谢了!!感谢您的快速回复。 哦,我对 .show() 不好。我想我实际上知道,只是一个大脑放屁。但很高兴一切顺利。乐于助人。【参考方案3】:只需通过 ajax 使用 php 页面传递内容 并在模态中回显内容
【讨论】:
以上是关于将动态数据传递给引导模式的主要内容,如果未能解决你的问题,请参考以下文章