javascript - How to update data periodically without refreshing the page? -

i trying create web app monitor system activity, , using flask cms. more specifically, stuck trying system information update periodically without page refreshing. right i'm testing web app retrieving local information in percentages.

i created route called "/refresh", , added local information in json format:

@app.route('/refresh')     def refreshdata():         systeminfo = {'cpuload': si.getcpu(), 'memload': si.getmem(), 'diskload': si.getdiskspace()}         return jsonify(systeminfo) 

the data looks this:

{   "cpuload": 4.3,    "diskload": 0.7,    "memload": 27.8 } 

as of using flask's variables display information in template, access json data in script within html , set html element , have update every often. i've tried using knockout, couldn't work either. template looks this:

<ul id='sysinfo'>     <li>hostname: {{ sysinfo[0] }}</li>     <li>cpu core count: {{ sysinfo[1] }}</li>     <script type='text/javascript' src="http://code.jquery.com/jquery.min.js"></script>     <script type='text/javascript' src="http://knockoutjs.com/downloads/knockout-3.1.0.js">         function update() {             $.getjson('/refresh', function(data) {                 $('#cpu').html(data[cpuload]);                 window.settimeout(update, 5000);             });         }     </script>     <li>         <div id="progress">             <span id="percent">cpu usage: <div id="cpu"></div>%</span>             <div style ='height: 20px; background-color: green; width: {{ cpuload }}%;'></div>         </div>         </li> 

i aware script in html doesn't make sense, want data using getjson (or whatever's best), , put data html.

update

check out jsfiddle did demonstrates it. replace button click polling of data whenever need:

full bore, comments: http://jsfiddle.net/fgbkd/15/

bare bones, works: http://jsfiddle.net/fgbkd/1/

i done updating jsfiddle make more clearer , detailed.

end update

knockout perfect this, first-timer getting viewmodel going -- , refreshing new data, can confusing.

function myviewmodel (data) {     data = data || {}; var self = this;     self = ko.mapping.fromjs(data);   return self; } 

that's self-defining viewmodel. it's knockout mapping - takes json , creates viewmodel it. otherwise have build own.

now need create object off of it, , fill data. you'd way:

var myserverdata; $(document).ready(function(){     myserverdata = new myviewmodel(data_json_received);    //     ko.applybindings(myobject);     //myserverdataapplies bindings found in html }); 

there. you've taken , created myserverdata, knockout object mapped viewmodel. fun stuff, actual toy play with, speak. myobject.cpuload have value here.

now, if need refresh myserverdata, because did ajax call, , need viewmodel object reflect new data, you'd simply:

ko.mapping.fromjs(new_json_data, {}, myserverdata); 

like, maybe:

$.ajax({    ....   success : function(data){      ko.mapping.fromjs(data, {}, myserverdata);   //refreshes   } }); 

bingo, done. myserverdata has new json in it, , html on page instantly reflects that, such as:

<span data-bind="text: cpuload"></span> <span data-bind="text: diskload"></span> <span data-bind="text: memload"></span> 

so, load knockout, knockout mapping js files, use viewmodel showed you, use mapping.fromjs line update viewmodel anytime new data.