如何让jquery ui选项卡在更新ui对话框中的值时显示更新的数据


How to get jquery ui tab to display updated data upon updating the value in a ui dialog?

我正试图通过ui对话框更新jquery ui选项卡中的一个值。

预期过程如下:

  1. 在选项卡显示中,用户单击编辑链接
  2. 提示带有表单的用户界面对话框,供用户输入值
  3. 用户输入值并保存更改
  4. 保存后,用户将返回到具有更新值的选项卡

我在第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);
}

我有两个问题:

  1. 如何刷新显示并在选项卡帐户列表中显示更新的值
  2. 有没有更好/更简洁的方法来传递引用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为oneaccountthree的div移动到id为tabs的div中。