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

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

i trying update value within jquery ui tab via ui dialog.

the expected process such:

from tab display, user clicks on edit link. prompts ui dialog box form user input value. user input value , save changes. after saving, user brought tab updated value.

i have issues on point 4, , here codes 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 1 listing</p> </div> <div id="account"> <p>tab business relationship 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 3 listing</p> </div>

javascript:

$('#tabs').tabs({ ajaxoptions: { error: function(xhr, index, status, anchor) { // if page not exist, 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 value of stated id $('#acc').dialog({ title: 'edit account', modal: true, buttons: { "save": function() { var info = $('#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 database

if (isset($item)) { // check cat id $query = mysql_query('select name acc id = '.$item); $rows = mysql_num_rows($query); if ($num_rows == 1) { while ($result = mysql_fetch_array($query)) { echo $result['name']; } } }

set.php - update database

if (isset($item)) { mysql_query('update acc set name ="'.$val.'" id = '.$item); }

i have 2 questions:

how display refreshed , displayed updated value within tab business relationship listing? is there better/neater way in passing of referencing id instead of using id attr , replacing it?

thank in advance.

you don't need ajax request data. can read 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 want update info after save-request in table cell, can utilize variable again:

valueholder.text(value);

p.s.: in code have id 'account' twice, not allowed, ids have unique; in javascript code you're using id 'acc', should utilize in html too.

=== update ===

also see example.

p.s.: should remove $('#tabs').tabs('load', 2); , move divs ids one, account , three div id tabs.

php jquery jquery-ui