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

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 页面传递内容 并在模态中回显内容

【讨论】:

以上是关于将动态数据传递给引导模式的主要内容,如果未能解决你的问题,请参考以下文章

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

将 MySQL 行数据传递给引导模式

AngularJS将数据传递给引导模式

将动态数据传递给 Vue 参数/路由

将数据传递给 laravel 中的引导模式

如何使用引导程序将数据传递给模态