例如

Question

我网站上的用户目前通过点击链接将用户的详细信息显示在一个新页面上，该页面使用PHP和MySQL显示该人员的详细信息。我想更改此设置，以便在单击链接时，他们会在链接旁边的弹出窗口中看到详细信息。

在jQuery工具提示中显示这些细节将限制太多，因为最终我计划让用户与弹出窗口中的内容进行交互。

当页面加载时，为每个链接添加一个对话框太慢，因为页面上可能有30个或更多链接。页面完成加载之前的2秒或更长时间延迟是不可接受的。我的网站上的链接通常是在循环内创建的。

是否可以仅为单击的链接创建对话框？

我目前正在研究使用jQuery Ajax和jQuery位置和对话框函数的方法。我希望解决方案尽可能轻巧简单，避免任何页面刷新。

下面的代码显示了我的想法。使用Ajax从数据库请求数据时，此代码甚至无法发布输入数据。

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
</head>
<body>
<?php
// Shows the links
for($id=0;$id<=80;$id++){
    echo("<a id='link$id' onclick=showPopup($id)>Click me at $id</a><br/>");
}
?>
<script>
function showPopup(id){
    // Gets input needed to return database records for the link clicked
    var myObj={};
    myObj["database"]="ajaxdb";
    myObj["sql"]="select * from names"; // A where clause here would be specific to the link
    var input = JSON.stringify(myObj);
    // Gets the data to show in the dialog using Ajax
    $.post('return_rows.php',input,function(data){
        // Data would be formated here before being assigned to the div
        // ....
        // ....
        $('div#dialog'+id).html(data);
    });
    // Shows the dialog using jQueryUI
    $(function() {
        $('a#link'+id).ready(function(){
        $('#dialog'+id).dialog();
            // Positions opened dialog relative to the clicked link.
            $('#dialog'+id).dialog('widget').position({
                my: 'right top',
                at: 'left bottom',
                of: 'a#link'+id
            });
        });
    });
    document.write("<div id='dialog'+id title='Title of dialog'+id></div>");
}
</script>
</body>
</html>

任何有助于获得有效解决方案的帮助都将非常感激。但请注意，我既不熟悉Ajax也不熟悉jQuery。

Answer 1

您可以使用AJAX为特定链接请求数据。让URL返回一个JSON对象，然后使用jQuery将其附加到正文。

例如

function get_user_information(){
    $.ajax({
    url: url_that_returns_user_data.php,
    dataType: json,
    success: function(data){
        // parse the json data and append it to the body here
    },
    return false; // To avoid reloading the page
});
}

显示jQuery对话框的有效方法

1 个答案:

例如