打开带有动态内容的 jQuery UI 对话框

Posted 2023-02-24

【中文标题】打开带有动态内容的 jQuery UI 对话框

【英文标题】：Opening jQuery UI Dialog box with dynamic content

【发布时间】：2012-07-16 12:11:29

【问题描述】：

我有一个关于 jQuery UI 对话框和显示来自数据库的动态内容的问题。

所以我得到了一个 web 应用程序，我还需要在其中创建一个管理模块来管理所有用户和其他信息。我创建了一个在列表中显示所有用户的页面，在每一行中我还制作了一个编辑按钮。我想这样当您按下用户的编辑按钮时，会打开一个对话框并在对话框中显示所有用户信息和内容。

所以我的问题是，最好的方法是什么？我正在考虑制作一个 php 页面，在其中执行 mysql 查询并在对话框中显示它，但我相信有更好的方法..

编辑：这里是当前页面的代码。我添加了一个用于测试目的的小占位符对话框。

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>

【问题讨论】：

@RobinMaben，他已经描述了他的意图，并在开始工作前征求意见，您还想了解什么..？

把相关代码sn-ps贴在这里也无妨。这样一来，这个问题就会对遇到类似情况的其他人有用。

我在帖子中添加了我当前的代码。其中大部分只是关于当前用户的列表。我还没有真正开始研究 jQuery 部分。

【参考方案1】：

我相信有更好的方法..

不，仅此而已。

您需要一个 PHP 脚本来为您提供用户的当前详细信息，以及您应该结合添加新用户或更新现有用户的第二个脚本。

使用 AJAX 获取用户列表，同样让“当前详细信息”页面发回包含信息的 JSON blob。

使用客户端 Javascript 填充对话框本身。

最难的部分是确保只有授权用户才能与后端脚本对话。

【参考方案2】：

最简单的方法是使用 PHP 获取数据库中的信息，然后像这样填充 UI 表。主要的缺点是加载时间。如果您发现页面加载时间过长，那么您可能需要查看 jQuery 的 .ajax()

【参考方案3】：

我会这样做：

在创建用户列表时，我知道每个用户的 ID（唯一）。然后为编辑按钮附加一个事件处理程序，该处理程序将向具有该用户 ID 的服务器端脚本发出 ajax 请求，服务器端脚本将以 JSON 格式向您发送用户详细信息。

有一个模板，例如一个 div，其中包含更新用户详细信息所需的所有字段（带有附加的类或 ID，因此您将知道如何使用选择器找到它们）。当您从服务器接收数据时，您将模板中字段的值设置为服务器响应中的数据，然后打开对话框（现在已预先填充了您需要的数据）。

更新用户详细信息也可以通过 ajax 完成，以保持简单。 （获取输入中的值，并向服务器发送请求，同时发送要更改详细信息的用户 ID。

所以...祝你好运！

【参考方案4】：

不。听起来你做对了。

弹出窗口的占位符 ->

<div id="popup"></div>

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');
    
  
);

现在已经创建了默认设置，从 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页面中，构造一个要发回的表单->

<?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
      
?>

【讨论】：

是的，这就是我要找的。 :) 从来没有真正使用过 jQuery UI 来制作这些东西，所以一些示例代码总是有帮助的！

@Gladen 我喜欢在我的回答中彻底。

FWIW，如果您要依赖客户端 JS，最好让所有脚本返回 JSON，然后在客户端填写表单。

@Alnitak 是的，确实如此！保持那些敏锐的反应。欢迎您编辑我的帖子并返回 json_encoded'ed 数组！

还有一件事让我感到困惑，我得到了每个用户的 ID 号。我已经通过查询将其从数据库中取出。如何通过 AJAX 发送该 ID 号？