Question

I am trying to update a value within the jquery ui tab via a ui dialog.

The expected process as such:

1. From tab display, user clicks on the edit link.
2. Prompts a ui dialog box with form for user to input value.
3. User input value and save changes.
4. After saving, user is brought back to the tab with the updated value.

I have issues on point 4, and here are the codes so far.

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 – retrieve value from the database

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 – update the database

if (isset($item))
{
    mysql_query('UPDATE acc SET name ="'.$val.'" WHERE id = '.$item);
}

I have 2 questions:

1. how to get display refreshed and displayed the updated value within the tab Account listing?
2. is there a better/neater way to in the passing of the referencing the id instead of using the id attr and replacing it?

Thank you in advance.

Answer 1

You don’t need an ajax request to get the data. You can read it from the table cell.
Replace

$.post('get.php', { item: acc}).success(function(data) {
    $('#edit_acc').val(data);
});

with

var valueHolder = $(this).parent().prev();
$('#edit_acc').val(valueHolder.text());

And if you want to update the data after the save-request in the table cell, you can use the variable again:

valueHolder.text(value);

P.s.: in your code you have the id ‘account’ twice, this is not allowed, ids have to be unique; in the javascript code you’re using the id ‘acc’, so you should use it in the html too.

=== UPDATE ===

Also see this example.

P.s.: you should remove the $('#tabs').tabs('load', 2); and move the divs with the ids one, account and three into the div with the id tabs.