我正试图通过ui对话框更新jquery ui选项卡中的一个值。
预期过程如下:
- 在选项卡显示中,用户单击编辑链接
- 提示带有表单的用户界面对话框,供用户输入值
- 用户输入值并保存更改
- 保存后,用户将返回到具有更新值的选项卡
我在第4点上有问题,以下是迄今为止的代码。
HTML:
<div id="acc">
<input type="text" id="edit_acc" value="">
</div>
<div id="tabs">
<ul>
<li><a href="#one" title="one">Tab One</a></li>
<li><a href="#account" title="account">Tab Account</a></li>
<li><a href="#three" title="three">Tab Three</a></li>
</ul>
</div>
<div id="one">
<p>Tab One Listing</p>
</div>
<div id="account">
<p>Tab Account Listing</p>
<table width="100%">
<?php
while ($rows = mysql_fetch_array($query))
{
echo '<tr>';
echo '<td id="editacc_'.$rows['id'].'">'.$rows['name'].'</td>';
echo '<td><a id="acc_'.$rows['id'].'" class="link_acc" href="#">Edit</a></td>';
echo '</tr>';
}
?>
</table>
</div>
<div id="three">
<p>Tab Three Listing</p>
</div>
Javascript:
$('#tabs').tabs({
ajaxOptions: {
error: function(xhr, index, status, anchor)
{
// if page does not exist, this will load
$(anchor.hash).text('Could not load page');
}
}
});
$('.link_acc').click(function() {
acc = $(this).attr('id');
acc = acc.replace('acc_', '');
$.post('get.php', { item: acc}).success(function(data) {
$('#edit_acc').val(data);
});
// prompt dialog box with the value of the stated id
$('#acc').dialog({
title: 'Edit Account',
modal: true,
buttons: {
"Save": function() {
var data = $('#edit_acc').val();
$.post('set.php', { item: acc, val: data}).success(function() {
$('#tabs').tabs('load', 2);
$('#acc').dialog( "close" );
});
},
Cancel: function() {
$(this).dialog( "close" );
}
}
});
});
get.php-从数据库中检索值
if (isset($item))
{
// check for the cat id
$query = mysql_query('SELECT name FROM acc WHERE id = '.$item);
$rows = mysql_num_rows($query);
if ($num_rows == 1)
{
while ($result = mysql_fetch_array($query))
{
echo $result['name'];
}
}
}
set.php-更新数据库
if (isset($item))
{
mysql_query('UPDATE acc SET name ="'.$val.'" WHERE id = '.$item);
}
我有两个问题:
- 如何刷新显示并在选项卡帐户列表中显示更新的值
- 有没有更好/更简洁的方法来传递引用id,而不是使用id属性并替换它
提前谢谢。
您不需要ajax请求来获取数据。您可以从表格单元格中读取
更换
$.post('get.php', { item: acc}).success(function(data) {
$('#edit_acc').val(data);
});
带有
var valueHolder = $(this).parent().prev();
$('#edit_acc').val(valueHolder.text());
如果你想在表格单元格中的保存请求后更新数据,你可以再次使用变量:
valueHolder.text(value);
附言:在你的代码中,你有两次id"account",这是不允许的,id必须是唯一的;在javascript代码中,您使用的是id"acc",因此您也应该在html中使用它。
===更新===
另请参见此示例。
附言:您应该移除$('#tabs').tabs('load', 2);
,并将id为one
、account
和three
的div移动到id为tabs
的div中。