Databases
StackOverflow2013
Postsdbo
PODynamic table column update by id, done right?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODynamic table column update by id, done right?
    text
    copied!<p>I am kinda new to Ajax/Json so I would like to know if the following is at least near to the best practice. The goal is to update specific columns (in this case quantity and price) of a table every x seconds.</p> <p>I got a HTML table defined like this:</p> <pre><code>&lt;table id="#edition_table&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td class="name"&gt;&lt;a href="?card=12345"&gt;Lightning Bolt&lt;/a&gt;&lt;/td&gt; [...] &lt;td class="qty"&gt;2&lt;/td&gt; &lt;td class="price"&gt;$4.99&lt;/td&gt; &lt;tr&gt; &lt;tr&gt; &lt;td class="name"&gt;&lt;a href="?card=23456"&gt;Fireball&lt;/a&gt;&lt;/td&gt; [...] &lt;td class="qty"&gt;0&lt;/td&gt; &lt;td class="price"&gt;$0.07&lt;/td&gt; &lt;tr&gt; [...] &lt;/tbody&gt; &lt;/table&gt; </code></pre> <p>And a JS function defined like this:</p> <pre><code>function edition_update(edition) { var table_rows = $('#edition_table').find('tbody tr td.name a'); $.ajax({ type: 'GET', url: 'ajax_edition_update.php', data: { edition : edition }, dataType: 'json', success: function(json_rows) { var new_qty, new_price; table_rows.each(function(index) { var td_id = $(this).attr('href').replace('?card=', ''); for (i in json_rows) { if (json_rows[i].card_id == td_id) { new_qty = json_rows[i].qty; new_price = json_rows[i].low_price; break; } } var parent_tr = $(this).parent().parent(); parent_tr.find('td.qty').text(new_qty); parent_tr.find('td.price').text(!isNaN(new_price) ? '$' + new_price : new_price); }); } }); setTimeout(edition_update, 30000, edition); } </code></pre> <p>The PHP file returns a JSON including card_id, qty and low_price.</p> <p>This does work fine. I guess I could set up a <code>data-id=[card_id]</code> on the class=name td to get rid of the .replace, but that kinda blows up the html footprint as the id is already present.</p> <p>The real question is whether any performance improvements (especially regarding the two loops) are possible or necessary? The target number of rows per table is arround 500 and the content and order is totally dynamic/unpredictable, of course.</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