javascript 使用动态内容打开 jQuery UI 对话框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11524761/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Opening jQuery UI Dialog box with dynamic content
提问by Gladen
I have a question about jQuery UI Dialog boxes and showing dynamic content from a database.
我有一个关于 jQuery UI 对话框和从数据库显示动态内容的问题。
So I got a webapplication where I also need to make a admin module to manage all users and other information. I created a page that shows all users in a list, in every row I also made an edit button. I wanted to make it so that when you press on a users' edit button, a dialog box opens and shows all the user information and stuff in the dialog box.
所以我得到了一个 web 应用程序，我还需要制作一个管理模块来管理所有用户和其他信息。我创建了一个页面，在列表中显示所有用户，在每一行中我还做了一个编辑按钮。我想让它当您按下用户的编辑按钮时，会打开一个对话框并显示对话框中的所有用户信息和内容。
So my question is, what is the best way to do this? I was thinking about making a PHP page where I execute the MySQL Query and show that in the dialog box, but I am sure there are better ways..
所以我的问题是，这样做的最佳方法是什么？我正在考虑制作一个 PHP 页面，在其中执行 MySQL 查询并在对话框中显示，但我确信有更好的方法..
EDIT: Here is the code for the page as it is right now. I added a small placeholder dialogbox that I used for testing purposes.
编辑：这是当前页面的代码。我添加了一个用于测试目的的小占位符对话框。
Javascript:
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：
<?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>
回答by Ohgodwhy
Nope. Sounds like you've got it right.
不。听起来你做对了。
placeholder for the popup ->
弹出窗口的占位符 ->
<div id="popup"></div>
jQuery ui dialog ->
jQuery ui 对话框 ->
$('#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');
}
}
});
Now that the default settings have been created, send a ajax request for the data from the php file, and update the content in the 'popup' div.
现在已经创建了默认设置，从 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');
}
});
});
in the PHP page, construct a form to be sent back ->
在PHP页面中，构造一个要发回的表单->
<?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
}
?>
回答by Alnitak
I am sure there are better ways..
我相信有更好的方法..
No, that's about it.
不，就是这样。
You'll need a PHP script to give you the user's current details, and a second in which you should combine adding a new user, or updating an existing user.
您需要一个 PHP 脚本来为您提供用户的当前详细信息，然后您应该结合添加新用户或更新现有用户。
Use AJAX to obtain the list of users, and likewise have the "current detail" page send back an JSON blob containing the information.
使用 AJAX 获取用户列表，同样让“当前详细信息”页面发回包含信息的 JSON blob。
Use the client side Javascript to populate the dialog itself.
使用客户端 Javascript 来填充对话框本身。
The hardest part is making sure that only authorised users can talk to the backend scripts.
最困难的部分是确保只有授权用户才能与后端脚本对话。
回答by Angel
Here's what I would do:
这是我会做的：
when creating the list of users, I know the id (unique) for each user. Then attach an event handler for the edit button that will make an ajax request to a server side script with that user id, the server side script will send you user details in JSON format.
have a template, for example a div, that has all the fields you need for updating user details (with classes attached or ids so you will know how to find them with selectors). when you receive data from the server you set the value of the fields in your template to the data in the response of the server then open the dialog (which is pre populated now with the data you need).
updating user details can also be done by ajax, to keep things simple. (grabbing the values in the inputs, and send a request to the server, sending also the id of the user you want to change details.
创建用户列表时，我知道每个用户的 ID（唯一）。然后为编辑按钮附加一个事件处理程序，该按钮将向具有该用户 ID 的服务器端脚本发出 ajax 请求，服务器端脚本将以 JSON 格式向您发送用户详细信息。
有一个模板，例如一个 div，其中包含更新用户详细信息所需的所有字段（附加类或 id，以便您知道如何使用选择器找到它们）。当您从服务器接收数据时，您将模板中字段的值设置为服务器响应中的数据，然后打开对话框（现在已预先填充了您需要的数据）。
更新用户详细信息也可以通过 ajax 来完成，以保持简单。（获取输入中的值，并向服务器发送请求，同时发送要更改详细信息的用户的 ID。
So... good luck!
所以……祝你好运！
回答by SomeKittens
The simplest way would be to get the information in the database using PHP, and populate the UI tables like that. The major downside would be loading time. If you find that the page is taking too long to load, then you may want to look into jQuery's .ajax()
最简单的方法是使用 PHP 获取数据库中的信息，并像这样填充 UI 表。主要的缺点是加载时间。如果您发现页面加载时间过长，那么您可能需要查看 jQuery 的.ajax()
