I initially display a table which has data sent from my controller.
I then make an ajax call which returns json data to update the table every minute with the new data. Currently it only updates the first row, with the last item in the json array returned by the ajax call.
I tried unique ID's for the table row but that did not work so I am confused
Here is my Code :
<script type="text/javascript"> var update_data = function() { var data = {}; $.ajax({ url: '/Update', dataType: 'json', async: false, success: function(data) { console.log('success' + data.date ); for(var i=0; i<data.ticker.length;i++){ $("#ticker").html("<a href='/ticker?ticker="+data.ticker[i].ticker+"'>"+data.ticker[i].ticker+"</a>"); $("#totalCount").html(data.ticker[i].total_count); $("#positiveCount").html(data.ticker[i].positive_count); $("#negativeCount").html(data.ticker[i].negative_count); $("#neutralCount").html(data.ticker[i].neutral_count); $("#avgTotalCount").html(data.ticker[i].avg_total); $("#avgPositiveCount").html(data.ticker[i].avg_positive); $("#avgNegativeCount").html(data.ticker[i].avg_negative); $("#avgNeutralCount").html(data.ticker[i].avg_neutral); } }, error: function(data) { console.log('failure' + msg ); //need to traverse to success and if false, do something } }); //your jQuery ajax code }; var interval = 1000 * 60 * .1; // where X is your every X minutes setInterval(update_data, interval); update_data(); </script> <table class="table table-striped sortable" style="width: 60%; float:left;"> <td class="active countBoxHourTitle">Ticker</td> <td class="active countBoxTitle">Total</td> <td class="active countBoxTitle">Positive</td> <td class="active countBoxTitle">Negative</td> <td class="active countBoxTitle">Neutral</td> <td class="active countBoxTitle">Avg. Total</td> <td class="active countBoxTitle">Avg. Positive</td> <td class="active countBoxTitle">Avg. Negative</td> <td class="active countBoxTitle">Avg. Neutral</td> <%var i=0%> <% _.each(ticker, function (Tickerboard){ %> <tr> <% var total_change = Math.round(((ticker[i].total_count - ticker[i].yes_total)/ticker[i].yes_total)*100) var pos_change = Math.round(((ticker[i].positive_count - ticker[i].yes_pos)/ticker[i].yes_pos)*100) var neg_change = Math.round(((ticker[i].negative_count - ticker[i].yes_neg)/ticker[i].yes_neg)*100) var neut_change = Math.round(((ticker[i].neutral_count - ticker[i].yes_neut)/ticker[i].yes_neut)*100) %> <td class="active countBoxHour" id="ticker"><a href="/ticker?ticker=<%=ticker[i].ticker%>"><%=ticker[i].ticker%></a></td> <td class="success countBox" id="totalCount"><%=ticker[i].total_count%> (<%=total_change%>%)</td> <td class="success countBox" id="positiveCount"><%=ticker[i].positive_count%> (<%=pos_change%>%)</td> <td class="danger countBox" id="negativeCount"><%=ticker[i].negative_count%> (<%=neg_change%>%)</td> <td class="success countBox" id="neutralCount"><%=ticker[i].neutral_count%> (<%=neut_change%>%)</td> <td class="success countBox" id="avgTotalCount"><%=ticker[i].avg_total%></td> <td class="success countBox" id="avgPositiveCount"><%=ticker[i].avg_positive%></td> <td class="danger countBox" id="avgNegativeCount"><%=ticker[i].avg_negative%></td> <td class="success countBox" id="avgNeutralCount"><%=ticker[i].avg_neutral%></td> </tr> <%i++%> <%})%> </table> How can i do this ?
