用戶高效的方式目前看一個人的詳細信息，點擊該其重定向到使用PHP和MySQL顯示人的詳細信息的新頁面中的鏈接。我想改變它，這樣當鏈接被點擊時，他們會在鏈接旁邊的彈出窗口中看到詳細信息。展現在我的網站一個jQuery對話框

顯示在一個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。

來源

2012-12-24 wurzel_gummidge

您可以使用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 
}); 
}

來源

2012-12-24 15:10:53 Amyth

展現在我的網站一個jQuery對話框

回答

對於實施例

相關問題