jquery - Making a refresh function refresh only certain parts of a page -

in listview have several list of questions, right try make when click on refresh button, question in listview refresh in random order. wondering if can refresh list part of page not whole page?

 <ul id="list" data-role="listview" data-filter="true" data-filter-reveal="true"      data-filter-placeholder="search questions..." data-inset="true" ></ul> <script> var jsonfile = 'data.json'; var qdata = []; var qhint = [];  $.getjson(jsonfile, function(data) {  while (data.activity.length) {     var index = math.floor(math.random() * data.activity.length);     qdata.push(data.activity[index].question);     qhint.push(data.activity[index].hint);         data.activity.splice(index, 1)     }  (var = 0; < 8; i++) {     question(qdata[i], i);      hint(qhint[i], i);     $('#text' + (i + 1)).textinput();     $('#submit' + (i + 1)).button();     $('#cancel' + (i + 1)).button();  }  function question(data, i) {     $('#list').append('<li><a href=#mypanel'+ (i + 1)+ '  data-icon="arrow-l" data-iconpos="notext" data-shadow="false" data-iconshadow="false" class="ui-icon-nodisc" id="list">'+ data + '</a></li>'); // list item  }  function hint(data, i)  {     $('#mypanel' + (i + 1)).append("<div align='center' style='margin-top:30px;'><font style='font-family:helvetica, arial, sans-serif ;color:white;' size='5px' ><b>question hint : </b></font></div><br/><label for=text" + (i + 1) + " id=paneltitle"+ (i + 1)+ " style='margin-top:10px;text-align:center;color:white;'>"+ data + "</label>");// panel item     $('#paneltitle' + (i + 1)).append('<input type="text" id=text'+ (i + 1) + ' >');     $('#mypanel' + (i + 1)).append('<a href="#header" data-role="button" id=submit'+ (i + 1)+ ' data-inline="true" data-rel="close" data-icon="check" style="margin-left:75px;">submit</a>');     $('#mypanel' + (i + 1)).append('<a href=#mypanel'+ (i + 1)+ ' data-role="button" id=cancel'+ (i + 1)+ ' data-inline="true" data-rel="close" data-icon="delete2" style="margin-left:75px;">cancel</a>');  }  //affected part $('#pagerefresh').click(function() {            location.reload();  });  $('#list').listview('refresh'); })          <div data-theme="a" data-role="footer" data-position="fixed">             <div data-role="navbar">             <ul>                 <li><a id="pagerefresh" data-icon="refresh">refresh</a></li>             </ul>             </div>         </div> 

this do;

jsfiddle

html

<ul id="mylist">     <li>1</li>     <li>2</li>     <li>3</li>     <li>4</li>     <li>5</li>     <li>6</li> </ul>  <button id="mybutton">click me</button> 

javascript

'use strict';  array.prototype.shuffle = function() {     var s = [];     while (this.length) s.push(this.splice(math.random() * this.length, 1)[0]);     while (s.length) this.push(s.pop());     return this; }  $(document).ready(function(){     $('#mybutton').click(function() {         // children of <ul>         var lis = $('#mylist').children().get();          // shuffle dom elements (children) in array         lis.shuffle();          // empty <ul> list         $('#mylist').html('');          // loop shuffled array of dom-elements , put them in <ul>         (var = 0; < lis.length; i++) {             $('#mylist').append(lis[i]);         }     }); }); 

i'm using clean example easier-to-understand demo. think it's easier understand clean example, throwing code in loop.

good luck!