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

Dynamically load information to Twitter Bootstrap modal

提问by kexxcream

Problem:

问题：

I would like to transfer by using jQuery a value in an link-attribute to PHP/SQL query.

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

HTML code:

HTML代码：

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

PHP code:

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>

Scenario:

设想：

When the user clicks the link-element that has data-toggle="modal" then jQuery should take the value of the id-attribute (which is 1 in this case) and send it to the SQL-query so that the SQL query would look like:

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

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

jQuery code:

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
});

Question:

题：

How do I use jQuery to set a variable ($essay) in PHP? or how can I create a session variable in PHP through jQuery?

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

回答by Tareq Jobayere

here is the solution ,

这是解决方案，

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

use a div on your modal body , like this

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

    <div class="modal-body">  

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

now put data into the .somethingwith ajax calling .please check http://api.jquery.com/jQuery.ajax/to know more about jquery ajax.

现在将数据放入.somethingajax 调用中。请查看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);
           }
    });


});

   });

回答by kexxcream

Final solution

最终解决方案

HTML code:

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 code:

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);
        }
    });
});

回答by Stan

1. Get ID with jQuery
2. Pass it to some script via AJAX
3. Get your results back and do with them what you please

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

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

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