如何将jQuery变量传递给由对话框打开的div

时间:2012-07-29 14:55:32

标签: jquery html

我正在为我的某个网站开发用户管理面板,我正在试图找出如何将所有正确信息正确传递到对话框。

显示用户的 HTML 是:

<table>
  <tr>
    <td>{$v.id}</td>
    <td><a href="#" class="editUser" data-userid="{$v.id}">{$v.username}</a></td>
    <td>{if $smarty.now - $v.last_active <= 900}<span style="color: green;">Online</span>{else}<span style="color: #e61e1e;">Offline</span>{/if}</td>
    <td>{$v.email}</td>
    <td>{$v.time}</td>
    <td>{$v.notes}</td>
    <td align="center"><input name="delete" type="checkbox"/></td>
  </tr>
</table>

当您点击用户名时,它会打开一个包含 jQuery UI 的对话框,这是处理该用户界面的 jQuery 代码:

   $('a.editUser').click(function(){
        $('#editUser').dialog('open');
        //var userID = $(this).data('userid');
        //var username = $(this).attr('title');
        //$('#editUser').html(userID);
   });

很简单。注释掉的代码就是我用来测试的代码,以确保区分用户。

当然,这会打开对话框并且工作正常。但是,我不确定如何设置div以在对话框打开时正确显示用户的信息。此外,我希望能够向用户的帐户提交更改,我不知道如何将用户的ID提交给表单处理器,以便知道要修改哪个用户。

我一直在谷歌上搜索一段时间,并发现了很多类似的线程,但没有一个能真正涵盖这一点。

2 个答案:

答案 0 :(得分:2)

使用

创建#editUser div
<div id="editUser">
<span id="username"></span>
</div>

在您的函数中,在调用dialog函数之前,使用点击的用户信息填充对话框。

$('a.editUser').click(function(){
        $("#username").html($(this).data('userid'));
        $('#editUser').dialog('open');
        //var userID = $(this).data('userid');
        //var username = $(this).attr('title');
        //$('#editUser').html(userID);
   });

现在使用隐藏变量在其他地方创建表单。在提交按钮上,调用一个javascript函数,它将从上面提到的id中提取信息,如$(“#username”)或JS变量,如果你使用它们并在提交之前设置到表单中。

答案 1 :(得分:1)

好了,因为对话框div与上面的代码在同一个文档中,你只需要在对话框的div中添加一个带有已知id的div,例如<div id="stufftochange"></div>

然后,在打开div之前,请调用$('#stufftochange').html("user's info here");动态更改其内容,然后$('#editUser').dialog('open');