Databases
StackOverflow2013
Postsdbo
POHow to get jquery ui tab to display updated data upon updating the value in a ui dialog?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to get jquery ui tab to display updated data upon updating the value in a ui dialog?
    text
    copied!<p>I am trying to update a value within the jquery ui tab via a ui dialog. </p> <p>The expected process as such:</p> <ol> <li>From tab display, user clicks on the edit link.</li> <li>Prompts a ui dialog box with form for user to input value.</li> <li>User input value and save changes.</li> <li>After saving, user is brought back to the tab with the updated value.</li> </ol> <p>I have issues on point 4, and here are the codes so far.</p> <p>HTML:</p> <pre><code>&lt;div id="acc"&gt; &lt;input type="text" id="edit_acc" value=""&gt; &lt;/div&gt; &lt;div id="tabs"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#one" title="one"&gt;Tab One&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#account" title="account"&gt;Tab Account&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#three" title="three"&gt;Tab Three&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div id="one"&gt; &lt;p&gt;Tab One Listing&lt;/p&gt; &lt;/div&gt; &lt;div id="account"&gt; &lt;p&gt;Tab Account Listing&lt;/p&gt; &lt;table width="100%"&gt; &lt;?php while ($rows = mysql_fetch_array($query)) { echo '&lt;tr&gt;'; echo '&lt;td id="editacc_'.$rows['id'].'"&gt;'.$rows['name'].'&lt;/td&gt;'; echo '&lt;td&gt;&lt;a id="acc_'.$rows['id'].'" class="link_acc" href="#"&gt;Edit&lt;/a&gt;&lt;/td&gt;'; echo '&lt;/tr&gt;'; } ?&gt; &lt;/table&gt; &lt;/div&gt; &lt;div id="three"&gt; &lt;p&gt;Tab Three Listing&lt;/p&gt; &lt;/div&gt; </code></pre> <p>Javascript:</p> <pre><code>$('#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" ); } } }); }); </code></pre> <p>get.php - retrieve value from the database</p> <pre><code>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']; } } } </code></pre> <p>set.php - update the database</p> <pre><code>if (isset($item)) { mysql_query('UPDATE acc SET name ="'.$val.'" WHERE id = '.$item); } </code></pre> <p>I have 2 questions:</p> <ol> <li>how to get display refreshed and displayed the updated value within the tab Account listing?</li> <li>is there a better/neater way to in the passing of the referencing the id instead of using the id attr and replacing it?</li> </ol> <p>Thank you in advance.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload