将动态数据传递给引导模式

Posted 2023-02-24

【中文标题】将动态数据传递给引导模式

【英文标题】：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 在页面返回到浏览器之前执行。在浏览器中看到该页面后，所有 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() 不好。我想我实际上知道，只是一个大脑放屁。但很高兴一切顺利。乐于助人。

【参考方案2】：

只需通过 ajax 使用 php 页面传递内容 并在模态中回显内容

【参考方案3】：

我刚刚做了一个最简单的方法来将 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 以模态形式提交表单。