c# - MVC 4, jTable 2.3, Table data isn't rebuilt on second (+) call -

a selection on first table results in change in second table. however, change occurs once. subsequent calls generate valid json html remains unchanged.

the controller:

[httppost]     public jsonresult m1list(int jtstartindex, int jtpagesize, string jtsorting)     {         try         {             list<tblm> m1 = new datahelper().getm1(jtsorting, jtpagesize, jtstartindex);             int m1count = new datahelper().getm1count();              return json(new { result = "ok", records = m1, totalrecordcount = m1count });         }         catch (exception ex)         {             return json(new { result = "error", message = ex.message });         }     }      [httppost]     public jsonresult m2list(int mid, int jtstartindex, int jtpagesize)     {         try         {             list<viewm1a> m2 = new datahelper().getm2form1(mid.tostring(), "mid", jtpagesize, jtstartindex);             int m2count = new datahelper().getm2form1count(mid.tostring());              return json(new { result = "ok", records = m2, totalrecordcount = m2count });         }         catch (exception ex)         {             return json(new { result = "error", message = ex.message });         }     } 

the js:

$(document).ready(function () {     $('#m1tc').jtable({         paging: true,         sorting: true,         defaultsorting: 'name asc',         selecting: true, //enable selecting         multiselect: false, //allow multiple selecting         actions: {             listaction: '@url.action("m1list")'         },         fields: {             mid: {                 title: 'id'             }         },         selectionchanged: function () {             var $selectedrows = $('#m1tc').jtable('selectedrows');             $selectedrows.each(function () {                 var record = $(this).data('record');                 buildm2table(record.mid);             });             $('#m2tc').jtable('load');         }     });     $('#m1tc').jtable('load'); });  function buildm2table(actionurl) {     $('#m2tc').jtable({         paging: true,         sorting: true,         defaultsorting: 'name asc',         selecting: true, //enable selecting         multiselect: true, //allow multiple selecting         selectingcheckboxes: true, //show checkboxes on first column         actions: {             listaction: '/connections/m2list?mid=' + actionurl         },         fields: {             fullname: {                 title: 'name'             },          },         selectionchanged: function () {             var $selectedrows = $('#m2tc').jtable('selectedrows');              $('#selectedrowlist').empty();             if ($selectedrows.length > 0) {             } else {                 $('#selectedrowlist').append('no row selected! select rows see here...');             }         }     }); } 

the html:

<div id="m1tc"></div> <div id="m2tc"></div> 

solved adding code after 'var record = $(this).data("record");':

$('#m2tc').remove(); $('#m1tc').after('<div id="m2tc"></div>');