在 jQuery UI 对话框中获取 MySQL 数据

Question

我有用户列表，我想在 jQuery UI 弹出窗口中打开每个用户详细信息。我编写了整个代码，但我很困惑如何将每个用户 ID 传递给对话框。下面是我的代码，

HTML

<div id="dialog" title="User Detail">
  <p><?php $userID = $_GET[userID]; ?></p>
</div>

<a id="opener" href="#?userID=1">User 1</a>
<a id="opener" href="#?userID=2">User 2</a>

jQuery

jQuery.noConflict();
jQuery(document).ready(function(){
    jQuery("#dialog").dialog({
        modal: true,
        autoOpen: false,
        resizable: false
    });
    jQuery( "#opener" ).click(function() {
    jQuery( "#dialog" ).dialog( "open" );
  });
});

Answer 1

首先，开始 ID 必须是唯一的，所以我将您的开启者 ID 更改为一个类。

那么你可能想看看这个：

jQuery.noConflict();
jQuery(document).ready(function(){
    jQuery("#dialog").dialog({
        modal: true,
        autoOpen: false,
        resizable: false
    });
    jQuery( ".opener" ).click(function() {
        jQuery("#dialog p").text(jQuery(this).attr("href").substring(jQuery(this).attr("href").indexOf('=') +1));
    jQuery( "#dialog" ).dialog( "open" );
  });
});

简而言之，您构建对话框，然后显示它。

还有工作的Fiddle

Answer 2

首先，您不能为 DOM 元素重复使用 ID，因此您使用的选择器仅适用于 id="opener" 的链接的第一个实例。

当您打开对话框时，jQuery 只是在当前页面上显示一个已经存在的元素，而不是向该页面或新页面发出请求。 $_GET 是服务器端的超级全局，只有在页面加载时才会显示。

你需要做的是：

1. 使用“opener”作为类而不是 id
2. 覆盖对话框的打开状态
3. 接受附加参数的函数将该参数附加到 您的对话框标记

您可以使用以下代码从 href 属性中获取用户 ID 来完成此操作：

HTML：

<div id="dialog" title="User Detail">
  <p></p>
</div>

<a class="opener" href="#?userID=1">User 1</a>
<a class="opener" href="#?userID=2">User 2</a>

Javascript：

jQuery.noConflict();
jQuery(document).ready(function(){
    jQuery("#dialog").dialog({
        modal: true,
        autoOpen: false,
        resizable: false,
        open: function (event, ui) {
          var id = $(this).data('id');
          $('#dialog p').text(id);
        }
    });
    jQuery( ".opener" ).click(function(event) {
        event.preventDefault();
        var id = $(this).attr('href').split('=')[1]; // grab id
        jQuery( "#dialog" ).data('id', id).dialog( "open" );
    });
});

生成每个链接的 PHP 如下所示：

$users = array(
  array(
    'id' => 1,
    'name' => 'User 1',
  ),
  array(
    'id' => 2,
    'name' => 'User 2',
  )
);

foreach ($users as $user) {
  print "<a class=\"opener\" href=\"#?userID=$user[id]\">$user[name]</a>";
}

*注意我对最后一个很懒，并在打印的字符串中转义了引号