将信息动态加载到 Twitter Bootstrap 模式

Posted 2023-02-22

【中文标题】将信息动态加载到 Twitter Bootstrap 模式

【英文标题】：Dynamically load information to Twitter Bootstrap modal

【发布时间】：2012-06-15 17:59:31

【问题描述】：

问题：

我想通过使用 jQuery 将链接属性中的值传输到 php/SQL 查询。

HTML 代码：

<a data-toggle="modal" href="#myModal" id="1"><i class="pull-right icon-eye-open"></i>html</a>

PHP 代码：

<div id="myModal" class="modal hide fade">
    <div class="modal-header">
      <button class="close" data-dismiss="modal">&times;</button>
      <h3>Title</h3>
    </div>
    <div class="modal-body">            
        <?php
            $query = "SELECT * FROM table WHERE id = ID FROM JQUERY HERE";
            $result = mysql_query($query) or die ('Error (' . mysql_errno() . ') ' . mysql_error());
        ?>
    </div>
    <div class="modal-footer">
      <a href="#" class="btn btn-info" data-dismiss="modal" >Close</a>
    </div>
</div>

场景：

当用户单击具有 data-toggle="modal" 的链接元素时，jQuery 应该获取 id-attribute 的值（在本例中为 1）并将其发送到 SQL 查询，以便SQL 查询如下所示：

$query = "SELECT * FROM table WHERE id = 1";

jQuery 代码：

$("a[data-toggle=modal]").click(function()
    var essay_id = $(this).attr('id');
    //Find $essay set it to essay_id in PHP
    //Alternatively create a $_SESSION['EID'] here
);

问题：

如何使用 jQuery 在 PHP 中设置变量 ($essay)？或者如何通过 jQuery 在 PHP 中创建会话变量？

【问题讨论】：

我想你什么都没试过，因为实际上没有问题:)

我添加了一些 jQuery 代码和一个问题。

【参考方案1】：

这里是解决方案，

<a href="#" id="1" class="push">click</a> 

在你的模态主体上使用一个 div ，像这样

    <div class="modal-body">  

             <div class="something" style="display:none;">
                    // here you can show your output dynamically 
             </div>
    </div>

现在使用 ajax 调用将数据放入.something。请查看http://api.jquery.com/jQuery.ajax/ 以了解有关 jquery ajax 的更多信息。

   $(function()

   $('.push').click(function()
      var essay_id = $(this).attr('id');

       $.ajax(
          type : 'post',
           url : 'your_url.php', // in here you should put your query 
          data :  'post_id='+ essay_id, // here you pass your id via ajax .
                     // in php you should use $_POST['post_id'] to get this value 
       success : function(r)
           
              // now you can show output in your modal 
              $('#mymodal').show();  // put your modal id 
             $('.something').show().html(r);
           
    );


);

   );

【讨论】：

AJAX 如何检测到它应该从 a[data-toggle=modal] 获取 ID？不应该还有一个click()函数吗？

是的，您可以使用 click() 。我只是告诉你如何做这件事。

请更正这一行数据：'post_id='+eassay_id 正确的变量是“essay_id”。 *** 不允许我只更改一个字符！ @TareqJobayere

【参考方案2】：

最终解决方案

HTML 代码：

<div id="myModal" class="modal hide fade">
    <div class="modal-header">
      <button class="close" data-dismiss="modal">&times;</button>
      <h3>Title</h3>
    </div>
    <div class="modal-body">            
        <div id="modalContent" style="display:none;">

        </div>
    </div>
    <div class="modal-footer">
      <a href="#" class="btn btn-info" data-dismiss="modal" >Close</a>
    </div>
</div>  

jQuery 代码：

$("a[data-toggle=modal]").click(function() 
   
    var essay_id = $(this).attr('id');

    $.ajax(
        cache: false,
        type: 'POST',
        url: 'backend.php',
        data: 'EID='+essay_id,
        success: function(data) 
        
            $('#myModal').show();
            $('#modalContent').show().html(data);
        
    );
);

【讨论】：

当前实现中的 .show() 似乎已更改.... $('div#myModal').modal('show')

为什么需要'cache: false'？

【参考方案3】：

使用 jQuery 获取 ID 通过 AJAX 将其传递给某个脚本 取回您的结果并随心所欲地处理它们

http://api.jquery.com/jQuery.ajax/

【讨论】：

SQL 查询在同一页面上，并且不会重新加载。我想通过更改用户按下的 ID 来动态更改 的内容。查看更新的解释和 jQuery 代码。