我对jQuery UI对话框有疑问,并显示数据库中的动态内容。
所以我得到了一个web应用程序,我还需要创建一个管理模块来管理所有用户和其他信息。我创建了一个页面,显示列表中的所有用户,在每一行中我也创建了一个编辑按钮。我想这样做,当你按下用户的编辑按钮时,会打开一个对话框,在对话框中显示所有用户信息和内容。
所以我的问题是,最好的方法是什么?我正在考虑创建一个PHP页面,我执行MySQL Query并在对话框中显示,但我相信有更好的方法..
编辑:这是现在页面的代码。我添加了一个用于测试目的的小占位符对话框。
使用Javascript:
script type="text/javascript">
jQuery(document).ready( function(){
jQuery(".edit-button").click( showDialog );
//variable to reference window
$myWindow = jQuery('#myDiv');
//instantiate the dialog
$myWindow.dialog({ height: 600,
width: 800,
modal: true,
position: 'center',
autoOpen:false,
title:'Bewerk therapeut',
overlay: { opacity: 0.5, background: 'black'}
});
}
);
//function to show dialog
var showDialog = function() {
$myWindow.show();
//open the dialog
$myWindow.dialog("open");
}
var closeDialog = function() {
$myWindow.dialog("close");
}
PHP:
<?php
//LEFT OUTER JOIN Vragen ON Vragen.bsn_nummer = Gebruikers.bsn_nummer
include_once 'classes/class.mysql.php';
$db = new Mysql();
$dbUsers = new Mysql();
$db->Query("SELECT * FROM USERS_users ORDER BY username ASC");
$db->MoveFirst();
echo "<table>";
echo "<tr><th> </th><th> </th><th>BSN Nummer</th><th>Gebruikersnaam</th> <th>Voornaam</th><th>Achternaam</th></tr>";
while(! $db->EndOfSeek()) {
$row = $db->Row();
$dbUsers->Query("SELECT * FROM Gebruikers WHERE user_idnr = '{$row->user_idnr}'");
$rowUser = $dbUsers->Row();
echo "<tr><td><a class='del-button' href='#'><img src='afbeeldingen/edit-delete.png' /></a></td>
<td><a class='edit-button' href='#'><img src='afbeeldingen/edit.png' /></a> </td>
<td>".@$rowUser->bsn_nummer."</td>
<td>".@$row->username."</td>
<td>".@$rowUser->voornaam."</td>
<td>".@$rowUser->achternaam."</td></tr>";
}
echo "</table>";
?>
<div id="myDiv" style="display: none">
<p>Gebruiker bewerken</p>
</div>
答案 0 :(得分:6)
不。听起来你说得对。
弹出广告的占位符 - &gt;
<div id="popup"></div>
jQuery ui对话框 - &gt;
$('#popup').dialog({
autoOpen: 'false',
modal: 'true',
minHeight: '300px',
minWidth: '300px',
buttons: {
'Save Changes': function(){
$.ajax({
url: 'path/to/my/page.ext',
type: 'POST',
data: $(this).find('form').serialize(),
success: function(data){
//some logic to show that the data was updated
//then close the window
$(this).dialog('close');
}
});
},
'Discard & Exit' : function(){
$(this).dialog('close');
}
}
});
现在已经创建了默认设置,从php文件发送数据的ajax请求,并更新'popup'div中的内容。
$('.edit').click(function(e){
e.preventDefault();
$.ajax({
url: 'path/to/my/page.ext',
type: 'GET',
data: //send some unique piece of data like the ID to retrieve the corresponding user information
success: function(data){
//construct the data however, update the HTML of the popup div
$('#popup').html(data);
$('#popup').dialog('open');
}
});
});
在PHP页面中,构造一个要发回的表单 - &gt;
<?php
if(isset($_GET['id'])){
//build the query, do your mysql stuff
$query = mysql_query(sprintf("SELECT * FROM sometable WHERE id = %d", $_GET['id']));
//construct constant objects outside of the array
?>
<form>
<?php
while($row = mysql_fetch_array($query)){
?>
<tr>
<td>
<input type="text" name="<?php echo $row['id']?>" value="<?php echo $row['name'] ?>" />
</td>
</tr>
<?php
}
?>
</form>
<?php
}
?>
答案 1 :(得分:1)
我相信有更好的方法..
不,就是这样。
您需要一个PHP脚本来为您提供用户的当前详细信息,并且您需要在其中合并添加新用户或更新现有用户。
使用AJAX获取用户列表,同样让“当前详细信息”页面发送回包含该信息的JSON blob。
使用客户端Javascript填充对话框本身。
最难的部分是确保只有授权用户才能与后端脚本通信。
答案 2 :(得分:1)
这就是我要做的事情:
创建用户列表时,我知道每个用户的id(唯一)。然后为编辑按钮附加一个事件处理程序,该处理程序将向具有该用户ID的服务器端脚本发出ajax请求,服务器端脚本将以JSON格式向您发送用户详细信息。
有一个模板,例如div,它包含更新用户详细信息所需的所有字段(附加了类或ids,因此您将知道如何使用选择器查找它们)。当您从服务器接收数据时,您将模板中字段的值设置为服务器响应中的数据,然后打开对话框(现在预先填充了您需要的数据)。
更新用户详细信息也可以通过ajax完成,以保持简单。 (抓取输入中的值,并向服务器发送请求,同时发送要更改详细信息的用户的ID。
所以......祝你好运!
答案 3 :(得分:0)
最简单的方法是使用PHP获取数据库中的信息,并填充UI表。主要缺点是加载时间。如果您发现页面加载时间太长,那么您可能需要查看jQuery的.ajax()