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>');
Comments
Post a Comment