如何创建一个 ajax pop 从数据库中提取数据？答案

【问题标题】：how to create an ajax pop pulling a data from db?如何创建一个 ajax pop 从数据库中提取数据？
【发布时间】：2010-02-11 17:56:07
【问题描述】：

谁能告诉我如何创建一个漂亮的小工具提示，如 ajax 弹出窗口？情况是这样的，我正在从数据库中提取 $row->title，然后将其呈现为这样的链接

  <?php foreach($task->result() as $row): ?>
    <tr>
    <td><a href=#><?php echo $row->title; ?></a></td>
    </tr>
   <?php endforeach; ?>

当随机用户单击该链接时，我希望它生成一个小的弹出窗口或工具提示，例如包含标题描述 $row->description 的内容，并且当用户将鼠标从中移开时，它会关闭。我知道这是可能的，但我只是不知道该怎么做。

【问题讨论】：

标签： php javascript jquery mysql ajax

【解决方案1】：

您需要jQuery。将样式表添加到

并将 javascript 添加到页面中的任何位置。

示例样式：

<style type="text/css">
  .description {
    visible: hidden;
    position: absolute;
    left: 0px;
    top: 0px;

    /* View */
    font-family: Arial,Tahoma,Verdana;
    font-size: 8pt;
    color: #bbb;
    background-color: #444;
    padding: 5px 7px;
    border: 1px solid #222;
  }
</style>

Javascript：

<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  // Add listener to links
  $(".some_class").click(function(e) {
    var description = $('<div class="description">'+ $(this).attr("description") +'</div>');
    $(this).append(description);
    description.css("left", e.pageX-4);
    description.css("top", e.pageY-4);
    description.animate({ opacity: 'toggle' }, 400, 'linear');
    // Remove description, if user moved the mouse cursor out description
    description.mouseout(function() {
      $(this).remove();
    });
    return false;
  });
});
</script>

更改您的代码：

<?php foreach($task->result() as $row): ?>
  <tr>
  <td><a href="#" class="some_class" description="<?php echo $row->description; ?>"><?php echo $row->title; ?></a></td>
  </tr>
<?php endforeach; ?>

但更好的方法是查看一些好的 jQuery 插件..

【讨论】：

但是描述不能包含html-tags。

【解决方案2】：

查看这个 jQuery 插件：http://www.w3avenue.com/2010/01/11/coda-bubble-jquery-plugin/

【讨论】：

【解决方案3】：

类似以下内容？

AJAX 获取描述，并在收到响应时创建描述“框”

var tipel = document.createElement('div');  
tipel.innerHTML = descr;`

将其添加到页面

var bodyel = document.getElementsByTagName('body').item(0);
bodyel.appendChild(tipel);`

并将其定位为：

tipel.style.position = "absolute";
tipel.style.top = newfntogetabsolutecoord_top(document.getElementById("mytitleelement"));
tipel.style.left = newfntogetabsolutecoord_left(document.getElementById("mytitleelement"));`

获取元素的绝对坐标可能很棘手，请在线查找 fn。

要关闭提示，建议将tipel 放在鼠标指针下方（您已经知道它在链接"mytitleelement" 上，只需在上面的行中稍微移动提示），然后添加一个@ 987654326@事件函数到tipel那个：

tipel.style.display = "none"; //hides or
tipel.parentNode.removeChild(tipel); //removes it from the page

（您可能会在这两行中使用this 而不是tipel）

【讨论】：